Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

My project is failing tests 18-22 and I don’t know why. Everything is working the way it should and updating correctly

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>
    <div id="weather-container">
      <img id="weather-icon">
      <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 id ="options-container">
      <select id="cities" name="cities">
        <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 type="button" id="get-weather-btn">Get Weather!</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: lightcyan
}

#weather-container {
  height: 75vh;
}

#options-container {
  height: 10vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#weather-container, #options-container{
  width: 90vw;
  margin: 5vh auto;
  background-color: white;
  border: 3px solid #00aaaa;
  border-radius: 20px;
}

#cities {
  width: 50%;
}

#get-weather-btn {
  background-color: #00aaaa;
  color: white;
  border: none;
  font-style: verdanna;
  border-radius: 20px;
}

#get-weather-btn:hover {
  cursor: pointer;
}

#cities, #get-weather-btn {
  height: 80%;
  font-size: 1.2rem;
}

/* file: script.js */
const container = document.getElementById("weather-container");
const cities = document.getElementById("cities");
const getWeatherBtn = document.getElementById("get-weather-btn");

const getWeather = async (city) => {
  try {
    let weather = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(response => response.json());
    return weather
  } catch (error) {
    alert("Something went wrong, please try again later")
    console.log(error)
  }
}

const showWeather = async (city) => {
  try {  
    const data = await getWeather(city)

      document.getElementById("location").innerText = data.name;
      document.getElementById("weather-icon").src = data.weather[0]?.icon
      document.getElementById("weather-main").innerText = data.weather[0].main || "N/A";
      document.getElementById("main-temperature").innerText = data.main.temp || "N/A";
      document.getElementById("feels-like").innerText = data.main.feels_like || "N/A";
      document.getElementById("humidity").innerText = data.main.humidity || "N/A";
      document.getElementById("wind").innerText = data.wind.speed || "N/A";
      document.getElementById("wind-gust").innerText = data.wind.gust || "N/A";
  } catch (err) {
    alert("Something went wrong, please try again later")
  }
}

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

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App
https://www.freecodecamp.org/learn/full-stack-developer/lab-weather-app/lab-weather-app

2

Please review the User Stories. Those are the instructions.

If you review each user story and ensure it’s implemented you will find the problem.

3

I have checked the User stories and am pretty sure that I have implemented all of them. As I said I believe my app is functioning the way it should but it won’t pass the tests. The tests I am failing are related to user story 11 but I’ve tried several different methods to fufill the user story that visually work on the app but fail the tests

4

Sorry, I spoke too soon. You didn’t make the error that I thought.

I’ve done a bit more testing and I’m stumped for the moment.

actual https://cdn.freecodecamp.org/weather-icons/04d.png 
expect https://cdn.freecodecamp.org/weather-icons/04d.png
14.33 14.33
13.2 13.2
53 53
3.6 3.6
n/a n/a
clouds clouds
new york new york
6

Ok, the problem is here:

let weather = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(response => response.json());

You need to await the fetch :white_check_mark:
but you also need to await the .json() method

Please see this example:
https://www.freecodecamp.org/learn/full-stack-developer/lecture-understanding-asynchronous-programming/what-is-async-await-and-how-does-it-work

    let response = await fetch(`https://api.example.com/users`);
    let userData = await response.json();

The test was checking the DOM elements before they were populated.

For our eyes the delay wasn’t noticeable.

7

That works!! Thanks so much for the help!

8

if they are chained this should happen automatically, see the lesson on promise chaining

https://www.freecodecamp.org/learn/full-stack-developer/lecture-understanding-asynchronous-programming/what-are-promises-and-how-does-promise-chaining-work

but for some reason that change works, which is weird

9

When I ran the tests manually, these seemed to be blank document.querySelector('#weather-icon').src document.querySelector(#${id}).innerText.toLowerCase()

Adding this to the test made the comparisons work:

await document.querySelector('#get-weather-btn').click();

This gave me the idea that it was related to timing.

10

I tested it too and you are right, I just don’t understand the difference, considering they should work the same