Project 10: Weather App with Time-Travel

📋 Project Brief

Build a weather application that combines current atmospheric data with historical climate records to create "data stories." Using the Fetch API, you will orchestrate multiple parallel API calls, render dynamic SVG weather icons, and implement a "Time Travel" feature showing how weather in a location has changed over decades.

🎯 Learning Objectives

• Orchestrate multiple asynchronous API calls with Promise.all
• Use the Geolocation API for automatic location detection
• Build dynamic SVG icons that respond to data
• Implement CSS gradient backgrounds that shift based on temperature and time of day
• Handle unit conversion (Celsius, Fahrenheit, Kelvin) with state management

✅ Feature Requirements

Feature 1: Geolocation Integration

Acceptance Criteria:

• On first visit, prompt the user for location permission
• If granted, auto-detect city and fetch weather data
• If denied, show a search bar for manual city entry
• Provide a "Use My Location" button that re-triggers geolocation
• Handle the "Permission Denied" and "Position Unavailable" error cases gracefully

Feature 2: Dynamic Backgrounds

Acceptance Criteria:

• Background gradient changes based on: time of day (sunrise/sunset) AND current temperature
• Cold temperatures: blue/purple tones; Hot temperatures: orange/red tones
• Nighttime: dark navy/black gradients; Daytime: bright sky blue
• Transitions must be smooth (CSS transition on background, ~1 second)

Feature 3: Historical "Time Travel"

Acceptance Criteria:

• A "This Day in History" widget shows the temperature on this date in 1970, 1990, and 2010
• Display as a comparison card: "Today: 28°C | 1990: 24°C | Change: +4°C"
• If historical data is unavailable, show "Data not available" gracefully
• Include a mini line chart showing the temperature trend across decades

Feature 4: Multi-Unit Support

Acceptance Criteria:

• Toggle between Celsius, Fahrenheit, and Kelvin
• The selected unit persists in localStorage
• All temperatures across the app update instantly (no re-fetch required)
• Wind speed also converts: km/h ↔ mph ↔ m/s

Feature 5: UV Index & Air Quality

Acceptance Criteria:

• Fetch UV Index and Air Quality Index (AQI) from specialized APIs
• Display UV level with a color-coded badge: Low (green), Moderate (yellow), High (orange), Very High (red), Extreme (purple)
• AQI displayed with a health recommendation: "Good — Safe for outdoor activities"
• Both must handle API failures independently (one failing doesn't break the other)

📊 API Orchestration

API Call	Data Returned	Dependency
Current Weather	Temperature, humidity, wind, conditions	None (primary)
5-Day Forecast	Daily highs/lows for next 5 days	Requires city/coordinates
Historical Data	Temperature on this date in past years	Requires city/coordinates
UV Index	Current UV level	Requires coordinates
Air Quality	AQI and pollutant breakdown	Requires coordinates

Use Promise.allSettled to fetch all APIs in parallel. Render available data immediately; show "Unavailable" for any that fail.

🧪 Testing Checklist

• Unit test temperature conversion functions (C↔F↔K)
• Unit test wind speed conversion
• Mock API responses and test UI rendering for each weather condition
• Test graceful degradation when one or more APIs fail
• A11y: weather data must be readable by screen readers (not just icons)

🚀 Stretch Goals

• Add a "Saved Locations" feature to compare weather across cities
• Implement weather alerts/warnings
• Add a rain radar map using Leaflet.js
• Create a "Dress Suggestion" feature based on conditions