Connect Search to the API

Task

Turn the search form into a real city request.

File / section

src/App.jsx — add searchCity and pass it to SearchPanel

Change

Use city.trim() to reject an empty search, then create URLSearchParams({ q: city.trim(), appid: API_KEY, units: unit }) and call loadWeather(${API_BASE}/weather?${params}). Pass onSearch={searchCity} and keep the existing onCityChange.

Why this change matters

URLSearchParams keeps query-string construction readable and correctly encodes city names.

Test it

Search for a real city. A successful response should remove the welcome state once the rendering lesson is connected; a bad city should show the 404 message.

Checkpoint

The Search button now starts a real OpenWeather current-weather request.

const searchCity = async (e) => {
  e.preventDefault();
  if (!city.trim()) {
    setError("Enter a city name.");
    return;
  }

  const params = new URLSearchParams({
    q: city.trim(),
    appid: API_KEY,
    units: unit
  });

  await loadWeather(`${API_BASE}/weather?${params}`);
};