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.
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 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 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
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 |