Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

Test 19-22 and 24 are not passing.
Although when I run normally, everything is as expected.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
  </head>

  <body>
    <div>
      <img src="" id="weather-icon" />
      <p>Temperature: <span id="main-temperature">N/A</span> (C)</p>
      <p>Feels like: <span id="feels-like">N/A</span> (C)</p>
      <p>Humidity: <span id="humidity">N/A</span> (%)</p>
      <p>Wind: <span id="wind">N/A<span> (m/s)</p>
      <p>Wind Gust: <span id="wind-gust">N/A</span> (m/s)</p>
      <p>Weather: <span id="weather-main">N/A</span></p>
      <p>Location: <span id="location">N/A</span></p>
    </div>

    <select id="city">
      <option value=""></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>

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

/* file: styles.css */


/* file: script.js */
const getWeatherBtn = document.querySelector('#get-weather-btn');

getWeatherBtn.addEventListener('click', () => {
  showWeather();
});

async function getWeather(city) {
  try {
    const weatherInfo = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(response => response.json());
    return weatherInfo;
  } catch (err) {
    console.error(err);
  }
}

async function showWeather() {
  const city = document.querySelector('#city').value;

  const weatherInfo = await getWeather(city);
  console.log('weatherInfo', weatherInfo);

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

  const weatherIconImg = document.getElementById("weather-icon");
  weatherIconImg.src = weatherInfo.weather?.[0]?.icon ?? "";
  // console.log(weatherIconImg);

  document.getElementById('main-temperature').textContent = weatherInfo.main?.temp ? weatherInfo.main.temp : "N/A";

  document.getElementById("feels-like").textContent = weatherInfo.main?.feels_like ? weatherInfo.main.feels_like : "N/A";

  document.getElementById("humidity").textContent = weatherInfo.main?.humidity ? weatherInfo.main.humidity : "N/A";

  document.getElementById("wind").textContent = weatherInfo.wind?.speed ? weatherInfo.wind.speed : "N/A";

  document.getElementById("wind-gust").textContent = weatherInfo.wind?.gust ? weatherInfo.wind.gust : "N/A";

  document.getElementById("weather-main").textContent = weatherInfo.weather?.[0]?.main ?? "N/A";

  document.getElementById("location").textContent = weatherInfo.name ?? "N/A";
}

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

Challenge Information:

Build a Weather App - Build a Weather App

2

What are those tests?

Which specific lines of your code do you think meet each of those tests?

3

The showWeather function meets the criteria with document.getElementById statements.

And for the Test 24, there is a error check in the function.

The tests which are failing are as follows:

  • Failed:19. When Chicago is selected the showWeather function should display the data from the API in the respective HTML elements. If the value from the API is undefined, you should show N/A.

  • Failed:20. When London is selected the showWeather function should display the data from the API in the respective HTML elements. If the value from the API is undefined, you should show N/A.

  • Failed:21. When Tokyo is selected the showWeather function should display the data from the API in the respective HTML elements. If the value from the API is undefined, you should show N/A.

  • Failed:22. When Los Angeles is selected the showWeather function should display the data from the API in the respective HTML elements. If the value from the API is undefined, you should show N/A.

  • Failed:24. When Paris is selected the app should show an alert with Something went wrong, please try again later.

4

Which specific lines of your code do you think meet each of those tests?

5

For tests 19-22, the following lines meet the criteria because test 18: When New York is selected the showWeather function should display the data from the API in the respective HTML elements. If the value from the API is undefined, you should show N/A.

is passing.

const weatherIconImg = document.getElementById("weather-icon");
  weatherIconImg.src = weatherInfo.weather?.[0]?.icon ?? "";
  weatherIconImg.alt = weatherInfo.weather?.[0]?.description ?? "";
  // console.log(weatherIconImg);

  document.getElementById('main-temperature').textContent = weatherInfo.main?.temp ? weatherInfo.main.temp : "N/A";

  document.getElementById("feels-like").textContent = weatherInfo.main?.feels_like ? weatherInfo.main.feels_like : "N/A";

  document.getElementById("humidity").textContent = weatherInfo.main?.humidity ? weatherInfo.main.humidity : "N/A";

  document.getElementById("wind").textContent = weatherInfo.wind?.speed ? weatherInfo.wind.speed : "N/A";

  document.getElementById("wind-gust").textContent = weatherInfo.wind?.gust ? weatherInfo.wind.gust : "N/A";

  document.getElementById("weather-main").textContent = weatherInfo.weather?.[0]?.main ?? "N/A";

  document.getElementById("location").textContent = weatherInfo.name ?? "N/A";
6

You have separated the units into a separate element but I suspect the test don’t want that. It leads to silly little issues like ‘N/A (m/s)’ being displayed.

7

But the corresponding elements with the required IDs have the actual values without the units. And test 18 is passing as mentioned above.

Even if I have the following html, it still giving the same 19-22 tests failing.

    <div>
      <img src="" id="weather-icon" />
      <p>Temperature: <span id="main-temperature"></span> (C)</p>
      <p>Feels like: <span id="feels-like"></span> (C)</p>
      <p>Humidity: <span id="humidity"></span> (%)</p>
      <p>Wind: <span id="wind"></span> (m/s)</p>
      <p>Wind Gust: <span id="wind-gust"></span> (m/s)</p>
      <p>Weather: <span id="weather-main"></span></p>
      <p>Location: <span id="location"></span></p>
    </div>
8

no, the tests, use an include to check, it’s quite liberal in that

I have seen an issue already with this specific challenge where things seem to happen too slowly and the tests check for things before they happen

9

try to put this into two lines, instead of using then, it’s ridicoulous but an other time seemed to work

1 Like