Project: A School Weather Report

An API-driven report needs loading, success and failure behavior. This deterministic response teaches data extraction without an API key; the practical request section shows how real fetch connects to an endpoint.

Before this topic, review Project: A Homework List if its terms are unfamiliar.

This is JavaScript in a browser. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Create this markup in a separate index.html, then place the JavaScript in a script after these elements. Use this isolated practice page so the selectors refer to its markup.

<p id="weather">Loading</p>

This project will help you build a Weather App using pure JavaScript and an external API. We will use the OpenWeatherMap API to fetch real-time weather data based on the user's city input.

• How to make HTTP requests using fetch()
• How to parse and handle JSON data
• How to build a CLI or console-based tool using JavaScript
• How to use environment variables to store API keys (Node.js only)

Sign up at OpenWeatherMap and get your free API key.

The API URL to get weather for a city looks like this:

https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric

What are the parameters in the API URL?

Answer: q is the city name, appid is your API key, and units=metric ensures temperature is in Celsius.

This version runs directly in the browser console. Replace YOUR_API_KEY with your actual key.

const city = "Delhi";
const apiKey = "YOUR_API_KEY"; // Replace with your real API key

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
  .then(response => {
    if (!response.ok) {
      throw new Error("City not found");
    }
    return response.json();
  })
  .then(data => {
    console.log(`Weather in ${data.name}:`);
    console.log(`Temperature: ${data.main.temp}°C`);
    console.log(`Weather: ${data.weather[0].description}`);
    console.log(`Humidity: ${data.main.humidity}%`);
    console.log(`Wind Speed: ${data.wind.speed} m/s`);
  })
  .catch(error => {
    console.error("Error fetching weather data:", error.message);
  });

Weather in Delhi:
Temperature: 32°C
Weather: clear sky
Humidity: 28%
Wind Speed: 3.6 m/s

• fetch() is used to send a GET request to the weather API.
• We check response.ok to handle invalid cities or errors.
• data.main.temp, data.weather[0].description etc. extract key weather metrics.
• Error handling with .catch() ensures graceful failure.

What happens if the user enters an invalid city name?

Answer: The API returns a 404 status, and our code throws an error with the message "City not found".

This version lets users enter city names via command line:

// weather.js
const readline = require("readline");
const https = require("https");

const apiKey = "YOUR_API_KEY"; // Replace with your key

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question("Enter a city name: ", function(city) {
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  https.get(url, (res) => {
    let data = "";
    
    res.on("data", chunk => data += chunk);
    res.on("end", () => {
      const weather = JSON.parse(data);
      if (weather.cod !== 200) {
        console.error("Error:", weather.message);
      } else {
        console.log(`Weather in ${weather.name}:`);
        console.log(`Temperature: ${weather.main.temp}°C`);
        console.log(`Condition: ${weather.weather[0].description}`);
      }
      rl.close();
    });
  }).on("error", (e) => {
    console.error("Failed to fetch:", e.message);
    rl.close();
  });
});

Enter a city name: Paris
Weather in Paris:
Temperature: 21°C
Condition: few clouds

• Always validate API responses before accessing nested properties.
• Store API keys securely (e.g., in .env for real-world apps).
• Handle network errors and empty inputs gracefully.

This project helped you connect JavaScript to a real-world weather API. You now know how to fetch, parse, and display data dynamically using modern JavaScript techniques.

The fixed response is not live weather. Real services have units, quotas, credentials and response contracts; do not expose private service keys in browser source.

Your task: Replace "temperature":24 with "temperature":28. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Markup used by this section:

<p id="weather">Loading</p>

The validated temperature changes and the success view reflects it.

Markup for this edited program:

<p id="weather">Loading</p>

Markup used by this section:

<p id="weather">Loading</p>

This example makes a real same-origin HTTP request. Provide /__javascript-api/student on your own practice server with JSON such as {"marks":72}. This teaching endpoint is used by the verification server; it is not a public API on the deployed course. A successful response prints 72; HTTP and invalid-data failures enter catch.

For a POST, use fetch(endpoint, {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({marks:72})}). The endpoint must implement that contract. Do not retry writes without understanding duplicate processing.

An API-driven report needs loading, success and failure behavior. This deterministic response teaches data extraction without an API key; the practical request section shows how real fetch connects to an endpoint.

Check your variation against this explanation: The validated temperature changes and the success view reflects it.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.