BEST Weather App with Country Flags For 2025

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 button
city-display: Shows city name + country flag
weather_box: Displays weather icon, temperature, and description
weather_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 °C
q={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 name
data.sys.country → Country code (for flag)
data.main.temp → Temperature
data.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 endpoint
Display 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