| Level Navigation: 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
Current Level: 10 |
Goal: Scale your app to handle multiple city buttons, creating a comprehensive city switcher.
📋 What You’ll Do
- Add more city buttons to your HTML (Seattle, your chosen city, etc.)
- Add weather data POJOs for each additional city in your script
- Create event listeners for each new city button
- Ensure all buttons update the same card with different city data
🚀 Challenge Instructions
Extend your index.html and script.js files:
- Add more city buttons to your HTML (Seattle, your chosen city, etc.)
- Add weather data POJOs for each additional city in your script
- Create event listeners for each new city button
- Ensure all buttons update the same card with different city data
Challenge: Scale this up! You’ll need to:
- Create buttons with unique IDs for each city
- Add weather data for Seattle and your chosen city
- Set up
onEvent() listeners for each new button
- Test that all buttons work correctly with the same card
💡 What You’ll Learn
- Scaling event listeners for multiple cities
- Managing larger datasets in one file
- Testing multiple interactive elements
- Building a comprehensive city switcher
🎯 Suggested Cities to Add
- Seattle: Coordinates 47.61, -122.33
- Your chosen city: Get coordinates and weather data
- Bonus cities: Add more if you’re ambitious!
✅ Check Your Work
🏆 Congratulations!
You’ve now built a comprehensive, interactive weather app that can:
- Display weather for multiple cities
- Switch between cities with button clicks
- Maintain a clean, professional interface
- Scale to accommodate new cities easily
🔗 Navigation
You’ve completed all the challenges! Your weather app is now a sophisticated, interactive application.
| Level Navigation: 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
Current Level: 10 |