Practice & Assessment
Test your understanding of Asynchronous JavaScript and the Fetch API
Multiple Choice Questions
6fetch('/api/data') resolves successfully. Does this guarantee the server returned a 200 response?
Why must you await res.json() separately after awaiting fetch()?
What does the event loop do when the call stack is empty?
An async function returns the number 5. What type does the caller receive?
You use AbortController to cancel a fetch. What error name is thrown?
Promise.all([p1, p2, p3]) — one promise rejects. What happens?
Coding Challenges
1GitHub User Profile Fetcher
Build a search UI with a text input (#username-input) and a Search button (#search-btn). On click, fetch https://api.github.com/users/{username} using async/await. While loading show 'Searching...' in #status. On success display the user's avatar (img), name, login, and public_repos count in #result. On error (network failure or 404) display a user-friendly error message. Implement a 6-second AbortController timeout. Input: GitHub username string. Output: profile card or error message. Constraint: handle loading, success, and error UI states explicitly. Estimated time: 25-30 minutes.
Mini Project
Live Weather Dashboard
Build a weather dashboard using the Open-Meteo API (free, no key required). Requirements: a city search input that uses the geocoding API (https://geocoding-api.open-meteo.com/v1/search?name={city}) to resolve coordinates, then fetches current weather from https://api.open-meteo.com/v1/forecast with temperature, windspeed, and weathercode parameters. Display current temperature, wind speed, and a text description derived from weathercode. Show loading spinner (classList toggle) during requests, an error state on failure, and a history section listing the last 5 searched cities using localStorage. Use async/await, AbortController for timeouts, and Promise.all when fetching geocoding and weather in sequence.