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:

html

<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:

  1. Glassmorphism Effect (Transparent blur background)

    css

    .container {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.4);
    }
  2. Responsive Layout

    css

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
  3. Search Box Styling

    css

    .search_box input {
      background: transparent;
      border: 2px solid rgba(255, 255, 255, 0.2);
      color: white;
    }
  4. Weather Icon & Temperature Styling

    css

    .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

javascript
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

javascript

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)

javascript

// 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)

javascript

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

css

body.dark-mode {
  background: #121212;
}
body.light-mode {
  background: #f5f5f5;
}

4. Save Recent Searches (Local Storage)

javascript

localStorage.setItem('lastCity', city);
const lastCity = localStorage.getItem('lastCity');
if (lastCity) checkWeather(lastCity);

5. Add Weather Alerts (Rain, Storm Warnings)

javascript

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 linkhttps://youtu.be/nEtHfD_MnVg


🔗 Helpful Resources

Previous Post Next Post