Render Current Weather

Task

Replace the temporary console output with a renderer that maps the API response into the prepared UI.

Open

Add unitSymbol(), temp(), and displayCurrent(data) in script.js. Replace console.log(current) with displayCurrent(current).

Implementation

javascript

function unitSymbol() {
  return state.unit === "metric" ? "°C" : "°F";
}

function temp(value) {
  return Math.round(value);
}

function displayCurrent(data) {
  state.lastData = data;

  const symbol = unitSymbol();
  $("cityName").textContent = `${data.name}, ${data.sys.country}`;
  $("dateTime").textContent = formatDate(data.dt, data.timezone);
  $("temperature").textContent = temp(data.main.temp);
  $("unit").textContent = symbol;
  $("condition").textContent = data.weather[0].main;
  $("description").textContent = data.weather[0].description.replace(/\w/g, c => c.toUpperCase());
  $("feelsLike").textContent = `Feels like ${temp(data.main.feels_like)}${symbol}`;
  $("humidity").textContent = `${data.main.humidity}%`;
  $("wind").textContent = `${Math.round(state.unit === "metric" ? data.wind.speed * 3.6 : data.wind.speed)} ${state.unit === "metric" ? "km/h" : "mph"}`;
  $("pressure").textContent = `${data.main.pressure} hPa`;
  $("visibility").textContent = `${(data.visibility / 1000).toFixed(1)} km`;

  $("weatherContent").classList.remove("hidden");
  $("welcome").classList.add("hidden");
}

The response is nested. Temperature and feels-like values are in main, country is in sys, and condition text is the first item in weather. The renderer writes data into existing DOM nodes instead of rebuilding the whole page. Saving lastData is important for the unit-switching lesson later.

Test

Search for New York. Confirm the city, timestamp placeholder, temperature, condition, description, feels-like value, humidity, wind, pressure, and visibility are populated.

Expected result

A successful search now produces a complete current-weather card.

Checkpoint

Before moving on, confirm the expected result in the running app and make sure the browser console has no blocking errors.