Understand the JavaScript Scaffold

Task

Understand the state and helper functions that the starter already provides.

Open

Open script.js and inspect API_KEY, API_BASE, state, $, showLoader(), and showError().

Quick explanation: variables, objects, and functions

A JavaScript variable gives a value a name so the program can use it later. For example:

const API_BASE = "https://api.openweathermap.org/data/2.5";

Here, API_BASE is a constant variable containing the base URL that the weather requests will use.

The starter also groups related values inside a JavaScript object:

const state = {
  unit: localStorage.getItem("weatherUnit") || "metric",
  lastData: null,
  lastForecast: null
};

An object stores related pieces of information as properties. In this project, state.unit tells us which unit system is active, while lastData and lastForecast will hold the most recent weather responses.

A function is a reusable block of instructions. For example, showLoader() contains the logic for showing or hiding the loading overlay. Instead of repeating that logic in several places, later lessons can simply call the function.

The $ function is another small helper. It receives an ID and returns the matching DOM element. Helpers like this keep the rest of the code easier to read.

Implementation

state.unit controls the API unit system. lastData and lastForecast will later store the latest responses. The $ helper keeps DOM selection concise, while the loader and error helpers already know how to manipulate the prepared UI.

localStorage is the browser’s small built-in storage area for simple values. The starter checks whether a unit preference was saved under weatherUnit; if not, it uses metric as the default.

The value null means there is currently no stored weather response in that state property. Later, the API lessons will replace null with real data.

Test

Temporarily log state in the console:

console.log(state);

Refresh the page and inspect the object. Verify the initial unit is metric unless a previous browser session has saved another value. Remove the log when finished.

Expected result

The learner understands the starting variables, the state object, and the helper functions that later lessons will build on.

Checkpoint

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