Map the DOM Contract

Task

Identify the exact HTML elements that JavaScript will read and update.

Open

Open index.html and locate the IDs searchForm, cityInput, error, loader, unitToggle, locationButton, weatherContent, welcome, cityName, dateTime, temperature, unit, condition, description, feelsLike, humidity, wind, pressure, visibility, weatherEmoji, updated, and forecastGrid.

Quick explanation: IDs and the DOM

An HTML id gives one element a unique name. For example:

<input id="cityInput" type="text">

The browser includes that element in the DOM, which is the page structure JavaScript can work with. In this project, the ID acts like a label that lets JavaScript find the correct part of the interface.

The starter uses a small helper called $:

const $ = (id) => document.getElementById(id);

document.getElementById(id) asks the browser for the element whose ID matches the value provided. The $ function is simply a shorter way to make that request.

For example:

const input = $("cityInput");

After this line, input refers to the actual <input> element in the page. The variable does not contain the user’s city yet; it contains a reference to the HTML element.

Implementation

These IDs are the connection points between the HTML and JavaScript. For example, temperature receives the numeric value while forecastGrid will later receive generated forecast-card HTML.

Think of the HTML IDs as a contract: the JavaScript expects these names to exist. If an ID is misspelled or removed, a later JavaScript feature may not be able to find the element it needs.

Test

Compare the IDs with the existing $ helper and the form, input, errorEl, and loader references in script.js. Confirm each selector points to a real element.

In the browser console, you can also check one directly:

console.log($("cityInput"));

You should see the city input element rather than null.

Expected result

You can now navigate the UI from JavaScript without guessing selectors, and you understand why the IDs are important.

Checkpoint

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