Build a weather interface with asynchronous data

Your mission

Build the sample weather interface locally, then replace the memory loader with a local JSON request.

1. Create the labeled form and copy the script. Test blank input, Manila, Tokyo, surrounding spaces, and an unknown city.
2. Add the supplied weather.json file and replace loadSample with the fetch version. Run through a local HTTP server.
3. Rename the JSON file to force failure. Check the error message and re-enabled button, then restore the file and retry successfully.

Build in your own files. The interactive examples below are references to explore. This project has no in-page code editor or automatic solution checks; use the starter download and self-review checklist.

Before you begin: Request and check JSON with fetch.

Plan your interface states

This final project combines the path's ideas into a weather interface. Begin with two clearly labeled sample cities so you can understand the behavior without a paid service, API key, or changing forecast. The sample is a learning dataset, not current weather. The asynchronous loader imitates a short wait and can later be replaced by a real data source.

Write the states before the implementation. Empty input asks for a city. A valid submission shows loading and disables the submit button. A known city produces a formatted result, while an unknown city gives a useful suggestion. Unexpected failures offer another attempt. Finally restores the control in every outcome, including an early return for missing data.

Keep these tools in mind

Try the expected behavior

const samples = {
  manila: { city: "Manila", temperature: 29, description: "Cloudy" },
  tokyo: { city: "Tokyo", temperature: 21, description: "Sunny" },
};

// Offline teaching service: no network request or API key.
function loadSample(city) {
  return new Promise((resolve) => {
    setTimeout(
      () => resolve(Object.hasOwn(samples, city) ? samples[city] : null),
      300,
    );
  });
}

const form = document.querySelector("#weather-form");
const input = document.querySelector("#city");
const button = form.querySelector("button");
const output = document.querySelector("#weather");

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const city = input.value.trim().toLowerCase();
  if (city === "") {
    output.textContent = "Please enter a city.";
    return;
  }
  button.disabled = true;
  output.textContent = "Loading sample weather…";
  try {
    const data = await loadSample(city);
    if (data === null) {
      output.textContent = "No sample for that city. Try Manila or Tokyo.";
      return;
    }
    if (
      typeof data.city !== "string" ||
      typeof data.temperature !== "number" ||
      typeof data.description !== "string"
    ) {
      throw new Error("Unexpected weather data");
    }
    output.textContent = `${data.city}: ${data.temperature} °C, ${data.description} (sample)`;
  } catch {
    output.textContent = "Could not load weather. Please try again.";
  } finally {
    button.disabled = false;
  }
});

Start with a labeled form

<p><strong>Sample weather data — not a live forecast.</strong></p>
<form id="weather-form">
  <label for="city">City (Manila or Tokyo)</label>
  <input id="city" name="city">
  <button type="submit">Show sample weather</button>
</form>
<p id="weather" role="status">Choose a sample city.</p>

Build it in two stages

To practice actual fetch without credentials, create weather.json with the supplied sample records and serve it from your local HTTP project. Replace only loadSample with the fetch loader below; keep the form and UI states. This separates data access from presentation, making it easier to test both with predictable data before connecting a real service.

For a live forecast, choose a provider, follow its documentation and usage terms, and map its response into your own city, temperature, and description fields. Secret credentials belong on a server, not in downloadable browser code. Decide how to display units and observation time. Keep the sample label until the interface truly uses current data.

A local weather.json dataset

{
  "manila": {
    "city": "Manila",
    "temperature": 29,
    "description": "Cloudy"
  },
  "tokyo": {
    "city": "Tokyo",
    "temperature": 21,
    "description": "Sunny"
  }
}

Replace the loader to make a real local request

Replace the entire loadSample function, leaving the form handler in place. The samples constant is no longer needed. This loads fixed sample data over HTTP; it still does not provide live weather. A null value means no matching record, while request or parsing errors are handled by the form's catch.

async function loadSample(city) {
  const response = await fetch("./weather.json");
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const records = await response.json();
  if (!records || typeof records !== "object" || Array.isArray(records)) {
    throw new Error("Expected weather records");
  }
  return Object.hasOwn(records, city) ? records[city] : null;
}

Array.isArray rejects an array where we expect a record object. Object.hasOwn checks that the city is an actual stored key rather than an inherited property. These checks make the lookup boundary explicit before the form validates the chosen record's fields.

Run your own files

Extract the starter ZIP and open its folder in your code editor. index.html already loads styles.css and script.js with defer. Implement your handler in script.js. The supplied loadSample function requests weather.json; use a local HTTP server as explained in the fetch lesson. Keep the sample-data label: these records are not a live forecast.

Review local HTTP server setup →

Check the failure paths too

A successful request for an unknown city is different from a network failure. Do not label every failure City not found. Also keep stale requests from overwriting newer ones if you later allow overlapping submissions; this beginner version prevents overlap by disabling submission while loading.

Need a hint?

Open one hint, try a change, and test it before opening the next. The explained example follows separately.