Master advanced API integration by building a modular widget dashboard! This template teaches you to create reusable, data-driven components with multiple APIs.
By completing this activity, you will:
Build reusable widget components that work with different APIs
Handle multiple API data formats and structures
Create a modular dashboard architecture
Implement widget configuration and customization systems
Master advanced error handling across different API services
Design responsive, user-friendly widget interfaces
IMPORTANT: This template includes 65% WORKING CODE! You can see widgets in action immediately:
Navigate to this folder in your terminal/command promptStart a local server (choose one):
bash
python3 -m http.server 8001
python -m http.server 8001
npx http-server -p 8001
Open your browser to: http://localhost:8001 Click any widget type to see it in action:
Weather Dashboard - Shows real-time weather
Pokemon Explorer - Displays Pokemon data
Space Explorer - NASA APOD already working
Daily Quotes - Inspirational quotes loaded
65% of the code is implemented for you:
✅ Weather Widget - Complete with city search, unit toggle, and refresh (fully working)
✅ Pokemon Widget - Search by name, random Pokemon, shiny toggle (fully working)
✅ Space Widget - APOD display working (Mars/NEO need TODOs)
✅ Quotes Widget - Random quotes with category filter (fully working)
⚠️ Widget Customization - Settings panel (TODO for you)
⚠️ Dashboard System - Multi-widget layout (TODO for you)
⚠️ Export/Import - Save configurations (TODO for creativity)
First, test each widget to understand how they workThen complete the dashboard system for managing multiple widgetsFinally, add customization and export features
Complete the widget customization system to let users configure widget settings.
Requirements:
Create a settings modal/panel for each widget type
Allow users to change widget titles and refresh intervals
Save customizations to localStorage
Apply changes dynamically without page reload
Success Criteria:
Clicking "⚙️ Customize" opens a settings panel
Changes persist after page refresh
Each widget type has appropriate configuration options
Settings apply immediately when saved
Implement the dashboard system to display multiple widgets simultaneously.
Requirements:
Create a grid layout that holds multiple widgets
Add "Add to Dashboard" button for each widget type
Allow users to remove widgets from dashboard
Implement drag-and-drop reordering (optional)
Success Criteria:
Users can add multiple widgets to dashboard
Dashboard layout is responsive (1-3 columns based on screen size)
Each widget updates independently
Remove buttons work correctly
Complete the Mars Rover section of the Space Widget.
API Endpoint: https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos
Requirements:
Fetch photos from a specific sol (Mars day)
Display multiple photos in a gallery format
Add filters for different cameras
Handle cases where no photos exist for that sol
Success Criteria:
Mars Rover tab shows photos
Camera filter works correctly
Loading state displays during fetch
Graceful error handling for invalid sols
Create functionality to save and load dashboard configurations.
Requirements:
Export current dashboard configuration as JSON
Download configuration file to user's computer
Import configuration from uploaded file
Validate imported data before applying
Features to implement:
JSON.stringify() for export
File download using Blob API
File upload input and reading
Data validation and error handling
Add usage tracking to understand how users interact with widgets.
Purpose:
Track which widgets are used most
Monitor API call success rates
Display statistics in a summary panel
Help users understand their widget usage patterns
Each widget follows this base structure:
javascript
class BaseWidget {
constructor (containerId, config ) {
this .container = document .getElementById (containerId);
this .config = config;
this .cache = new Map ();
this .init ();
}
async init (this .render ();
await this .loadData ();
}
render (async loadData (displayData (data ) { }
showError (error ) { }
}
Weather Widget Features:
City search with real-time data
Celsius/Fahrenheit toggle
Displays: temperature, humidity, wind, pressure
Auto-refresh option
Pokemon Widget Features:
Search by name or ID
Random Pokemon button
Shiny form toggle
Stats display (HP, Attack, Defense)
Type badges with colors
Space Widget Features:
Astronomy Picture of the Day (APOD)
Mars Rover photo galleries
Near Earth Objects (NEO) tracking
Date selection for historical data
Quotes Widget Features:
Random inspirational quotes
Category filtering
Author information
Share functionality
Base URL: https://api.openweathermap.org/data/2.5/weather
API Key: Required (free tier available at openweathermap.org)
Example Request:
javascript
const url = `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${apiKey} &units=metric` ;
Response Format:
json
{
"main" : {
"temp" : 15.5 ,
"feels_like" : 14.2 ,
"humidity" : 72 ,
"pressure" : 1013
} ,
"weather" : [ { "description" : "clear sky" , "icon" : "01d" } ] ,
"wind" : { "speed" : 5.2 }
}
Base URL: https://pokeapi.co/api/v2/pokemon
API Key: None required (completely free!)
Example Requests:
javascript
GET https :
GET https :
Response Format:
json
{
"name" : "pikachu" ,
"id" : 25 ,
"sprites" : {
"front_default" : "url_to_image" ,
"front_shiny" : "url_to_shiny_image"
} ,
"stats" : [
{ "stat" : { "name" : "hp" } , "base_stat" : 35 } ,
{ "stat" : { "name" : "attack" } , "base_stat" : 55 }
] ,
"types" : [ { "type" : { "name" : "electric" } } ]
}
Base URL: https://api.nasa.gov/
API Key: ⚠️ IMPORTANT: Replace DEMO_KEY with your own key!
DEMO_KEY Limitations: Only 30 requests/hour (shared by everyone)Free API Key: 1000 requests/hour - Get it at https://api.nasa.gov/ (takes 30 seconds)
🚀 How to Get Your NASA API Key:
Visit https://api.nasa.gov/
Fill out the form (takes 30 seconds)
Check your email for the API key
Replace DEMO_KEY with your new key in the code
APOD Endpoint:
Mars Rover Photos:
Near Earth Objects:
Base URL: https://quotable.io
API Key: None required (free and open!)
Example Requests:
javascript
GET https :
GET https :
GET https :
Response Format:
json
{
"content" : "The only way to do great work is to love what you do." ,
"author" : "Steve Jobs" ,
"tags" : [ "inspirational" , "work" ]
}
Open Developer Tools (F12 in most browsers)Check Console tab for API errors and responsesUse Network tab to inspect API requests/responsesCheck localStorage to verify saved configurationsTest with different screen sizes using device mode
Issue: "API key invalid" for Weather Widget
Solution: Get a free API key from openweathermap.org and add it to your config
Issue: Mars Rover photos not loading
Solution: Try different sol values (1000-2000 are reliable), some sols have no photos
Issue: Dashboard widgets overlapping
Solution: Check that CSS Grid is properly configured with repeat(auto-fit, minmax(350px, 1fr))
Issue: Export file downloads as blank
Solution: Ensure dashboard data exists in localStorage before exporting
Issue: CORS errors in browser console
Solution: Use local development server (python http.server) instead of opening HTML file directly
Ready to level up your widget dashboard? Try these challenges:
Widget Themes: Add dark mode and light mode themes for all widgetsFavorite Widgets: Let users mark widgets as favorites with a star iconWidget Counter: Display how many times each widget has been usedQuick Settings: Add one-click presets for common configurations
News Feed Widget: Integrate NewsAPI for latest headlinesCrypto Prices Widget: Display Bitcoin/Ethereum prices from CoinGecko APIGitHub Stats Widget: Show repository stars and issues from GitHub APIWidget Resize: Allow users to change widget sizes (small, medium, large)
Real-time Updates: Use WebSocket APIs for live data streamingWidget Marketplace: Create a system where users can share custom widgetsCollaborative Dashboard: Let multiple users edit the same dashboard in real-timeAnalytics Dashboard: Track widget usage patterns with charts and graphsWidget Templates: Save and reuse widget configurations as templates
Widget Animations: Add entrance animations when widgets loadSound Effects: Play sounds when widgets complete actionsWidget Recommendations: Suggest widgets based on usage patternsMobile App Version: Convert to React Native or PWA
graphql
activity-05 -widget-builder/
├── index.html
├── styles.css
├── script.js
├── README.md
└── sample-data.json
OpenWeatherMap API Docs - Weather data APIPokéAPI Documentation - Pokemon data APINASA Open Data Portal - Space and astronomy APIs - Quotes API
Class-based Architecture: Learn to build reusable componentsLocalStorage API: Persist data in the browserBlob API: Create and download files dynamicallyCSS Grid Layout: Build responsive multi-column layoutsError Boundaries: Handle API failures gracefully
API Caching Strategies: Reduce redundant requestsDebouncing & Throttling: Optimize user input handlingProgressive Web Apps: Make your dashboard work offlineService Workers: Cache API responses for better performance
Your project is complete when:
✅ All 4 widget types work correctly (Weather, Pokemon, Space, Quotes)
✅ Customization panel saves and applies settings
✅ Dashboard displays multiple widgets simultaneously
✅ Export/Import functionality preserves configurations
✅ Loading states and error handling work across all widgets
✅ Responsive design functions on mobile and desktop
✅ Code is organized and well-commented
✅ At least one extension challenge completed
Once you complete this project, you'll have:
Built a production-ready widget dashboard system
Mastered working with 4 different API structures
Created reusable, configurable components
Implemented advanced features like export/import
Gained experience with complex state management
Developed skills in responsive design and user experience
This project demonstrates professional-level API integration skills and serves as an impressive portfolio piece!
Need Help?
Review the working widget code to understand patterns
Check API documentation for correct endpoint usage
Test one widget at a time before building the dashboard
Use console.log() to debug data flow
Start with the basic TODOs before attempting extensions
Happy widget building! 🚀✨