Welcome to your first API integration project! This template helps you learn the fundamentals of working with APIs using the fun and free Dog CEO API.
By completing this activity, you will:
Make your first API calls with JavaScript fetch()
Understand how APIs return JSON data
Display dynamic content from API responses
Handle loading states and errors gracefully
Work with different API endpoints
IMPORTANT: This template now includes WORKING CODE! You can see it in action immediately:
Navigate to this folder in your terminal/command promptStart a local server (choose one):
bash
python3 -m http.server 8000
python -m http.server 8000
npx http-server -p 8000
Open your browser to: http://localhost:8000 Click the buttons - they work immediately!
"Get Random Dog" shows a dog image
"List All Breeds" displays all breeds
"Search Breed" lets you search (try "labrador")
65% of the code is implemented for you:
✅ Random dog image fetching (fully working)
✅ Breed list display (fully working)
✅ Breed search (working with extension TODOs)
⚠️ Random breed selection (TODO for you)
⚠️ Raw JSON display (TODO for you)
⚠️ Bonus features (TODO for creativity)
First, test the working features to understand the patternThen complete the TODO sections following the examplesFinally, add your own creative extensions
Complete the getRandomDog() function to fetch and display a random dog image.
API Endpoint: https://dog.ceo/api/breeds/image/random
Success Criteria:
Button shows loading state when clicked
Random dog image displays with breed name
Error handling works when API is down
Complete the getAllBreeds() function to show all available dog breeds.
API Endpoint: https://dog.ceo/api/breeds/list/all
Success Criteria:
All breed names display in a grid format
Breed count shows in the header
Fallback data works when API is unavailable
Complete the getRandomBreed() function to show a random breed with its image.
Requirements:
First fetch all breeds, then pick one randomly
Get an image for that specific breed
Display both breed name and image
Complete the searchBreed() function to search for specific breeds.
API Endpoint: https://dog.ceo/api/breed/{breed-name}/images/random
Features to implement:
Input validation
Error handling for invalid breeds
Clear input after successful search
Helpful error messages with breed suggestions
Complete the showRawJson() function to show raw API responses.
Purpose:
Help students understand what APIs actually return
Practice with JSON.stringify()
See the full data structure
Base URL: https://dog.ceo/apiNo API key required! 🎉CORS enabled for browser requestsRate limit: Very generous for learning
javascript
GET https :
GET https :
GET https :
GET https :
All endpoints return JSON in this format:
json
{
"message" : "data_here" ,
"status" : "success"
}
Responsive design that works on all devicesLoading animations with cute spinnersError handling with helpful messagesGradient backgrounds and modern styling
Offline support with sample dataError recovery when APIs are downUser-friendly messages for all scenarios
Clear TODO sections for student completionHelper functions already implementedDetailed comments explaining each stepConsole logging for debugging
Open Developer Tools (F12 in most browsers)Check Console tab for error messagesUse Network tab to see API requests/responsesAdd console.log() statements to see data flow
Issue: "fetch is not a function"
Solution: Make sure you're testing in a browser, not Node.js
Issue: CORS errors
Solution: Use a local server (Python http.server) instead of opening HTML file directly
Issue: Images not loading
Solution: Check that the image URLs are valid in the API response
Issue: "Cannot read property of undefined"
Solution: Check that the API response has the expected structure
Ready for more? Try these bonus features:
Favorite breeds: Save user's favorite breeds to localStorageImage counter: Track how many dogs the user has viewedBreed facts: Add interesting facts about each breed
Multiple images: Show a gallery of images for each breedImage download: Add download buttons for dog imagesBreed comparison: Compare stats between different breedsSocial sharing: Add buttons to share cute dog images
Dog name generator: Create random names for the dogsBreed quiz: Test users on identifying dog breedsVirtual pet: Create a simple virtual dog that users can "adopt"
Async/Await: Learn how to handle asynchronous operationsJSON Parsing: Understand how to work with API dataError Handling: Best practices for try/catch blocksDOM Manipulation: How to update HTML with JavaScript
Your project is complete when:
✅ All 5 TODO functions are implemented
✅ Buttons respond with appropriate data
✅ Loading states work correctly
✅ Error handling is graceful and informative
✅ Code is clean with proper comments
✅ Project works on both desktop and mobile
Once you complete this project, you'll have:
Made your first successful API calls
Learned the fundamentals of fetch() and JSON
Created a responsive web application
Gained confidence working with external APIs
This foundation will serve you well in the next activities where we'll explore more complex APIs, authentication, and data manipulation!
Need Help?
Check the browser console for error messages
Review the TODO comments in script.js
Try the working helper functions to understand the expected output
Test one function at a time rather than all at once
Happy coding! 🐕✨