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
const params = new URLSearchParams({
q: city,
appid: API_KEY,
units: state.unit
});
For coordinates:
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.