Weather App using Fetch API

Features:

  • Search weather by city name
  • Fetch real-time weather using OpenWeatherMap API
  • Displays temperature, weather description, and more
  • Clean, responsive UI


Requirements:

  • Basic HTML, CSS, JS knowledge
  • A free OpenWeatherMap API Key


Folder Structure 

weather-app/
├── index.html
├── style.css
└── script.js


HTML: index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Weather App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="weather-container">
    <h1>Weather App</h1>
    <input type="text" id="cityInput" placeholder="Enter city name..." >
    <button id="searchBtn">Weather</button<
    <div id="weatherResult" class="weather-result"></div>
  </div>

  <script src="script.js"<</script>
</body>
</html>


CSS: style.css 

body {
  font-family: 'Segoe UI', sans-serif;
  background: #e9f2f9;
  display: flex;
  justify-content: center;
  align-items: start;
  height: 100vh;
  padding-top: 60px;
  margin: 0;
}

.weather-container {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 400px;
  text-align: center;
}

input {
  padding: 10px;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
}

button {
  padding: 10px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.weather-result {
  margin-top: 20px;
  font-size: 1.1rem;
}


JavaScript: script.js 

const apiKey = "YOUR_API_KEY"; // Replace with your OpenWeatherMap API key
const searchBtn = document.getElementById("searchBtn");
const cityInput = document.getElementById("cityInput");
const weatherResult = document.getElementById("weatherResult");

searchBtn.addEventListener("click", getWeather);

function getWeather() {
  const city = cityInput.value.trim();
  if (city === "") {
    weatherResult.innerHTML = "❗ Please enter a city name.";
    return;
  }

  const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  fetch(apiURL)
    .then(response => {
      if (!response.ok) {
        throw new Error("City not found");
      }
      return response.json();
    })
    .then(data => {
      displayWeather(data);
    })
    .catch(error => {
      weatherResult.innerHTML = `Error: ${error.message}`;
    });
}

function displayWeather(data) {
  const temp = data.main.temp;
  const description = data.weather[0].description;
  const cityName = data.name;
  const country = data.sys.country;

  weatherResult.innerHTML = `
    <h2>${cityName}, ${country}</h2>
    <p><strong>Temperature:</strong> ${temp} °C</p>
    <p><strong>Condition:</strong> ${description}</p>
  `;
}


How to Use:

  • Get your API key from https://openweathermap.org/api
  • Replace "YOUR_API_KEY" in script.js
  • Open index.html in your browser
  • Enter a city and click Get Weather