Build a Weather App - tests 18-22

JavaScript
1

Tell us what’s happening:

I can’t get 18, 19, 20, 21, 22 tests to pass, although functionality appears to be correct. Any advice?

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
  </head>
  <body>
    <div class="btn-container">
      <select name="location" id="location-selector" class="location-selector">
        <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">Forecast</button>
    </div>
    <img id="weather-icon" style="background-color: lightblue;"">
    <div">
      <p>Temp: <b id="main-temperature">0F</b></p>   
      <p>Feels like: <b id="feels-like">0F</b></p>   
      <p>Humidity: <b id="humidity">0%</b></p>   
      <p>Wind: <b id="wind">0F</b></p>   
      <p>Wind Gusts: <b id="wind-gust">0F</b></p>   
      <p>Weather: <b id="weather-main">0F</b></p>   
      <p>Location: <b id="location">0F</b></p>   
    </div>

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

/* file: styles.css */


/* file: script.js */
document.getElementById('get-weather-btn').addEventListener('click', function (event) {
  const selection = document.getElementById('location-selector');

  if (selection.value === '') return;
  showWeather(selection.value);
  selection.value = '';

});


const showWeather = async function (city) {
  console.log(`showWeather ${city}`)
  try {
    const data = await getWeather(city);
    if (data)
      processWeather(data);
  } catch (err) {
    handleError(err.message);
  }
}

function processWeather(data) {
  let location = document.getElementById("location");
  location.textContent = data.name ?? 'N/A';
  
  let temp = document.getElementById("main-temperature");
  temp.textContent = data.main.temp ?? 'N/A';

  let feels = document.getElementById("feels-like");
  feels.textContent = data.main.feels_like ?? 'N/A';

  let humidity = document.
getElementById("humidity");
  humidity.textContent = data.main.humidity ?? 'N/A';

  let wind = document.
getElementById("wind");
  wind.textContent = data.wind.speed ?? 'N/A';

  let wind_gust = document.
getElementById("wind-gust");
  wind_gust.textContent = data.wind.gust ?? 'N/A';

  let weather = document.
getElementById("weather-main");
  weather.textContent = data.weather[0].main ?? 'N/A';
}

function handleError(errMsg) {
  let location = document.getElementById("location");
  location.textContent = "N/A";
  
  let temp = document.getElementById("main-temperature");
  temp.textContent = "N/A";

  let feels = document.getElementById("feels-like");
  feels.textContent = "N/A";

  let humidity = document.
getElementById("humidity");
  humidity.textContent = "N/A";

  let wind = document.
getElementById("wind");
  wind.textContent = "N/A";

  let wind_gust = document.
getElementById("wind-gust");
  wind_gust.textContent = "N/A";

  let weather = document.
getElementById("weather-main");
  weather.textContent = "N/A";

  alert("Something went wrong, please try again later");
}


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

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

2

I believe you are only missing the weather icon requirement, everything else looks good to me

1 Like
3

Right you are - all good now. Bad miss on my part.