Demo Mode

No student ID available

Activity 1 of 12

Activity 1: Introduction to APIs

Practice and reinforce the concepts from Lesson 1

API Explorer Activity

What you'll learn

In this activity, you'll:

Test APIs directly in your browser
Make your first API call with JavaScript
Display API data on a webpage
Explore different types of API responses
Choose from fun, engaging APIs to make learning enjoyable

Total time: 45-60 minutes

💻 Getting Started with the Template

What you'll do: Access the project template Time: 5 minutes

🔗 View Template on GitHub

Access the template here: Dog API Explorer Template

How to Use the Template:

Option A - Download: Click "Code" -> "Download ZIP" on GitHub
Option B - Clone: git clone the repository and navigate to the template folder
Option C - Copy Files: View each file and create local copies

Template Files:

index.html - The webpage structure
script.js - Where you'll write JavaScript
styles.css - Basic styling (already done)
README.md - Instructions and documentation

💡 Tip: Open index.html directly in your browser to start working!

Step One: Test APIs in Browser

What you'll do: Explore APIs using just your browser Time: 10 minutes

Choose 2-3 APIs from these fun options and test them in new browser tabs:

Option A: Animal APIs

Cat Facts: https://catfact.ninja/fact - Random cat facts
Dog Images: https://dog.ceo/api/breeds/image/random - Random dog photos
Pokemon: https://pokeapi.co/api/v2/pokemon/pikachu - Pokemon data

Option B: Fun & Entertainment

Random Jokes: https://official-joke-api.appspot.com/random_joke - Setup and punchline
Activity Ideas: https://www.boredapi.com/api/activity - Things to do when bored
Star Wars: https://swapi.dev/api/people/1 - Star Wars character data

Option C: Numbers & Facts

Number Facts: http://numbersapi.com/42 - Interesting facts about numbers
Cat Facts: https://catfact.ninja/fact - Random cat trivia
Quotes: https://api.quotable.io/random - Inspirational quotes

💡 Tip Notice how each API returns different data structure. Some have single values, others have nested objects! Pick the ones that interest you most.

Step 2: Your First JavaScript API Call

What you'll do: Fetch data using JavaScript Time: 15 minutes

Choose ONE API from Step 1 and implement it. Here are examples for different choices:

Example A: Cat Facts API

javascript

// Function to get a cat fact
async function getCatFact() {
    document.getElementById('result').innerHTML = 'Loading cat fact...';

    try {
        const response = await fetch('https://catfact.ninja/fact');
        const data = await response.json();

        document.getElementById('result').innerHTML = `
            <div class="fact-card">
                <h3>🐱 Cat Fact</h3>
                <p>${data.fact}</p>
                <small>Length: ${data.length} characters</small>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Oops! Could not load cat fact.';
        console.error('Error:', error);
    }
}

Example B: Pokemon API

javascript

// Function to get Pokemon data
async function getPokemon() {
    document.getElementById('result').innerHTML = 'Loading Pokemon...';

    try {
        const response = await fetch('https://pokeapi.co/api/v2/pokemon/pikachu');
        const data = await response.json();

        document.getElementById('result').innerHTML = `
            <div class="pokemon-card">
                <h3>⚡ ${data.name.charAt(0).toUpperCase() + data.name.slice(1)}</h3>
                <img src="${data.sprites.front_default}" alt="${data.name}">
                <p>Height: ${data.height} | Weight: ${data.weight}</p>
                <p>Type: ${data.types[0].type.name}</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Oops! Could not load Pokemon.';
        console.error('Error:', error);
    }
}

Example C: Star Wars API

javascript

// Function to get Star Wars character
async function getStarWarsCharacter() {
    document.getElementById('result').innerHTML = 'Loading character...';

    try {
        const response = await fetch('https://swapi.dev/api/people/1');
        const data = await response.json();

        document.getElementById('result').innerHTML = `
            <div class="character-card">
                <h3>🌟 ${data.name}</h3>
                <p>Height: ${data.height}cm</p>
                <p>Hair Color: ${data.hair_color}</p>
                <p>Birth Year: ${data.birth_year}</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Oops! Could not load character.';
        console.error('Error:', error);
    }
}

Test Your Code

Click the "Get Cat Fact" button
You should see a cat fact appear
Click again for a new fact!

Step 3: Add More APIs

What you'll do: Create functions for different APIs Time: 15 minutes

Add 1-2 more APIs from your browser testing. Mix and match based on your interests:

Quick Examples to Copy:

Random Jokes API:

javascript

async function getJoke() {
    document.getElementById('result').innerHTML = 'Loading joke...';
    try {
        const response = await fetch('https://official-joke-api.appspot.com/random_joke');
        const data = await response.json();
        document.getElementById('result').innerHTML = `
            <div class="joke-card">
                <h3>😄 Random Joke</h3>
                <p class="setup">${data.setup}</p>
                <p class="punchline">...${data.punchline}!</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load joke.';
    }
}

Dog Images API:

javascript

async function getDogImage() {
    document.getElementById('result').innerHTML = 'Loading dog photo...';
    try {
        const response = await fetch('https://dog.ceo/api/breeds/image/random');
        const data = await response.json();
        document.getElementById('result').innerHTML = `
            <div class="dog-card">
                <h3>🐕 Random Dog</h3>
                <img src="${data.message}" alt="Random dog" style="max-width: 300px; border-radius: 10px;">
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load dog image.';
    }
}

Activity Suggestions API:

javascript

async function getActivity() {
    document.getElementById('result').innerHTML = 'Finding something to do...';
    try {
        const response = await fetch('https://www.boredapi.com/api/activity');
        const data = await response.json();
        document.getElementById('result').innerHTML = `
            <div class="activity-card">
                <h3>💡 Activity Suggestion</h3>
                <p>${data.activity}</p>
                <p>Type: ${data.type} | Participants: ${data.participants}</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load activity.';
    }
}

Step 4: Display Raw JSON

What you'll do: Show the actual API response Time: 10 minutes

Create a function to show raw JSON from any of your chosen APIs:

javascript

// Function to show raw JSON data (update the URL to match your choice)
async function showRawData() {
    document.getElementById('result').innerHTML = 'Loading raw data...';

    try {
        // Replace this URL with any API you've been using
        const response = await fetch('https://catfact.ninja/fact');
        const data = await response.json();

        // Display formatted JSON
        document.getElementById('result').innerHTML = `
            <div class="raw-data">
                <h3>📋 Raw JSON Response</h3>
                <pre>${JSON.stringify(data, null, 2)}</pre>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load data.';
    }
}

💡 Tip JSON.stringify(data, null, 2) formats the JSON with 2-space indentation to make it readable! Try different APIs to see how data structures vary.

Step 5: Challenge Tasks

What you'll do: Practice what you learned Time: 10 minutes

Choose 1-2 challenges based on your API preferences:

Challenge One: Dynamic Data

For Pokemon fans:

Modify the Pokemon API to show different Pokemon
Try: https://pokeapi.co/api/v2/pokemon/charmander
Or use a random number: https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random() * 150) + 1}

For number lovers:

API: http://numbersapi.com/42/trivia?json
Change 42 to any number you want!

Challenge 2: Visual APIs

Dog Pictures:

API: https://dog.ceo/api/breeds/image/random
Display using an <img> tag

Pokemon Images:

Already included in Pokemon API as data.sprites.front_default

Challenge 3: Error Handling

Test what happens when APIs fail:

Try a wrong URL like https://catfact.ninja/wrong
Test with https://pokeapi.co/api/v2/pokemon/invalidname
Make sure your error messages show up!

📊 Expected Results

When complete, your API Explorer should:

✅ Have 3-4 working buttons for your chosen APIs
✅ Display different data for each API
✅ Show loading messages while fetching
✅ Handle errors gracefully
✅ Format data in a readable way
✅ Demonstrate different data structures (text, images, nested objects)

🎯 Submission Checklist

Before submitting:

All buttons work correctly
Data displays properly
Error handling works
Code is commented
Tested in browser

Submit your StackBlitz link when complete!

💡 Bonus: Going Further

If you finish early, try these:

API Mixer: Combine data from two APIs (e.g., show a dog image with a cat fact)
Personal Touch: Add your favorite color scheme to match your chosen APIs
Random Explorer: Create a button that randomly picks which API to call
Data Counter: Track how many of each type of API call you've made
Favorites: Let users "heart" their favorite results

🎯 Reflection Questions

Which API did you find most interesting and why?
What differences did you notice between the data structures?
Which API would you want to use in a real project?

Great work exploring APIs! Next lesson, we'll learn about parsing more complex JSON data and working with different response formats. 🚀

Activity 1 of 12

Activity 1: Introduction to APIs

Practice and reinforce the concepts from Lesson 1

API Explorer Activity

What you'll learn

In this activity, you'll:

Test APIs directly in your browser
Make your first API call with JavaScript
Display API data on a webpage
Explore different types of API responses
Choose from fun, engaging APIs to make learning enjoyable

Total time: 45-60 minutes

💻 Getting Started with the Template

What you'll do: Access the project template Time: 5 minutes

🔗 View Template on GitHub

Access the template here: Dog API Explorer Template

How to Use the Template:

Option A - Download: Click "Code" -> "Download ZIP" on GitHub
Option B - Clone: git clone the repository and navigate to the template folder
Option C - Copy Files: View each file and create local copies

Template Files:

index.html - The webpage structure
script.js - Where you'll write JavaScript
styles.css - Basic styling (already done)
README.md - Instructions and documentation

💡 Tip: Open index.html directly in your browser to start working!

Step One: Test APIs in Browser

What you'll do: Explore APIs using just your browser Time: 10 minutes

Choose 2-3 APIs from these fun options and test them in new browser tabs:

Option A: Animal APIs

Cat Facts: https://catfact.ninja/fact - Random cat facts
Dog Images: https://dog.ceo/api/breeds/image/random - Random dog photos
Pokemon: https://pokeapi.co/api/v2/pokemon/pikachu - Pokemon data

Option B: Fun & Entertainment

Random Jokes: https://official-joke-api.appspot.com/random_joke - Setup and punchline
Activity Ideas: https://www.boredapi.com/api/activity - Things to do when bored
Star Wars: https://swapi.dev/api/people/1 - Star Wars character data

Option C: Numbers & Facts

Number Facts: http://numbersapi.com/42 - Interesting facts about numbers
Cat Facts: https://catfact.ninja/fact - Random cat trivia
Quotes: https://api.quotable.io/random - Inspirational quotes

💡 Tip Notice how each API returns different data structure. Some have single values, others have nested objects! Pick the ones that interest you most.

Step 2: Your First JavaScript API Call

What you'll do: Fetch data using JavaScript Time: 15 minutes

Choose ONE API from Step 1 and implement it. Here are examples for different choices:

Example A: Cat Facts API

javascript

// Function to get a cat fact
async function getCatFact() {
    document.getElementById('result').innerHTML = 'Loading cat fact...';

    try {
        const response = await fetch('https://catfact.ninja/fact');
        const data = await response.json();

        document.getElementById('result').innerHTML = `
            <div class="fact-card">
                <h3>🐱 Cat Fact</h3>
                <p>${data.fact}</p>
                <small>Length: ${data.length} characters</small>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Oops! Could not load cat fact.';
        console.error('Error:', error);
    }
}

Example B: Pokemon API

javascript

// Function to get Pokemon data
async function getPokemon() {
    document.getElementById('result').innerHTML = 'Loading Pokemon...';

    try {
        const response = await fetch('https://pokeapi.co/api/v2/pokemon/pikachu');
        const data = await response.json();

        document.getElementById('result').innerHTML = `
            <div class="pokemon-card">
                <h3>⚡ ${data.name.charAt(0).toUpperCase() + data.name.slice(1)}</h3>
                <img src="${data.sprites.front_default}" alt="${data.name}">
                <p>Height: ${data.height} | Weight: ${data.weight}</p>
                <p>Type: ${data.types[0].type.name}</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Oops! Could not load Pokemon.';
        console.error('Error:', error);
    }
}

Example C: Star Wars API

javascript

// Function to get Star Wars character
async function getStarWarsCharacter() {
    document.getElementById('result').innerHTML = 'Loading character...';

    try {
        const response = await fetch('https://swapi.dev/api/people/1');
        const data = await response.json();

        document.getElementById('result').innerHTML = `
            <div class="character-card">
                <h3>🌟 ${data.name}</h3>
                <p>Height: ${data.height}cm</p>
                <p>Hair Color: ${data.hair_color}</p>
                <p>Birth Year: ${data.birth_year}</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Oops! Could not load character.';
        console.error('Error:', error);
    }
}

Test Your Code

Click the "Get Cat Fact" button
You should see a cat fact appear
Click again for a new fact!

Step 3: Add More APIs

What you'll do: Create functions for different APIs Time: 15 minutes

Add 1-2 more APIs from your browser testing. Mix and match based on your interests:

Quick Examples to Copy:

Random Jokes API:

javascript

async function getJoke() {
    document.getElementById('result').innerHTML = 'Loading joke...';
    try {
        const response = await fetch('https://official-joke-api.appspot.com/random_joke');
        const data = await response.json();
        document.getElementById('result').innerHTML = `
            <div class="joke-card">
                <h3>😄 Random Joke</h3>
                <p class="setup">${data.setup}</p>
                <p class="punchline">...${data.punchline}!</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load joke.';
    }
}

Dog Images API:

javascript

async function getDogImage() {
    document.getElementById('result').innerHTML = 'Loading dog photo...';
    try {
        const response = await fetch('https://dog.ceo/api/breeds/image/random');
        const data = await response.json();
        document.getElementById('result').innerHTML = `
            <div class="dog-card">
                <h3>🐕 Random Dog</h3>
                <img src="${data.message}" alt="Random dog" style="max-width: 300px; border-radius: 10px;">
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load dog image.';
    }
}

Activity Suggestions API:

javascript

async function getActivity() {
    document.getElementById('result').innerHTML = 'Finding something to do...';
    try {
        const response = await fetch('https://www.boredapi.com/api/activity');
        const data = await response.json();
        document.getElementById('result').innerHTML = `
            <div class="activity-card">
                <h3>💡 Activity Suggestion</h3>
                <p>${data.activity}</p>
                <p>Type: ${data.type} | Participants: ${data.participants}</p>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load activity.';
    }
}

Step 4: Display Raw JSON

What you'll do: Show the actual API response Time: 10 minutes

Create a function to show raw JSON from any of your chosen APIs:

javascript

// Function to show raw JSON data (update the URL to match your choice)
async function showRawData() {
    document.getElementById('result').innerHTML = 'Loading raw data...';

    try {
        // Replace this URL with any API you've been using
        const response = await fetch('https://catfact.ninja/fact');
        const data = await response.json();

        // Display formatted JSON
        document.getElementById('result').innerHTML = `
            <div class="raw-data">
                <h3>📋 Raw JSON Response</h3>
                <pre>${JSON.stringify(data, null, 2)}</pre>
            </div>
        `;
    } catch (error) {
        document.getElementById('result').innerHTML = 'Could not load data.';
    }
}

💡 Tip JSON.stringify(data, null, 2) formats the JSON with 2-space indentation to make it readable! Try different APIs to see how data structures vary.

Step 5: Challenge Tasks

What you'll do: Practice what you learned Time: 10 minutes

Choose 1-2 challenges based on your API preferences:

Challenge One: Dynamic Data

For Pokemon fans:

Modify the Pokemon API to show different Pokemon
Try: https://pokeapi.co/api/v2/pokemon/charmander
Or use a random number: https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random() * 150) + 1}

For number lovers:

API: http://numbersapi.com/42/trivia?json
Change 42 to any number you want!

Challenge 2: Visual APIs

Dog Pictures:

API: https://dog.ceo/api/breeds/image/random
Display using an <img> tag

Pokemon Images:

Already included in Pokemon API as data.sprites.front_default

Challenge 3: Error Handling

Test what happens when APIs fail:

Try a wrong URL like https://catfact.ninja/wrong
Test with https://pokeapi.co/api/v2/pokemon/invalidname
Make sure your error messages show up!

📊 Expected Results

When complete, your API Explorer should:

✅ Have 3-4 working buttons for your chosen APIs
✅ Display different data for each API
✅ Show loading messages while fetching
✅ Handle errors gracefully
✅ Format data in a readable way
✅ Demonstrate different data structures (text, images, nested objects)

🎯 Submission Checklist

Before submitting:

All buttons work correctly
Data displays properly
Error handling works
Code is commented
Tested in browser

Submit your StackBlitz link when complete!

💡 Bonus: Going Further

If you finish early, try these:

API Mixer: Combine data from two APIs (e.g., show a dog image with a cat fact)
Personal Touch: Add your favorite color scheme to match your chosen APIs
Random Explorer: Create a button that randomly picks which API to call
Data Counter: Track how many of each type of API call you've made
Favorites: Let users "heart" their favorite results

🎯 Reflection Questions

Which API did you find most interesting and why?
What differences did you notice between the data structures?
Which API would you want to use in a real project?

Great work exploring APIs! Next lesson, we'll learn about parsing more complex JSON data and working with different response formats. 🚀