Connect the Search Form

Task

Make the Search button call fetchWeather() using the text entered by the learner.

Open

Add the submit listener below fetchWeather().

Implementation

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const city = input.value.trim();
  if (!city) return showError("Enter a city name.");

  await fetchWeather(city);
});

preventDefault() keeps the browser from submitting the form as a normal page navigation. trim() removes surrounding whitespace. Validation happens before the network call, so an empty input does not produce an unnecessary request.

Test

Enter New York and click Search. The loader should appear while the request is running, then disappear. Try a nonsense city and confirm the error area is used.

Expected result

The Search button now controls the API request.

Checkpoint

Before moving on, confirm the expected result in the running app and make sure the browser console has no blocking errors.