================================================================ LAB 3 — Fetch & Consuming REST APIs: Weather Dashboard ================================================================ Course: Web Technologies Topic: Lecture 5 (AJAX, Fetch, REST) Time: 2 hours lab + 2 hours self-study ---------------------------------------------------------------- LEARNING GOALS ---------------------------------------------------------------- - Make HTTP GET requests with the Fetch API and async/await - Parse JSON responses - Render dynamic data into the DOM - Handle Loading / Success / Error / Empty UI states - Read API documentation ---------------------------------------------------------------- API ---------------------------------------------------------------- Use Open-Meteo (free, no API key): https://api.open-meteo.com/v1/forecast?latitude=-6.16&longitude=39.20¤t=temperature_2m,wind_speed_10m ---------------------------------------------------------------- TASKS ---------------------------------------------------------------- TASK 1 — UI - for city name + Search button - Result card showing: city, current temp, wind speed, last-updated time - Loading spinner, empty message, error message TASK 2 — Fetch + render - On submit: call your async fetchWeather(city) function - Use a free geocoding endpoint to convert city -> lat/lon: https://geocoding-api.open-meteo.com/v1/search?name=Zanzibar - Then call the forecast endpoint with the coordinates TASK 3 — UI states - Set state="loading" before the fetch; show spinner - On success: state="success"; render the card - On error or no results: state="error"; show message + Retry button TASK 4 — Centralise the API client - Put fetch logic in api.js with named exports - app.js only deals with DOM and events TASK 5 — Recent searches - Save the last 5 searched cities to localStorage - Show them as clickable chips below the search box ---------------------------------------------------------------- DELIVERABLES ---------------------------------------------------------------- - Public GitHub repo - Live on GitHub Pages - README explaining the API and how to run ---------------------------------------------------------------- GRADING (10 marks) ---------------------------------------------------------------- Successful fetch + render ......... 3 Loading/Error/Empty states ........ 2 api.js separation ................. 2 Recent searches with persistence .. 2 Code quality + commit history ..... 1