CodingNic

Build the Current Weather Experience

Render Temperature and Description

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.

jsx
{weather && forecast ? (
  <section className="weather-content">
    <div className="main-grid">
      <CurrentWeather weather={weather} unit={unit} />
      <WeatherStats weather={weather} unit={unit} />
    </div>
  </section>
) : <Welcome />}