Intermediate
One status value, an error and a retry
fetchWeather() fails the first time with Network error and succeeds after that, resolving { city: "Pune", temp: 31 } after 400 ms.
Keep the request in one state object with a status field ("loading", "error" or "success").
Show <p id="loading">Loading weather...</p> while loading; on error a <div role="alert"> with the error message and a button id="retry"; on success <p id="weather">Pune: 31 °C</p>.
Clicking #retry must load again (showing the loading text) and then the weather.
What Check tests
- It starts in the loading state
- The first failure shows an alert with the message and a
#retrybutton - Clicking
#retryshows the loading text again - The retry succeeds and
#weathershows Pune: 31 °C - The request state is one object with a
statusfield
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.