CodingNic

Temperature Units & Persistent Preferences

Send Units to Both Requests

Temperature Units & Persistent Preferences 20 min read

Send Units to Both Requests

Send Units to Both Requests

Task

Make current and forecast requests use the same unit state.

Open

Inspect the URLSearchParams objects in both fetchWeather() and fetchByCoordinates() and ensure each contains units: state.unit.

Implementation

javascript
const params = new URLSearchParams({
  q: city,
  appid: API_KEY,
  units: state.unit
});

For coordinates:

javascript
const params = new URLSearchParams({
  lat,
  lon,
  appid: API_KEY,
  units: state.unit
});

The API should be asked for one unit system consistently. If one endpoint uses metric and the other imperial, the current card and forecast can disagree.

Test

Search for a city, inspect the request URL in the Network panel, and verify units=metric or units=imperial matches the toggle.

Expected result

Both API requests now follow the same unit state.

Checkpoint

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