⛅

Weather App

Web DevIntermediate

JavaScriptREST API

💡 Overview

This project is your first real taste of working with an external API — a skill you'll use constantly in real jobs. You'll learn to fetch data, handle it asynchronously, and gracefully deal with errors.

✅ Features to Build

0/4 done

🧭 Step-by-Step Guide

Build a search input and a 'Get Weather' button.

On click, use fetch() to call the API with the city name and your key, and show a loading message.

Parse the JSON response and display temperature, description, and a matching icon/emoji.

Wrap the fetch in a try/catch (or .catch()) to show a friendly error if the city isn't found.

🚀 Starter Code

async function getWeather(city) {
  try {
    const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_KEY&units=metric`);
    if (!res.ok) throw new Error('City not found');
    const data = await res.json();
    console.log(data.main.temp, data.weather[0].description);
  } catch (err) {
    console.error(err.message);
  }
}

💡 Pro Tip

Never hardcode your API key directly in a public GitHub repo — for a learning project it's usually fine, but get in the habit of treating API keys as secrets early.

← Back to all Projects