Connecting to APIs

🔌 What an API Is

API stands for Application Programming Interface. Forget the acronym. Here's the mental model: an API is a waiter at a restaurant. You (your code) tell the waiter (the API) what you want. The waiter goes to the kitchen (another service's server), gets what you asked for, and brings it back.

📡 Fetching Data with JavaScript

JavaScript has a built-in command called fetch() that talks to APIs. You give it a URL, it returns data. The data comes back in a format called JSON.

// fetch() goes and gets data from a URL
fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_KEY')
  .then(response => response.json())   // convert to JSON
  .then(data => {
    // data is now a JavaScript object you can use
    console.log(data.main.temp);       // temperature
    document.getElementById('temp').textContent = data.main.temp + '°';
  });

🗂 Reading JSON Data

JSON (JavaScript Object Notation) is how APIs send data back to you. It looks like a labeled list. Once you can read it, you can pull out any piece of data you want.

{
  "name": "London",
  "main": {
    "temp": 18.5,           // ← data.main.temp
    "humidity": 72          // ← data.main.humidity
  },
  "weather": [{
    "description": "light rain"  // ← data.weather[0].description
  }]
}

🔑 API Keys & Keeping Them Safe

API keys are like passwords — they identify your account and control access. For this week's project, you'll use them directly in your JavaScript (fine for learning). Later we'll cover safer approaches.

Live Weather Dashboard