Weather app using Vanilla JavaScript

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

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.

Output: