Best JavaScript Weather App In Codepen 2021

Hello guys, in this article we will show you how to create weather app using JavaScript and also we have listed the top 3 best JavaScript Weather app which are available on codepen 2021

Weather app using Vanilla JavaScript

in the following article a simple step by step guide to cover how to create a weather app in vanilla JavaScript using the Open Weather Map API.

Step 1: Open web browser and go to https://openweathermap.org/ and create an account to get your API KEY.

open weather app api key

Step 2: After creating account, we have to create a folder and add a file, for example, index.html and script.js file

Step 3: We can get geographic coordinates like this:

Calling API by geographical coordinates- latitude and longitude

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API%20key}

Calling API by city ID

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

Calling API by city name

api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
api.openweathermap.org/data/2.5/weather?q={city name},{state code}&appid={API key}
api.openweathermap.org/data/2.5/weather?q={city name},{state code},{country code}&appid={API key}

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">
    <title>Simple Weather Applilcation</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;400&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
      <div class="icon">---</div>
      <div class="temp">-°C</div>
      <div class="summary">----</div>
      <div class="location"></div>
    </div>
    <style type="text/css">
          body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(90deg, #d5e7f5, #b6c3f9);
            font-size: 2rem;
            font-family: sans-serif;
            color: rgb(7, 9, 10);
        }
        .container {
            height: 20rem;
            width: 15rem;
            background-color: rgb(152 161 228);
            text-align: center;
            padding-top: 12px;
            border-radius: 8px;
        }
    </style>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

script.js

// 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 kel = 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 = "YOUR API KEY";
  
      // API URL
      const base =
`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&` +
`lon=${lon}&appid=YOUR API KEY`;
  
      // Calling the API
      fetch(base)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          console.log(data);
          temperature.textContent = 
              Math.floor(data.main.temp - kel) + "°C";
          summary.textContent = data.weather[0].description;
          loc.textContent = data.name + "," + data.sys.country;
          let icon1 = data.weather[0].icon;
          icon.innerHTML = 
              `<img src="https://openweathermap.org/img/w/${icon1}.png">`;
        });
    });
  }
});

Best Weather App in Codepen

#1 Dark Sky Weather App

Dark Sky Weather App

Dark Sky Weather App using HTML CSS and JavaScript, which was developed by GRAY GHOST. Moreover, you can customize it according to your wish and need.

Author:GRAY GHOST
Created on:September 16, 2016
Made with:HTML, CSS & JavaScript
Demo Link:Source Code / Demo
Tags:Dark Sky Weather App

#2 Weather App By Using OpenWeatherMap API

simple weather app with api

Simple Weather App using OpenWeatherMap API, which was developed by Envato Tuts+. Moreover, you can customize it according to your wish and need.

Author:Envato Tuts+
Created on:December 16, 2019
Made with:HTML, CSS & JavaScript
Demo Link:Source Code / Demo
Tags:Simple Weather App

#3 Weather App JavaScript

Weather App JavaScript

Awesome Weather App using HTML, CSS & JavaScript which was updated by Rahul. Moreover, you can customize it according to your wish and need.

Author:Rahul
Created on:April 22, 2021
Made with:HTML, CSS & JavaScript
Demo Link:Source Code / Demo
Tags:Weather App JavaScript

May you like this

Leave a Comment