Build the Current Weather Experience
10 min read
Render Temperature and Description
Task
Use OpenWeather fields for the main temperature, condition, and description.
File / section
src/components/CurrentWeather.jsx
Change
Use weather.main.temp, weather.weather[0].main, and weather.weather[0].description. The final temperature expression is Math.round(weather.main.temp) with a unit label based on unit. Capitalize the description with replace(/\b\w/g, c => c.toUpperCase()).
Why this change matters
Rounding keeps the dashboard readable while the API supplies more precise values.
Test it
Search in two different cities and confirm the displayed values change.
Checkpoint
The main weather card now reflects the selected location and current conditions.
{weather && forecast ? (
<section className="weather-content">
<div className="main-grid">
<CurrentWeather weather={weather} unit={unit} />
<WeatherStats weather={weather} unit={unit} />
</div>
</section>
) : <Welcome />}