Building a Weather App with OpenWeatherMap API and JavaScript.

This app allows users to input a city name and get real-time weather data using JavaScript and the OpenWeatherMap API

<!DOCTYPE html>
<html>
<head>
  <title>Simple Weather App</title>
</head>
<body>
  <h2>Weather App</h2>
  <input type="text" id="city" placeholder="Enter city name">
  <button onclick="getWeather()">Get Weather</button>
  <div id="weatherResult"></div>

  <script>
    async function getWeather() {
      const city = document.getElementById('city').value;
      const apiKey = '54758794bdf4bd7c08c0263ed0e6f46a';
      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();

      document.getElementById('weatherResult').innerHTML =
        `<p>Location: ${data.name}</p>
         <p>Temperature: ${data.main.temp} °C</p>
         <p>Weather: ${data.weather[0].description}</p>`;
    }
  </script>
</body>
</html>

Weather App

Subscribe to my newsletter

Chimdessa Daraje

Chimdessa Daraje