Weather app using Vanilla JavaScript

0 0 1 minute read

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 longitude
- Calling API by city ID

api.openweathermap.org/data/2.5/weather?id={city id}&appid={API key}

Example:

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> 

Javascript

// Declaring the variables 
let 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'/>`; 
        }); 
    }); 
  } 
}); 