Skip to main content
The app’s interface consists of a single weather card rendered inside <main>. JavaScript reads weather data from the API and writes it to specific DOM elements by ID.

​
DOM elements

The following elements are targeted by script.js using document.getElementById.
IDTagPurpose
#location<span>Displays city name from data.name
#weather<h6>Displays weather description from data.weather[0].description
#temp<span>Displays temperature in Celsius (converted from Kelvin)
#icon<img>src set to the OpenWeatherMap icon URL
#humidity<p>Displays humidity with the label Humidity: X%
#wind<p>Displays wind speed with the label Wind Speed: X m/s

​
CSS classes

​
.weather-card

The main card container. Uses a neumorphic dark style — a flat dark background with offset box shadows to create a raised appearance. Key properties:
PropertyValue
background#343434
border-radius3rem
width80vw
max-width30rem
box-shadow0.3rem 0.3rem 0.6rem #191b1b, -0.3rem -0.3rem 0.6rem #595959
padding2rem
text-aligncenter
The box-shadow uses two layers: a dark shadow on the bottom-right and a lighter shadow on the top-left, producing the neumorphic raised effect.

​
.refresh

The circular refresh button centered below the weather data. Styled to match the neumorphic card aesthetic with a transparent background and rounded shape. Key properties:
PropertyValue
backgroundtransparent
bordernone
border-radius50%
width27%
height7rem
font-size2rem
color#9c9c9d
box-shadow0.6rem 0.2rem 0.6rem #252525, 0.3rem 0.3rem 1.2rem #4a4a4a
On hover, the shadow switches to inset, making the button appear pressed:
style.css
button.refresh:hover {
  box-shadow: inset 0.6rem 0.2rem 0.6rem #252525, inset 0.3rem 0.3rem 1.2rem #4a4a4a;
}

​
Refresh button HTML

The refresh button is defined inline in index.html and reloads the page to trigger a new API fetch:
index.html
<button onclick="window.location.reload()" class="refresh">
  <i class="fa fa-refresh"></i>
</button>
The icon is provided by Font Awesome 4.7 (fa-refresh), loaded via CDN.
To display additional weather fields such as pressure or visibility, add a new <p> element to the .weather-card section and read the corresponding field in script.js. For example, to show atmospheric pressure:
index.html
<p id="pressure">Pressure: --hPa</p>
script.js
document.getElementById("pressure").innerText = `Pressure: ${data.main.pressure} hPa`;
The OpenWeatherMap response includes data.main.pressure (hPa), data.visibility (metres), and data.clouds.all (cloud coverage %) among other fields.

Build docs developers (and LLMs) love

Get started for freeTalk to us