Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

My code keeps failing at 18-22. i cleaned up the code and even removed the labels but they still fail. I have also tried adding the elements directly and not insert them through js but it still failed

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>

  <body class="theme-default">
    
    <div class="weather-updates"></div>
    <div class="selection">
      <p>Get weather updates for:</p>
      <select id="cities">
        <option value="">Select City</option>
        <option value="new york">New York</option>
        <option value="los angeles">Los Angeles</option>
        <option value="chicago">Chicago</option>
        <option value="paris">Paris</option>
        <option value="tokyo">Tokyo</option>
        <option value="london">London</option>
      </select>
      <button id="get-weather-btn">Get Weather</button>
    </div>


    <script src="script.js"></script>
  </body>
</html>


/* file: styles.css */


/* file: script.js */
const cities = document.querySelector("#cities");
const weatherUpdates = document.querySelector(".weather-updates");
const weatherBtn = document.getElementById("get-weather-btn");

weatherBtn.addEventListener("click", () => {
  if (cities.value) {
    showWeather(cities.value);
  }
});

async function getWeather(city) {
  try {
    const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    const data = await res.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}
async function showWeather(city) {
  const weather = await getWeather(city);

  if (!weather || weather.error) {
    alert("Something went wrong, please try again later");
    return;
  }

  const main = weather.weather?.[0]?.main;
  const icon = weather.weather?.[0]?.icon;

  changeTheme(main);

  weatherUpdates.innerHTML = `
    <div>
      <h1>${weather.name || "N/A"}</h1>
      <img id="weather-icon" src="${icon || "N/A"}">
      <p>Temp: <span id="main-temperature">${weather.main?.temp ?? "N/A"}</span></p>
      <p>Feels like: <span id="feels-like">${weather.main?.feels_like ?? "N/A"}</span></p>
      <p>Humidity: <span id="humidity">${weather.main?.humidity ?? "N/A"}</span></p>
      <p>Wind: <span id="wind">${weather.wind?.speed ?? "N/A"}</span></p>
      <p>Gust: <span id="wind-gust">${weather.wind?.gust ?? "N/A"}</span></p>
      <p>Weather: <span id="weather-main">${main ?? "N/A"}</span></p>
      <p>Location: <span id="location">${weather.sys?.country ?? "N/A"}</span></p>
    </div>
  `;
}

function changeTheme(themeDesc) {
  document.body.className = "";

  if (themeDesc === "Clear") {
    document.body.classList.add("theme-sunny");
  } else if (themeDesc === "Clouds") {
    document.body.classList.add("theme-cloudy");
  } else if (themeDesc === "Rain") {
    document.body.classList.add("theme-rainy");
  } else {
    document.body.classList.add("theme-default");
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Challenge Information:

Build a Weather App - Build a Weather App

2

If you check browser’s console (not console on the page), there will be some details regarding failing tests.