Youtube Video:
1. Overview of the Weather App
The Weather App is a responsive web application that fetches real-time weather data from the OpenWeatherMap API and displays it in a visually appealing glassmorphism UI. Users can search for any city worldwide and get:
Current temperature (°C)
Weather condition (e.g., "Cloudy," "Rainy")
Humidity & wind speed
Country flag of the searched location
Key Features
✅ Real-time weather data
✅ Responsive & modern UI (Glassmorphism effect)
✅ Dynamic weather icons
✅ Country flags for locations
✅ Error handling for invalid searches
2. Detailed Code Breakdown
A. HTML Structure
The HTML provides the skeleton of the app:
<div class="container"> <!-- Search Bar --> <div class="search_box"> <i class="bx bxs-map"></i> <input type="text" placeholder="Enter your location" id="location"> <button id="search-btn"><i class='bx bx-search'></i></button> </div> <!-- City & Country Display --> <div class="city-display"> <span id="city-name"></span> <img id="country-flag" style="display: none;"> </div> <!-- Weather Info --> <div class="weather_box"> <img id="weather-icon" src="/images/cloud.png"> <p class="temp" id="temperature">16<span>°C</span></p> <p class="desc" id="description">Broken Clouds</p> </div> <!-- Additional Weather Stats --> <div class="weather_details"> <div class="humidity"> <i class='bx bx-water'></i> <span id="humidity">0%</span> <p>Humidity</p> </div> <div class="wind"> <i class='bx bx-wind'></i> <span id="wind">0km/h</span> <p>Wind Speed</p> </div> </div> </div>
🔹 Key Elements:
search_box
: Input field + search buttoncity-display
: Shows city name + country flagweather_box
: Displays weather icon, temperature, and descriptionweather_details
: Shows humidity and wind speed
B. CSS Styling (Glassmorphism UI)
The CSS gives the app a modern, frosted-glass effect with smooth animations.
Key Styling Features:
Glassmorphism Effect (Transparent blur background)
.container { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.4); }
Responsive Layout
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Search Box Styling
.search_box input { background: transparent; border: 2px solid rgba(255, 255, 255, 0.2); color: white; }
Weather Icon & Temperature Styling
.weather_box img { width: 40%; } .temp { font-size: 64px; }
C. JavaScript (API Fetch & Dynamic Updates)
The JavaScript handles:
Fetching weather data from OpenWeatherMap
Updating the UI dynamically
Error handling for invalid cities
1. API Configuration
const apiKey = 'YOUR_API_KEY'; // Replace with OpenWeatherMap API key const apiUrl = `https://api.openweathermap.org/data/2.5/weather?units=metric&appid=${apiKey}`;
🔹 API Endpoint: api.openweathermap.org
🔹 Parameters:
units=metric
→ Temperature in °Cq={city}
→ Searched location
2. Fetching Weather Data
async function checkWeather(city) { try { const response = await fetch(`${apiUrl}&q=${city}`); const data = await response.json(); // Update UI cityName.textContent = data.name; countryFlag.src = `https://flagcdn.com/w40/${data.sys.country.toLowerCase()}.png`; temperature.innerHTML = `${Math.round(data.main.temp)}<span>°C</span>`; description.textContent = data.weather[0].description; humidity.textContent = `${data.main.humidity}%`; wind.textContent = `${data.wind.speed} km/h`; // Set weather icon dynamically const weatherCondition = data.weather[0].main.toLowerCase(); weatherIcon.src = weatherImages[weatherCondition] || '/images/default.png'; } catch (error) { alert("City not found!"); } }
🔹 Key Data Points Extracted:
data.name
→ City namedata.sys.country
→ Country code (for flag)data.main.temp
→ Temperaturedata.weather[0].description
→ Weather condition
3. Event Listeners (Search Functionality)
// Search on button click searchBtn.addEventListener('click', () => { if (locationInput.value.trim()) checkWeather(locationInput.value.trim()); }); // Search on pressing Enter locationInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && locationInput.value.trim()) { checkWeather(locationInput.value.trim()); } });
3. How to Extend the App (Blog Post Ideas)
1. Add a 5-Day Forecast
Use OpenWeatherMap’s
forecast
endpointDisplay data in a card layout
2. Geolocation (Auto-Detect Weather)
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { const { latitude, longitude } = position.coords; fetch(`${apiUrl}&lat=${latitude}&lon=${longitude}`) .then(res => res.json()) .then(data => updateWeather(data)); }); }
3. Dark/Light Mode Toggle
body.dark-mode { background: #121212; } body.light-mode { background: #f5f5f5; }
4. Save Recent Searches (Local Storage)
localStorage.setItem('lastCity', city); const lastCity = localStorage.getItem('lastCity'); if (lastCity) checkWeather(lastCity);
5. Add Weather Alerts (Rain, Storm Warnings)
if (data.weather[0].main === "Thunderstorm") { alert("⚠️ Storm warning in this area!"); }
4. Final Thoughts (Blog Conclusion)
This Weather App is a great project for beginners to learn:
API integration (fetching real-time data)
Dynamic UI updates (DOM manipulation)
Responsive design (CSS Flexbox & media queries)
Error handling (invalid city searches)
You can expand it further by adding more features like:
Animated weather backgrounds (rain/snow effects)
Voice search (Web Speech API)
Weather comparison (compare two cities)
Would you like a step-by-step tutorial on building this
Youtube channel link - https://youtu.be/nEtHfD_MnVg