Rendering data to the DOM

Render fetched data to the UI with template literals and textContent.

Rendering data to the screen

To reflect the server data on screen we use the weatherResult.textContent property. It sets the text content of an element. To combine the city name and the weather info into a single string we use a template literal: inside backticks we embed values with ${variable}. In the example `${city}: ${info}` the city and info values merge into one string. When we assign the result to textContent it appears on screen.

Template literals

A template literal is a string written inside backticks. You can embed values inside it with ${}. Writing `${city} - ${info}` puts the values of the city and info variables into the string. You don't need to concatenate with quotes or plus signs. Template literals can also span multiple lines; instead of the \n escape sequence you can just press enter. This makes it easier to write readable code when rendering data to the screen.

Exercise Define the renderWeather function

Continue on top of the previous lesson's solution. Define a function renderWeather(city, info). Inside it, assign the template literal `${city}: ${info}` to the weatherResult.textContent property. This way the city and weather info are rendered on a single line.

Show example solution

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const getWeatherButton = document.querySelector("#getWeatherButton");
const weatherResult = document.querySelector("#weatherResult");
console.log(app, cityInput, getWeatherButton, weatherResult);

function getWeather() {
  const city = cityInput.value;
  console.log(city);
}

getWeatherButton.addEventListener("click", getWeather);

async function fetchWeather(city) {
  const url = `https://api.example.com/weather?city=${city}`;
  const response = await fetch(url);
  const info = await response.text();
  return info;
}

function renderWeather(city, info) {
  weatherResult.textContent = `${city}: ${info}`;
}

Test yourself

Assign the result with a template literal

weatherResult.textContent = ____;

Show answer

weatherResult.textContent = `${city}: ${info}`;

Which uses a template literal to combine values?
- 'City: ' + city
- 'City: ${city}'
- 'City: city'
- `${city}: ${info}`
Show answer

`${city}: ${info}` — Correct! Backticks and ${} form a template literal.
Match the render steps

template literal

Combines the values
textContent

Sets the text
weatherResult

The target element
${info}

Embeds the info value
Match the renderWeather pieces

weatherResult.textContent

Sets the output
${city}

Embeds the city
${info}

Embeds the info

Next lesson: Project final - Weather panel

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies