Complete solution (100% reference)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
The ultimate API integration challenge! This comprehensive project teaches you how to work with multiple APIs simultaneously, handle authentication, and create a unified dashboard experience.
By completing this activity, you will:
Before coding, you need to obtain free API keys from these services:
python3 -m http.server 8000
Functions to implement:
testSuperheroAPI() - Validate API keysearchSuperhero() - Search by hero namegetRandomSuperhero() - Generate random hero (ID 1-731)API Patterns:
// Search endpoint
`https://superheroapi.com/api/${apiKey}/search/${heroName}`
// Direct access by ID
`https://superheroapi.com/api/${apiKey}/${heroId}`
// Response structure
{
"response": "success",
"results": [{
"id": "70",
"name": "Batman",
"powerstats": { "intelligence": "81", ... },
"biography": { "full-name": "Terry McGinnis", ... },
"image": { "url": "image_url" }
}]
}
Functions to implement:
testNASAAPI() - Validate API keygetNASAImage() - Get image for specific dategetTodaysNASAImage() - Get today's space imagegetMarsPhotos() - Get Mars rover photosAPI Patterns:
// Astronomy Picture of the Day
`https://api.nasa.gov/planetary/apod?api_key=${key}&date=${date}`
// Mars Rover Photos
`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=${key}`
Functions to implement:
testGiphyAPI() - Validate API keysearchGIFs() - Search for GIFs by termgetTrendingGIFs() - Get trending GIFsgetRandomGIF() - Get random GIFAPI Patterns:
// Search GIFs
`https://api.giphy.com/v1/gifs/search?api_key=${key}&q=${query}&limit=12&rating=g`
// Trending GIFs
`https://api.giphy.com/v1/gifs/trending?api_key=${key}&limit=12&rating=g`
// Random GIF
`https://api.giphy.com/v1/gifs/random?api_key=${key}&rating=g`
Functions to implement:
testTMDBAPI() - Validate API keysearchMovies() - Search movies by titlegetPopularMovies() - Get popular moviesgetNowPlaying() - Get currently playing moviesAPI Patterns:
// Search movies
`https://api.themoviedb.org/3/search/movie?api_key=${key}&query=${query}`
// Popular movies
`https://api.themoviedb.org/3/movie/popular?api_key=${key}&page=1`
// Image URLs (prepend to poster_path)
`https://image.tmdb.org/t/p/w300${movie.poster_path}`
Functions to implement:
createRandomDashboard() - Combine random data from all APIscreateThemedDashboard() - Create themed content across APIsKey Concepts:
// Parallel API calls
const [hero, space, gifs, movies] = await Promise.all([
fetchSuperhero(),
fetchNASAImage(),
fetchGIFs(),
fetchMovies()
]);
// Error handling with mixed results
const results = await Promise.allSettled([...apiCalls]);
const successes = results.filter(r => r.status === 'fulfilled');
Display functions are provided:
displaySuperhero(hero) - Format superhero datadisplayNASAImage(data) - Format NASA image datadisplayGIFs(gifs) - Format GIF griddisplayMovies(movies) - Format movie grid// Save to localStorage
localStorage.setItem('multiapi-keys', JSON.stringify(apiKeys));
// Load from localStorage
const saved = localStorage.getItem('multiapi-keys');
if (saved) {
apiKeys = { ...apiKeys, ...JSON.parse(saved) };
}
// Individual API error handling
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('API call failed:', error);
showError(`${apiName} API error: ${error.message}`);
throw error;
}
// Multi-API error handling
const results = await Promise.allSettled(apiCalls);
const errors = results.filter(r => r.status === 'rejected');
if (errors.length > 0) {
console.warn(`${errors.length} API calls failed`);
}
// Most APIs support CORS for browser requests
// If you encounter CORS issues:
// 1. Check API documentation for CORS support
// 2. Use a local development server (not file://)
// 3. Some APIs require specific headers
Test each API separately:
Test combined functionality:
Test error scenarios:
Upon completion, you'll have mastered:
This project represents the culmination of your API integration journey, combining all the skills from previous activities into a comprehensive, professional-grade application!
Need Help?
console.log() extensively to debug data flowRemember: This is the most challenging template in the series, but also the most rewarding! Take your time and build incrementally. 🎯🚀