Weather app using Vanilla JavaScript

03 Aug, 2021
The following approach covers how to create a Weather Application in Vanilla JavaScript using Open Weather Map API. Using this API, we can get weather data for each coordinate.
Project Setup:
Step 1: Now go to https://openweathermap.org/ and create an account and get your API KEY.
Step 2: After that, you can create a folder and add a file, for example, index.html and script.js file.
Step 3: We can fetch geographical coordinates using the following approaches:Calling API by geographical coordinates- latitude and longitudeapi.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}Calling API by city IDapi.openweathermap.org/data/2.5/weather?id={city id}&appid={API key}
Calling API by geographical coordinates- latitude and longitude
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
Calling API by city IDapi.openweathermap.org/data/2.5/weather?id={city id}&appid={API key}
api.openweathermap.org/data/2.5/weather?id={city id}&appid={API key}
Example:
index.html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--The CSS styling-->    <style>      * {        margin: 0;        padding: 0;        box-sizing: border-box;      }      body {        height: 100vh;        display: flex;        flex-direction: column;        align-items: center;        justify-content: center;        background: linear-gradient(rgb(123, 184, 104), rgb(13, 87, 10));        font-size: 2rem;        font-family: sans-serif;        color: rgb(7, 9, 10);      }      .container {        height: 20rem;        width: 15rem;        background-color: rgb(152, 228, 165);        text-align: center;        padding-top: 12px;        border-radius: 16px;        border: 2px solid rgb(14, 43, 1);      }    </style>  </head>  <body>    <div class="container">      <div class="icon">---</div>      <div class="temp">-°C</div>      <div class="summary">----</div>      <div class="location"></div>    </div>    <!--Linking the javascript code-->    <script src="script.js"></script>  </body></html>
script.js
// Declaring the variableslet lon;let lat;let temperature = document.querySelector(".temp");let summary = document.querySelector(".summary");let loc = document.querySelector(".location");let icon = document.querySelector(".icon");const kelvin = 273;  window.addEventListener("load", () => {  if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition((position) => {      console.log(position);      lon = position.coords.longitude;      lat = position.coords.latitude;        // API ID      const api = "6d055e39ee237af35ca066f35474e9df";        // API URL      const base =`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&` +`lon=${lon}&appid=6d055e39ee237af35ca066f35474e9df`;        // Calling the API      fetch(base)        .then((response) => {          return response.json();        })        .then((data) => {          console.log(data);          temperature.textContent =               Math.floor(data.main.temp - kelvin) + "°C";          summary.textContent = data.weather[0].description;          loc.textContent = data.name + "," + data.sys.country;          let icon1 = data.weather[0].icon;          icon.innerHTML =               `<img src="icons/${icon1}.svg" style= 'height:10rem'/>`;        });    });  }});
Output:
Reference: https://openweathermap.org/current
bunnyram19
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS