🌐 Module 03 · Intermediate

Your App's Superpower: APIs

What if your app could know things? Like, the real weather, a list of every Pokémon, or today's pictures from space? That's not magic—it's APIs, and you're about to become the magician. Let's go! 🚀

See the Magic First! ✨

Before we explain anything, let's see this superpower in action. Click these buttons to ask the internet for a random pet picture. Your app is about to talk to another computer, maybe thousands of miles away!

🐾 The Random Pet Generator!

Ready for an instant "whoa" moment? These buttons use something called an API to fetch a new pet picture from the internet every single time you click. Go on, try it!

Click a button to see a cute pet!

Whoa! How did that happen? Your computer just asked another computer for a picture, and it got one! That's the power of an API (Application Programming Interface). That's a mouthful, so let's use an easier example.

🍃 Pan's Pro Tip: The Restaurant Waiter!

Think of an API like a restaurant waiter. You (your app) don't go into the kitchen to make your own burger. That would be chaos! Instead, you look at the menu and tell the waiter what you want. The waiter takes your order to the kitchen (the server), and then brings your food (the data) back to your table. The API is the friendly messenger that makes it all work!

📱

You (Your App)
Wants data!

🤖

The Waiter (API)
Takes the order.

🗄️

The Kitchen (Server)
Provides the data.

This is what the 'food' looks like!

When the API waiter brings back your data, it's usually organized in a format called JSON. It looks like code, but it's really simple—it's just labels and values. We've colored them to make it easy to see!

{
  "joke": "Why did the scarecrow win an award?",
  "answer": "Because he was outstanding in his field!"
}

See? It's just a label (the purple part) and the data (the yellow part). Your app just has to grab the piece it needs!

Words are great, but seeing it explained makes the whole idea click. This video is short, fun, and makes it super clear. Give it a watch! 👇

🚀 Deep Dive: The Restaurant Order Simulator

So far, we've only been *asking for* data. But pro builders use different "methods" to talk to the kitchen. Click the buttons below to see what each one does in our restaurant!

Click a button to send a command to the kitchen!

Build-Along: Check the Weather! ☀️

Enough talk, let's build! We're going to use a real, live weather API. Just type a city name below and see what the API sends back.

What city's weather do you want to see? 🌦️

Your weather report will appear here!

🛡️ Safety Check: Why Data is Valuable

We're using free, public APIs with no personal info. But many powerful APIs require a secret 'API Key' to work—it's like a password for your code! You must protect it, because data is valuable. Companies use data to make decisions, and personal data (like names and addresses) must be kept super safe to protect people's privacy.

Never share your secret API keys online. As a builder, you have a responsibility to protect your users' data. A great first step is learning to use "environment variables" or "secrets" to hide your keys, even in your own code.

Your Next Mission: Learn about Replit Secrets ↗

🚀 Advanced Challenge: Become a Data Sender!

You've learned to GET data. Ready to POST it? This challenge lets you send (or POST) your own joke to a special practice server. It won't save it forever, but you'll get to see how apps send new information to the internet!

Server response will appear here...

🚀 Final Boss: Build a Pokédex!

This is it, builder—your final test! Use the search box to find any Pokémon and see its official data card. This is a true test of your new API powers. Go catch 'em all! 🕵️‍♀️

Ready to code? Show the Pokédex JavaScript! 🧑‍💻

Your mission is to fill in the blanks below! The comments will guide you.

async function getPokemonData() {
  const pokemonName = document.getElementById('pokemon-input').value.toLowerCase();
  const outputElement = document.getElementById('pokedex-output');
  if (!pokemonName) { outputElement.innerHTML = "Type a Pokémon name!"; return; }
  outputElement.innerHTML = `Searching for ${pokemonName}... 🕵️`;

try {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
    if (!response.ok) { throw new Error(`Pokémon not found!`); }
    const data = await response.json();
    
    // 1. Find the Pokémon's name. Look inside the 'data' object for a key called 'name'.
    const name = data.name;
    
    // 2. Find the image URL. Look in 'data', then 'sprites', then find 'front_default'.
    const imageUrl = data.sprites.front_default;
    
    // 3. Find the first type! Look in 'data.types' array, get the first item, then its 'type', then its 'name'.
    const type = data.types[0].type.name;

// The code to build the HTML is done for you!
    const cardHTML = `
      <div class="pokedex-card">
        <h4>${name}</h4>
        <img src="${imageUrl}" alt="Image of ${name}">
        <p>Type: ${type}</p>
      </div>
    `;
    outputElement.innerHTML = cardHTML;

} catch (error) {
    outputElement.innerHTML = `⚠️ Whoops! ${error.message}`;
  }
}

Click "Search Pokédex" to see Pikachu!

🌟 Your First Real App Mission: Catalog Your Collection!

APIs are amazing for getting data from other places. But what if the data is your *own*? Like a list of your LEGO sets, your rock collection, or your favorite books? You can build an app for that, too!

Tools like Glide are perfect for this. Glide can turn a simple Google Sheet into a beautiful, working app in minutes—no code required. You create the data, and Glide builds the app around it.

Check out Glide (Parental Consent Needed) ↗

Your Next Adventure 🗺️

Try making a "My Collection" app with a parent. Create a Google Sheet with columns like "Item Name," "Description," and "Photo." Then, use Glide to turn it into a shareable app. It's an incredible feeling to see your own ideas come to life!

Your Turn: Go on an API Bounty Hunt! 🗺️

The world is full of free, fun APIs for things you love. Instead of just a list, we've got three specific missions for you. Pick one and see if you can use the Pokédex code as a template to complete the bounty!

🚀 The Space Bounty: Use the NASA APOD API to fetch and display today's space picture and its title.
🎬 The Movie Bounty: Use The Movie Database (TMDB) API to build a search box that shows the poster and description for any movie. (Requires a free key!)
🎮 The Game Bounty: Use the RAWG Video Games API to find the top 3 rated games released this year and display their names. (Requires a free key!)

👨‍👩‍👧 Parent Corner

Your child is learning a fundamental skill of the modern web! You can support them by exploring these projects together. The best co-learning opportunity in this lesson is the "Catalog Your Collection" mission using Glide. Building a useful family app (like a movie watchlist, book log, or chore tracker) from a simple spreadsheet is a fantastic weekend project. It requires no code, teaches data organization, and results in something you can all use on your phones. It shows them they can not only use data from the web, but also create powerful apps from their own ideas.