What's the difference between an API and a website?

A website returns HTML pages meant for humans to look at. An API returns raw data (usually JSON) meant for programs to use. The same company often has both — a site you visit and an API that apps call to get the same information.

Do all APIs need a key?

No, but many do. An API key is a secret code that identifies your app so the provider can track usage and apply limits. Plenty of public APIs are open and need no key, which makes them perfect for learning.

What Is an API? | Coding

A new word you already use every day

Every time you check the weather in an app, see a Google Map embedded in a website, or log in with your Google account on a different site, an API is doing the work behind the scenes. API stands for Application Programming Interface, and although the name sounds intimidating, the idea is simple: it's an agreed way for two pieces of software to talk to each other.

In this lesson you'll learn what an API really is, how web APIs send and receive data, what that data looks like (JSON), and how to fetch live data in JavaScript. This builds on your JavaScript skills, so it helps to have worked through Introduction to JavaScript first.

A real-world analogy: the restaurant

Imagine a restaurant. You (the customer) don't walk into the kitchen and cook. Instead, you tell the waiter what you want from the menu, the waiter takes your order to the kitchen, and brings back your food. You never see how the kitchen works — you just use the menu and the waiter.

An API is the waiter. It's a defined menu of things you can ask for, and a messenger that carries your request to the system and brings back the result. You don't need to know how the other system works inside; you just follow its menu.

What an API actually is

More precisely, an API is a set of rules and endpoints that one program offers so others can use its features or data. Those rules say: here are the things you can ask for, here's how to ask, and here's what you'll get back.

There are many kinds of APIs, but the kind you'll meet most on the web is a web API — one you contact over the internet by visiting a special URL.

Requests and responses

Web APIs work through a back-and-forth of requests and responses:

The client (your app, your code, your browser) sends a request to a URL — for example "give me the current weather in London."
The server (the API provider) processes it and sends back a response — the weather data.

A request usually includes a method describing what you want to do. The most common:

Method	Meaning
`GET`	read / fetch data
`POST`	send new data to create something
`PUT`	update existing data
`DELETE`	remove something

For learning, you'll mostly use GET to fetch data. The server also returns a status code so you know how it went — 200 means OK, and the famous 404 means "not found."

JSON: the language of APIs

When an API sends data back, it needs a tidy format both sides understand. The standard is JSON — JavaScript Object Notation. It's just text, organised as key–value pairs, and it looks like this:

{
  "city": "London",
  "temperature": 18,
  "unit": "celsius",
  "conditions": "Cloudy",
  "forecast": ["Sunny", "Rainy", "Sunny"]
}

Notice how readable it is. JSON uses:

{ } for objects (collections of key–value pairs),
"keys" in double quotes,
values that are strings, numbers, true/false, null, arrays [ ], or more objects.

It looks almost exactly like a JavaScript object, which is why JavaScript can turn JSON text into usable data in one step.

Calling an API in JavaScript with fetch

JavaScript's built-in fetch() function sends a request to a URL and gives back the response. Because the data arrives over the network and takes time, fetch works with promises and the async/await keywords:

async function getData() {
  const response = await fetch("https://api.example.com/weather");
  const data = await response.json();   // turn JSON text into an object
  console.log(data.city);               // "London"
  console.log(data.temperature);        // 18
}

getData();

Reading it line by line:

await fetch(url) sends the request and waits for the response.
await response.json() reads the response body and converts the JSON text into a real JavaScript object.
Now data is an ordinary object, so data.city and data.temperature just work.

A complete worked example

Let's call a real, free, no-key API and show the result on a page. This example uses the public JSONPlaceholder API, which returns fake sample data for practice. Save it as an .html file and open it in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>API Demo</title>
  <style>
    body { font-family: sans-serif; max-width: 460px; margin: 30px auto; }
    button { padding: 10px 16px; font-size: 16px; cursor: pointer; }
    #result { margin-top: 16px; padding: 16px; background: #eef4ff; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>Fetch a random tip</h1>
  <button id="loadBtn">Load a post</button>
  <div id="result">Click the button to fetch data.</div>

  <script>
    const button = document.getElementById("loadBtn");
    const result = document.getElementById("result");

    async function loadPost() {
      result.textContent = "Loading...";

      // Pick a random post id from 1 to 100
      const id = Math.floor(Math.random() * 100) + 1;
      const url = "https://jsonplaceholder.typicode.com/posts/" + id;

      try {
        const response = await fetch(url);          // send the request
        const data = await response.json();         // parse the JSON response
        result.innerHTML =
          "<strong>" + data.title + "</strong><p>" + data.body + "</p>";
      } catch (error) {
        result.textContent = "Sorry, the request failed.";
      }
    }

    button.addEventListener("click", loadPost);
  </script>
</body>
</html>

What happens when you click the button:

The code builds a URL for a random post and calls fetch(url).
The server responds with JSON containing a title and body.
response.json() turns that text into an object, and we drop the title and body onto the page.
The try/catch means that if the network fails, the user sees a friendly message instead of a broken page.

You just used data your app didn't create — that's the whole point of an API.

Why APIs are everywhere

APIs let you build powerful apps without reinventing the wheel:

Maps — embed Google or OpenStreetMap instead of building a mapping system.
Weather, news, sports scores — pull live data from providers.
Payments — let Stripe or PayPal handle money securely.
Login — "Sign in with Google" uses Google's API.

Your code stays small because it stands on top of services others maintain. Learning to read an API's documentation and call it is one of the most valuable real-world coding skills.

Try it yourself

Show more fields. Change the example to also display the post's id, and a user id by fetching from /users/1 instead.
Fetch a list. Call https://jsonplaceholder.typicode.com/users, which returns an array, and loop over it to list every user's name.
Handle 404s. Check response.ok after fetching; if it's false, show "Not found" instead of trying to read the body.

Challenge: Build a tiny "joke machine." Find a free public joke API (search for one that needs no key), fetch a random joke when a button is clicked, and display the setup and punchline on the page. Add a loading message and a try/catch for errors. To display lists of API data cleanly, combine what you learned here with JavaScript Loops and Arrays.

What Is an API?

Key takeaways