Project: Weather panel

JavaScript course · Intermediate · Lesson 90/134

Overview of the 5-lesson weather project: city input, fetch and DOM update.

Project: Weather panel

In this 5-lesson project we'll build a weather panel. The user types a city name, clicks a button, and sees the weather information on screen. All interaction runs through JavaScript.

We'll combine these concepts:

Selecting elements with querySelector
Listening for clicks with addEventListener
Fetching data with fetch
Updating the DOM with textContent and template literals

Each lesson continues on top of the previous one's solution.

The HTML skeleton

The panel's HTML skeleton is ready: inside the #app container there is a heading, an #cityInput field, a #getWeatherButton button, and a #weatherResult panel. The user types a city name and clicks the button; the result appears inside #weatherResult. With JavaScript we'll select these elements and wire up the events. We'll add all behavior through code without touching the HTML.

Exercise Select the four elements and log them

Select the four elements with querySelector and assign them to variables: app (#app), cityInput (#cityInput), getWeatherButton (#getWeatherButton) and weatherResult (#weatherResult). Then log them all with console.log.

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);

Test yourself

Which method is used to fetch data from a server?
- fetch()
- console.log()
- querySelector()
- appendChild()
Show answer

fetch() — Correct! fetch is the standard way to fetch data from a server.

Select the city input field

const cityInput = document.____;

Show answer

const cityInput = document.querySelector("#cityInput");

Match the HTML id to its role

#app

Main container
#cityInput

City name entry
#getWeatherButton

Click button
#weatherResult

Weather info panel

Project: Weather panel