Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

Hello, I am having trouble getting tests 18-23 to pass. I believe 18-22 are related to user story 11: “If the data from getWeather are usable, the showWeather function should display the weather data in the corresponding elements. If a certain value from the API is undefined, you should write N/A in the corresponding element.” Test 23 is “If there is an error, your getWeather function should log the error to the console.”

As far as I can tell, these tests pass in the site preview.

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>

    

    <button id="get-weather-btn">Get Weather</button>
    <select id="city-select">
      <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>
    <div id="weather"></div>

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


/* file: styles.css */


/* file: script.js */
const getWeatherBtn = document.getElementById("get-weather-btn");
getWeatherBtn.addEventListener("click", () => { 
  showWeather(select.value)
}); 
const weather = document.getElementById("weather");
const select = document.querySelector("select")

async function showWeather(city){ 
  if(city == ""){ 
    weather.innerHTML = "";
    return 
  } 
  let weatherObj = await getWeather(city);
  if(weatherObj === 1){
    return
  }

  let temp = weatherObj.main.temp != undefined ? weatherObj.main.temp : "N/A";
  let feel = weatherObj.main.feels_like != undefined ? weatherObj.main.feels_like : "N/A";
  let humidity = weatherObj.main.humidity != undefined ? weatherObj.main.humidity : "N/A";
  let wind = weatherObj.wind.speed != undefined ? weatherObj.wind.speed : "N/A";
  let windGust = weatherObj.wind.gust != undefined ? weatherObj.wind.gust : "N/A";
  let weatherMain = weatherObj.weather[0].main != undefined ? weatherObj.weather[0].main : "N/A";
  let weatherLocation = weatherObj.name != undefined ? weatherObj.name : "N/A";
  let imgSrc = weatherObj.weather[0].icon != undefined ? weatherObj.weather[0].icon : "https://purepng.com/public/uploads/large/purepng.com-weather-iconsymbolsiconsapple-iosiosios-8-iconsios-8-721522596142qx4ep.png"

  let html = `
  <img id="weather-icon" src="${imgSrc}">
  <p id="main-temperature">${temp}</p>
  <p id="feels-like">${feel}</p>
  <p id="humidity">${humidity}</p>
  <p id="wind">${wind}</p> 
  <p id="wind-gust">${windGust}</p>
  <p id="weather-main">${weatherMain}</p>
  <p id="location">${weatherLocation}</p>
  `
  weather.innerHTML = html;
} 

async function getWeather(city){ 
  return fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
  .then((response) =>{
    if (!response.ok) 
      throw new Error(`Weather information for city '${city}' not found.`);
    let data = response.json();
    return data; 
  })
  .catch((error) =>{
    console.log(error)
    alert("Something went wrong, please try again later")
    return 1 
  })
}

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

2

it may be that your function is taking too long

we have seen improvement in that by not using then here:

instead of chaining, try to do the operations consecutively

3

That fixed it, thank you.

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.