Open In App
Related Articles

Weather app using Vanilla JavaScript

Like Article
Save Article
Report issue

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 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{city id}&appid={API key}


  1. Variable Declaration:
    • Declare variables for longitude, latitude, temperature, summary, location, and icon elements.
  2. Window Load Event:
    • Add a window load event listener to execute code when the page is fully loaded.
  3. Geolocation Retrieval:
    • Check geolocation availability and retrieve the device’s current position (latitude and longitude).
  4. OpenWeatherMap API Request:
    • Construct and fetch data from the OpenWeatherMap API based on the obtained location.
  5. Update HTML Elements:
    • Update HTML elements with the fetched weather data, including temperature, summary, location, and an icon image

Example: In this example, we have followed the above approach.


// 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) => {
      lon = position.coords.longitude;
      lat = position.coords.latitude;
      // API ID
      const api = "6d055e39ee237af35ca066f35474e9df";
      // API URL
      const base =
`${lat}&` +
      // Calling the API
        .then((response) => {
          return response.json();
        .then((data) => {
          temperature.textContent =
              Math.floor(data.main.temp - kelvin) + "°C";
          summary.textContent =[0].description;
          loc.textContent = + "," +;
          let icon1 =[0].icon;
          icon.innerHTML =
              `<img src="icons/${icon1}.svg" style= 'height:10rem'/>`;



<!DOCTYPE html>
<html lang="en">
    <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-->
    * {
        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);
    <div class="container">
    <div class="icon">---</div>
    <div class="temp">-°C</div>
    <div class="summary">----</div>
    <div class="location"></div>
    <!--Linking the javascript code-->
    <script src="script.js"></script>


Output: Click here to see live code output

Last Updated : 16 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Similar Reads