Weather app using fetch

#javascript #api #webdev #beginners
<!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>
  </head>

  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      height: 100vh;
      background-color: lightblue;
      font-family: Arial;
    }

    #container {
      border: 1px solid black;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 30px;
      border-radius: 10px;
      background-color: white;
      /* text-align: center; */
      box-shadow: 0px 0px 10px gray;
    }

    #input_btn {
      justify-content: center;
      align-items: center;
      padding: 20px;
      margin: 20px;
      width: 250px;
      font-size: 16px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      background-color: blue;
      color: white;
      border-radius: 5px;
    }

    button:hover {
      background-color: darkblue;
    }

  </style>

  <body>
    <div id="container">
      <h1>Weather App</h1>

      <input id="input_btn" placeholder="Enter City Name..." type="text" />

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

      <h3 id="temp"></h3>

      <h3 id="humidity"></h3>

      <h3 id="wind"></h3>
    </div>

    <script>
      async function checkWeather() {
        const city = document.getElementById("input_btn").value;

        const apiKey = "396c18706adae198e87e52584942c909";

        const res = await fetch(
          `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`,
        );

        const data = await res.json();

        // console.log(data);

        const temp = document.getElementById("temp");

        const humidity = document.getElementById("humidity");

        const wind = document.getElementById("wind");

        temp.innerText = `🌡 Temperature : ${data.main.temp} °C`;

        humidity.innerText = `💧 Humidity : ${data.main.humidity}%`;

        wind.innerText = `🌬 Wind Speed : ${data.wind.speed} km/h`;
      }
    </script>
  </body>
</html>
output:
DEV Community

Weather app using fetch

Top comments (0)
