Weather App

We will build a simple web application that retrieves weather forecasts using the Open-Meteo API. Open-Meteo is a free, open-source weather API that requires no API key for non-commercial use. In this chapter we work with external APIs in JavaScript. We use the Fetch API to make HTTP requests, and we process JSON responses.

Getting Started

Go to the weather-app repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> weather-app
cd weather-app
code .

The template is pre-configured with Vite (just like the projects from previous chapters). Install dependencies and start the dev server:

pnpm install
pnpm dev

You should see the weather app layout with a search bar when you open the dev server in your browser.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Explain the client-server request-response cycle and how HTTP enables communication between them
  • Explore a REST API with a tool like Postman before writing code against it
  • Use the Fetch API to make HTTP requests from JavaScript and process JSON responses
  • Wire up event listeners and asynchronous data fetching to update the DOM with live API data
  • Build a complete web application that retrieves and displays data from an external API

Sections

  1. Reviewing the Starter
  2. How the Web Works
  3. Exploring the API with Postman
  4. Fetching Location Data
  5. Fetching Weather Data
  6. Updating the User Interface
  7. Practice Questions