Simple Weather App in HTML [CODE]

Here is coding Simple Weather App in HTML

Sep 27, 2025 0 19

CODE:

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

  <style>

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

      font-family: 'Poppins', sans-serif;

    }

    body {

      height: 100vh;

      display: flex;

      justify-content: center;

      align-items: center;

      background: linear-gradient(135deg, #667eea, #764ba2);

      color: #fff;

    }

    .weather-app {

      width: 350px;

      padding: 20px;

      border-radius: 15px;

      background: rgba(0,0,0,0.5);

      box-shadow: 0 0 25px rgba(0,0,0,0.4);

      text-align: center;

    }

    .weather-app h2 {

      margin-bottom: 20px;

    }

    input {

      width: 80%;

      padding: 10px;

      border: none;

      outline: none;

      border-radius: 8px;

      font-size: 16px;

    }

    button {

      padding: 10px 15px;

      margin-left: 5px;

      border: none;

      border-radius: 8px;

      cursor: pointer;

      background: #00c6ff;

      color: white;

      transition: 0.3s;

    }

    button:hover {

      background: #0072ff;

    }

    .result {

      margin-top: 20px;

    }

    .result img {

      width: 80px;

    }

  </style>

</head>

<body>

  <div class="weather-app">

    <h2>Weather App</h2>

    <input type="text" id="city" placeholder="Enter city...">

    <button onclick="getWeather()">Search</button>

    <div class="result" id="result"></div>

  </div>

  <script>

    const apiKey = "YOUR_API_KEY"; // ← Yahan apni OpenWeather API key daalo

    async function getWeather() {

      const city = document.getElementById("city").value;

      if(city === "") return alert("Please enter a city!");

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

      const response = await fetch(url);

      const data = await response.json();

      if (data.cod === "404") {

        document.getElementById("result").innerHTML = "<p>City not found ❌</p>";

        return;

      }

      document.getElementById("result").innerHTML = `

        <h3>${data.name}, ${data.sys.country}</h3>

        <img src="http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png">

        <p><b>${data.main.temp}°C</b></p>

        <p>${data.weather[0].description}</p>

      `;

    }

  </script>

</body>

</html>