APIs are how your page talks to the rest of the world. Fetch live data, read JSON, and keep your keys out of public view.
fetch('weather?city=Morgantown'){ "tempF": 72, "sky": "clear" }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.
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 + '°'; });
Go to openweathermap.org/api → sign up free → copy your API key. Paste it into Claude and say "Write me the fetch code for current weather in [city] using this key."
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
}]
}
I'm calling the OpenWeather API and getting this JSON back: [paste the response]. I want to display: city name, temperature in Fahrenheit, weather description, and humidity. Write the JavaScript to extract each value and display it in these HTML elements I already have: [paste your HTML].
API keys are like passwords :: they identify your account and control access. For this section's project, you'll use them directly in your JavaScript (fine for learning). Later we'll cover safer approaches.
If you push code to a public GitHub repo with an API key in it, bots will find it within minutes and use it. For now, keep your projects private on GitHub, or use keys with usage limits. We'll cover proper secret management in Section 8.
Build a weather dashboard page (HTML + CSS + JS). User types a city name, clicks Search, and sees current weather. Use the OpenWeather API with this key: [YOUR KEY] Show: city name, temperature in both °C and °F, weather description, humidity, and wind speed. Add an appropriate emoji for the weather condition. Handle the error case where the city isn't found. Make it look clean and modern. I'm a beginner :: add comments.