Skip to main content

​
Changing the city

The city is set as the q query parameter in the API URL inside script.js: 
const link = "https://api.openweathermap.org/data/2.5/weather?q=jaipur&appid=YOUR_API_KEY"; 
const link = "https://api.openweathermap.org/data/2.5/weather?q=london&appid=YOUR_API_KEY";
Replace jaipur with any city name supported by OpenWeatherMap. Multi-word city names with spaces work fine (e.g., new york, los angeles), or you can URL-encode the spaces as + (e.g., new+york).

​
Changing temperature units

By default, script.js receives the temperature in Kelvin and converts it manually: 
document.getElementById("temp").innerText = Math.round(data.main.temp - 273.15);
A cleaner approach is to pass a units parameter to the API so OpenWeatherMap returns the value in your preferred unit directly, removing the need for manual conversion.
Add &units=metric to the URL and remove the Kelvin offset:
const link = "https://api.openweathermap.org/data/2.5/weather?q=london&units=metric&appid=YOUR_API_KEY"; 

document.getElementById("temp").innerText = Math.round(data.main.temp - 273.15); 
document.getElementById("temp").innerText = Math.round(data.main.temp);
Also update the degree label in index.html from C to match:
<h4><span id="temp">--</span><sup>o</sup>C</h4>

​
Changing the background color

The background color is set in two places in style.css: the body rule and the .weather-card rule. Both use #343434 (dark grey) by default. 
body {
  background: #343434; 
  background: #1a1a2e; 
}

.weather-card {
  background: #343434; 
  background: #1a1a2e; 
}
Keep both values in sync so the card blends into the page background as intended by the neumorphic shadow design.

​
Changing the card size

The card dimensions are controlled by width and max-width in the .weather-card rule in style.css: 
.weather-card {
  width: 80vw;       /* percentage of the viewport width */
  max-width: 30rem;  
  max-width: 22rem;  /* narrower card */
}
  • width: 80vw makes the card responsive on small screens.
  • max-width caps the width on larger screens. Decrease it for a narrower card, increase it for a wider one.

​
Changing the font

The font is loaded from Google Fonts in index.html: 
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"/>
Then it is applied in style.css: 
body {
  font-family: 'poppins', sans-serif; 
  font-family: 'Inter', sans-serif;   
}
Replace Poppins / poppins with any font available on Google Fonts. Make sure the name in the <link> tag and the font-family value match (Google Fonts names are case-sensitive in the URL but CSS font-family is not).

Build docs developers (and LLMs) love

Get started for freeTalk to us