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/ 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}
Approach
-
Variable Declaration:
- Declare variables for longitude, latitude, temperature, summary, location, and icon elements.
-
Window Load Event:
- Add a window load event listener to execute code when the page is fully loaded.
-
Geolocation Retrieval:
- Check geolocation availability and retrieve the device’s current position (latitude and longitude).
-
OpenWeatherMap API Request:
- Construct and fetch data from the OpenWeatherMap API based on the obtained location.
-
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.
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' />`;
});
});
}
}); |
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 >
|
Output: Click here to see live code output