Weather Widget with HTML, CSS, and JavaScript

on

 

Weather Widget with HTML, CSS, and JavaScript

The project we’re examining today is a beautifully designed weather widget that combines clean design principles with functional weather reporting. This small but powerful application allows users to search for cities and get current weather conditions with visual animations that change based on the weather type.

Overview of the Project

This weather widget consists of three main files:

  • An HTML file for structure
  • A CSS file for styling and animations
  • A JavaScript file that handles data fetching and dynamic content updates

The most impressive aspect is how the widget creates different weather animations (sun, clouds, rain, snow, etc.) using pure CSS, and how it changes the background gradient color based on temperature ranges.

Key Features

  1. Responsive design that works across different screen sizes
  2. Animated weather icons created with pure CSS
  3. Dynamic background colors that change based on temperature
  4. Error handling for invalid city names
  5. Loading animation during API calls
  6. Clean, minimalist UI with hover effects

The HTML Structure

The HTML is structured in a clean, semantic way with container divs for different sections:

<div class="container">
    <div class="weather-header">
        <div class="location">Enter a City</div>
        <div class="date">--</div>
    </div>
    <div class="loading"></div>
    <div class="weather-body" style="display: none;">
        <div class="icon-container"></div>
        <div class="temp">--°C</div>
        <div class="description">--</div>
        <div class="details">
            <!-- Weather details here -->
        </div>
    </div>
    <div class="error-message">City not found. Please try again.</div>
    <div class="search-container">
        <input type="text" placeholder="Enter city name" id="city-input">
        <button id="search-btn">Search</button>
    </div>
</div>

The JavaScript Magic

The JavaScript file handles API calls to OpenWeatherMap and updates the UI accordingly. One of the most interesting functions is createWeatherIcon(), which dynamically creates different weather animations based on the weather code:

function createWeatherIcon(weatherCode) {
    iconContainer.innerHTML = '';
    
    if (weatherCode >= 200 && weatherCode < 300) {
        // Create thunderstorm elements
        const cloud = document.createElement('div');
        cloud.className = 'cloud';
        
        const thunder = document.createElement('div');
        thunder.className = 'thunder';
        
        iconContainer.appendChild(cloud);
        iconContainer.appendChild(thunder);
    } 
    else if (weatherCode >= 300 && weatherCode < 600) {
        // Create rain elements
        // ...
    }
    // Other weather conditions...
}

Another impressive feature is how the background color changes based on temperature:

const temp = data.main.temp;
let bgColor;
if (temp < 0) {
    bgColor = 'linear-gradient(135deg, #7f7fd5, #86a8e7)'; // Cold
} else if (temp < 15) {
    bgColor = 'linear-gradient(135deg, #6e8efb, #a777e3)'; // Cool
} else if (temp < 25) {
    bgColor = 'linear-gradient(135deg, #56ccf2, #2f80ed)'; // Mild
} else {
    bgColor = 'linear-gradient(135deg, #ff9966, #ff5e62)'; // Hot
}
document.body.style.background = bgColor;

The CSS Artistry

The CSS file is where the visual magic happens. The animations for different weather conditions are particularly impressive:

Sun Animation

.sun {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  background: #ffde17;
  border-radius: 50%;
  box-shadow: 0 0 20px #ffde17;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); box-shadow: 0 0 30px #ffde17; }
  100% { transform: scale(1); }
}

Rain Animation

.rain {
  position: absolute;
  top: 70px;
  left: 30px;
  display: flex;
  justify-content: space-around;
  width: 60px;
}
.drop {
  width: 3px;
  height: 15px;
  background: #68c3fe;
  border-radius: 3px;
  animation: rain-drop 1.5s infinite linear;
}
@keyframes rain-drop {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}

Areas for Improvement and Expansion

While this weather widget is already well-designed, there are a few enhancements that could be made:

  1. Add a 5-day forecast option
  2. Allow users to switch between Celsius and Fahrenheit
  3. Save the last searched city using localStorage
  4. Add more weather details like pressure, sunrise/sunset times
  5. Implement geolocation to automatically detect the user’s city

Conclusion

This minimal weather widget demonstrates how a small application can be both visually appealing and functionally robust. By combining modern CSS techniques with clean JavaScript code, it creates an interactive experience that adapts to different weather conditions.

Comments

Post a Comment