Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

18-22 are failing despite the display changing to the proper values, moreover 23 fails despite the errors being logged to the console. I am quite confused about what the point of failure even is .

Your code so far

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

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

      <div id="card">
        <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>


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

/* file: styles.css */


/* file: script.js */
const card = document.getElementById("card");
const wIcon = document.getElementById("weather-icon");
const mTemp = document.getElementById("main-temperature");
const fTemp = document.getElementById("feels-like");
const humidity = document.getElementById("humidity");
const wind = document.getElementById("wind");
const windG = document.getElementById("wind-gust");
const wMain = document.getElementById("weather-main");
const local = document.getElementById("location");

const button = document.getElementById("get-weather-btn");
const selV = document.getElementById("selector");

console.log("adfadf");

async function getWeather(city) {
  return fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
    .then((res) => {
      if (!res.ok) {
        throw new Error("that was bad")
      }
      return res.json()})
    .catch((err) => {
      console.log(err);
      alert("Something went wrong, please try again later")
    });
}

async function showWeather(city) {
  let data2;

  await getWeather(city)
    .then((data) => {
      data2 = data;
    })
    .catch((err) => {
      console.log(`There was an error: ${err}`);
    });

  console.log("23323", data2);

  if (data2) {
    if (data2.weather[0].icon) {
      wIcon.src = data2.weather[0].icon;
    } else {
      wIcon.innerText = "N/A";
    }

    if (data2.main.feels_like) {
      fTemp.innerText = data2.main.feels_like;
    } else {
      fTemp.innerText = "N/A";
    }

    if (data2.main.temp) {
      mTemp.innerText = data2.main.temp;
    } else {
      mTemp.innerText = "N/A";
    }

    if (data2.main.humidity) {
      humidity.innerText = data2.main.humidity;
    } else {
      humidity.innerText = "N/A";
    }

    if (data2.wind.speed) {
      wind.innerText = data2.wind.speed;
    } else {
      wind.innerText = "N/A";
    }

    if (data2.wind.gust) {
      windG.innerText = data2.wind.gust;
    } else {
      windG.innerText = "N/A";
    }

    if (data2.weather[0].main) {
      wMain.innerText = data2.weather[0].main;
    } else {
      wMain.innerText = "N/A";
    }

    if (data2.name) {
      local.innerText = data2.name;
    } else {
      local.innerText = "N/A";
    }
  }
}

button.addEventListener("click", () => {
  if (selV.value != "") {
    showWeather(selV.value);
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Challenge Information:

Build a Weather App - Build a Weather App

2

can you try not using promise chaining here?
after fetch don’t use then, instead do things inside the getWeather function directly

3

Just so you know, you’re a wizzud ILM

4

No, I am only familiar with the quirks of the app

5

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