Skip to main content
The app fetches current weather data from the OpenWeatherMap Current Weather API and maps the response fields directly to DOM elements.

​
Endpoint

GET https://api.openweathermap.org/data/2.5/weather

​
Query parameters

​
q
string
required
City name to query. The app hardcodes jaipur as the default location.
​
appid
string
required
Your OpenWeatherMap API key. Passed as a query parameter on every request.
​
units
string
Unit system for temperature values. Accepted values:
  • standard (default) — Kelvin
  • metric — Celsius
  • imperial — Fahrenheit
The app uses the default standard units and converts Kelvin to Celsius manually.

​
Response fields

The following fields from the API response are used by the app.
​
name
string
City name returned by the API. Mapped to #location.
​
weather[0].description
string
Short text description of current weather conditions (e.g., light rain, clear sky). Mapped to #weather. Displayed in capitalize case via CSS.
​
weather[0].icon
string
Icon code used to construct the weather icon URL. Mapped to the src attribute of #icon.
​
main.temp
number
Temperature in Kelvin (when using default standard units). The app converts this to Celsius before display. Mapped to #temp.
​
main.humidity
number
Relative humidity percentage (0–100). Displayed as Humidity: X%. Mapped to #humidity.
​
wind.speed
number
Wind speed in metres per second. Displayed as Wind Speed: X m/s. Mapped to #wind.

​
Icon URL pattern

Weather icons are served by OpenWeatherMap using the icon code from weather[0].icon: 
https://openweathermap.org/img/w/{icon}.png
For example, icon code 10d resolves to: 
https://openweathermap.org/img/w/10d.png

​
Fetch example

The following is the full fetch call from script.js:
script.js
const link = "https://api.openweathermap.org/data/2.5/weather?q=jaipur&appid=a41b6d64a06f2c61e7c1975a953f6cc8";

fetch(link)
  .then(response => response.json())
  .then(data => {
    document.getElementById("location").innerText = data.name;
    document.getElementById("weather").innerText = data.weather[0].description;
    document.getElementById("temp").innerText = Math.round(data.main.temp - 273.15);
    document.getElementById("icon").src = `https://openweathermap.org/img/w/${data.weather[0].icon}.png`;
    document.getElementById("humidity").innerText = `Humidity: ${data.main.humidity}%`;
    document.getElementById("wind").innerText = `Wind Speed: ${data.wind.speed} m/s`;
  })
  .catch(error => {
    console.error("Error fetching weather data:", error);
  });
The API returns temperature in Kelvin by default (no units parameter is set). The app converts to Celsius manually using Math.round(data.main.temp - 273.15). To avoid this conversion, set units=metric in the query string — the API will then return temperature directly in Celsius.

Build docs developers (and LLMs) love

Get started for freeTalk to us