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'/>`; }); }); } }); |
Output: Click here to see live code output
