Stop 04 · JavaScriptProjects · 4/8

Weather App

In short

Your first app that talks to a real API. Type a city, fetch live weather, show it nicely, and handle the moment someone types "Banglore" by mistake.

A city-search weather app consuming a real external API — practice for `fetch`, async/await, loading/error states and rendering API data. The project also teaches real-world API integration patterns, including query parameters, asynchronous state, unreliable networks, rate limits, and user-friendly errors.

The jaadu mascot talks on the phone beside a rainy window, holding an umbrella.

Think of it like this

Calling mausi in Chennai

You call your mausi and ask, "Baarish ho rahi hai?". You ask (the request), wait while she looks outside (loading), and she tells you, or the call drops (error). A weather app makes that same call to a weather server, for any city.

Watch it happen

getWeather("Pune")

Your app

Geocoding API

Forecast API

GET /search?name=Pune

1/6First, turn the city name into coordinates.

The big ideas

What you need to know

fetch with async/await

Two calls: city name to coordinates, then coordinates to weather. Await each, and check res.ok.

Three screen states

Loading, error and success. Each one needs its own message on screen, not just a console log.

API keys aren't secret in the browser

Any key in frontend code is visible to users. Fine for practice, but real apps call the API from a server.

Start with Open-Meteo

It has free geocoding and forecast APIs that need no key, so you can focus on the code.

How it works

Build plan

1
Search form
An input and a button, plus an area for the result.
2
City to coordinates
Call the geocoding API with the city name and take the first match.
3
Fetch the weather
Call the forecast API with that latitude and longitude.
4
Show it
Render temperature and place name, with a simple icon.
5
Handle the bad days
Loading text, "City not found", and network errors.

See it in code

Walk through the code

1async function getWeather(city) {2  const geoUrl = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1`;3  const geo = await fetch(geoUrl).then((r) => r.json());4  if (!geo.results?.length) throw new Error("City not found");5 6  const { latitude, longitude, name } = geo.results[0];7  const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m`;8  const data = await fetch(url).then((r) => r.json());9  return `${name}: ${data.current.temperature_2m}°C`;10}11 12getWeather("Pune")13  .then(console.log)                    // e.g. "Pune: 29.4°C"14  .catch((err) => console.log(err.message));

1/4Look up the city. Optional chaining avoids a crash when results are missing.

encodeURIComponent makes city names with spaces, like "New Delhi", safe to put in a URL. ?. stops the crash when no results come back.

Save yourself the pain

Common mistakes

Oops

Pushing a paid API key to a public GitHub repo.

Do this instead

Bots scan GitHub for keys. Use a key-free API for practice, or keep the key on a server and call that.

Oops

Showing nothing while the request runs.

Do this instead

Show "Loading..." or a spinner, and disable the button so it isn't clicked five times.

Oops

Assuming every search returns a city.

Do this instead

Check the results exist before reading them and show a friendly "City not found".

Your mission

Milestone 1: one city, one number

~45 min

Quick check

Your fetch call gets a 404 response from the server. What does the fetch promise do?

Go deeper

1Handle loading, error and empty states explicitly, not just the happy path. Validate your understanding by applying it in a small practical example.
2Debounce the search input so you don't spam the API on every keystroke. Validate your understanding by applying it in a small practical example.
3Cache recent searches in localStorage to avoid redundant API calls.

More projects at this stop