Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

I can’t pass the 23. test. I’ve tried everything and the behavior of my app is retrieving the data and fullfulling the rest of the tests excepting the #23.

Your code so far

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="main-display">
      <h1>My Weather App</h1>
      <div class="weather-info">
        <div id="img-container">
          <img id="weather-icon" src="" alt="Weather Icon" />
        </div>
        <div id="weather-data">
          <p id="main-temperature"></p>
          <p id="feels-like"></p>
          <p id="humidity"></p>
          <p id="wind"></p>
          <p id="wind-gust"></p>
          <p id="weather-main"></p>
          <p id="location"></p>
    </div>
    <div class="button-container">
      <span>Select the city:</span>
      <select id="city-select">
        <option value=""></option>
        <option value="paris">Paris</option>
        <option value="london">London</option>
        <option value="tokyo">Tokyo</option>
        <option value="los angeles">Los Angeles</option>
        <option value="chicago">Chicago</option>
        <option value="new york">New York</option>
      </select>
    <button id="get-weather-btn">Get Weather</button>
    </div>
      </div> 
      <script src="script.js"> </script> 
  </body>
</html>

/* file: styles.css */


const getWeatherBtn = document.getElementById("get-weather-btn");
const citySelect = document.getElementById("city-select");

const withFallback = (value, suffix = "") =>
  value === undefined || value === null ? "N/A" : `${value}${suffix}`;

const setText = (id, label, value, suffix = "") => {
  const el = document.getElementById(id);
  const safeValue = withFallback(value, suffix);
  el.textContent = label ? `${label}${safeValue}` : safeValue;
};

const displayWeather = (data = {}) => {
  const main = data?.main ?? {};
  const weatherInfo = data?.weather?.[0] ?? {};
  const wind = data?.wind ?? {};

  setText("main-temperature", "", main.temp, "°C");
  setText("feels-like", "Feels like: ", main.feels_like, "°C");
  setText("humidity", "Humidity: ", main.humidity, "%");
  setText("wind", "Wind: ", wind.speed, " m/s");
  setText("wind-gust", "Gust: ", wind.gust, " m/s");
  setText("weather-main", "", weatherInfo.description);
  setText("location", "", data.name);

  const iconEl = document.getElementById("weather-icon");
  if (weatherInfo.icon) {
    iconEl.src = weatherInfo.icon;
    iconEl.alt = weatherInfo.description || "Weather icon";
  } else {
    iconEl.src = "";
    iconEl.alt = "N/A";
  }
};

const getWeather = async (city) => {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    if (!response.ok) throw new Error("Something went wrong, please try again later");
    const data = await response.json();
    return data;
  } catch (error) {
    console.log("Fetch error:", error);
    throw error;
  }
};

const showWeather = async (city) => {
  
  let data;
  try {
    data = await getWeather(city);
  } catch (error) {
    alert("Something went wrong, please try again later.");
    return;
  }

  displayWeather(data);
};

getWeatherBtn.addEventListener("click", () => {
  const city = citySelect.value;
  if (!city) return;
  showWeather(city);
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a Weather App - Build a Weather App

2

What’s the only thing you are doing in showWeather() that isn’t error handling?