Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

I’m failing tasks 18, 19, 21, 22.

  1. 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.
    ( the others just change ‘New York’ to another city.)

My output seams identical to the example given, and when debugging, I can’t find any problems. I removed any flourishing to make my code as simple as possible and still can’t figure it out.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <header></header>

    <main>
        <div id="selection-container">
            <button id="get-weather">Get Forecast</button>
            <label for="select-city">Select City:</label>
            <select name="select-city" id="select-btn">
                <option value="" selected></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>

        <div id="weather-container">
            <img id="weather-icon" src="" aria-disabled="true">
            <div id="main-temperature"></div>
            <div id="feels-like"></div>
            <div id="humidity"></div>
            <div id="wind"></div>
            <div id="wind-gust"></div>
            <div id="weather-main"></div>
            <div id="location"></div>
        </div>
    </main>

    <footer></footer>
  </body>

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

/* file: script.js */
const weatherIcon = document.getElementById("weather-icon")
const mainTemperature = document.getElementById("main-temperature")
const feelsLike = document.getElementById("feels-like")
const humidity = document.getElementById("humidity")
const windSpeed = document.getElementById("wind")
const windGust = document.getElementById("wind-gust")
const weatherMain = document.getElementById("weather-main")
const selectedLocation = document.getElementById("location")

const getWeatherBtn = document.getElementById("get-weather")
const selectBtn = document.getElementById("select-btn")

let city = ''
selectBtn.addEventListener("change", () => {city = selectBtn.value})

async function getWeather(city) {
    const url = 'https://weather-proxy.freecodecamp.rocks/api/city/' + city
    try {
        const res = await fetch(url)
        const data = await res.json()
        return data
    } catch (err) {console.log(err)}
}

getWeatherBtn.addEventListener("click", (e) => {
    e.preventDefault()
    showWeather(city)
})

async function showWeather(city) {
    try {
        const data = await getWeather(city)
        if (!data) {alert('Something went wrong, please try again later')}
        const {wind, weather, main, name} = data
        weatherIcon.src = weather[0].icon || ''
        mainTemperature.innerText = main.temp || 'N/A'
        feelsLike.innerText = main.feels_like || 'N/A'
        humidity.innerText = main.humidity || 'N/A'
        windSpeed.innerText = wind.speed || 'N/A'
        windGust.innerText = wind.gust || 'N/A';
        weatherMain.innerText = weather[0].main || 'N/A'
        selectedLocation.innerText = name || city
    } catch (err) {console.log(err)}
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

Build a Weather App - Build a Weather App

2

What happens when you select Paris? (check the example app as well)

3

Paris works fine. Alert and everything.

The problems are with New York (task 18), Chicago (task 19), Tokyio (task 21) and Los Angeles (task 22).

5

this one is the issue, the tests do not trigger a change event. Consider taking the value of the select element when the button is clicked and not use a global variable

6

Yep. You were right. Thanks.