Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

Is there currently a technical issue with this lab?
I can’t get this HTML code to pass beyond step 4, no matter what I am trying. So far, I adjusted the order, tried different and additional attributes, reset the lesson, checked the forum, switched the machine off for the day and coming back to the same result the next day.

I believe this code should pass or is there any fundamental error my rotting brain hasn’t indicated?

Here the link to the challenge.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Weather App</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="Your reliable Weather App" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <main>
    <div class="city-container">
      <select title="cities">
        <option value="">Please enter a city...</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">Get Weather</button>
    </div>

    <div class="data-container">
      <div><img id="weather-icon" src="" title="icon"/></div>
      <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>
  <script src="script.js"></script>
</body>

</html>

/* file: styles.css */


/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

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

Your code is passing up to test 12 for me. Perhaps you have some browser extensions that affects tests?

3

Thanks for your response and suggestion. On Firefox, after uninstalling an extension, clearing the cache/cookies and ultimately reinstalling the browser, it still won’t pass, both on Linux and Windows. However, on another browser it did pass up to 12 for me as well. Is/are there any browser/s this site is optimized for?

4

It should be working on the most used browsers (Firefox and Chrome at least) but there may be updates on the browser side or on the site side that did cause a mismatch

5

Must be one of those days…

I ran into another problem and getting now displayed a 404 error in the preview (see screenshot below) - also on the chromium based browser where the previous problem didn’t appear. There was a recent post mentioning the same error, but I am unsure whether this has been resolved. My error appeared instantly on the first try, though.

Screen - Build a Weather App
Screen - Build a Weather App1918×936 234 KB

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Weather App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Your reliable Weather App" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<main>
<div>
<select>
<option value="">Please enter a city...</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">Get Weather</button>
</div>

<div>
<div><img id="weather-icon" src=""/></div>
<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>
<script src="script.js"></script>
</body>

</html>

const weatherIcon = document.getElementById('weather-icon');
const mainTemp = document.getElementById('main-temperature');
const feeledTemp = document.getElementById('feels-like');
const humidity = document.getElementById('humidity');
const wind = document.getElementById('wind');
const gust = document.getElementById('wind-gust');
const weatherMain = document.getElementById('weather-main');
const location = document.getElementById('location');
const btn = document.getElementById('weather-btn');

async function getWeather(city) {
try {
let response = await fetch(`https://weather-proxy.freecodecamp.rock/api/city/${city}`);
let data = await response.json();

console.log(data);
return data;
} 

catch(err) {
console.log('An error occurred during the fetching request...', err)
alert('Something went wrong, please try again later');
}

}

const showWeather = (city) => {

}

Is this due to my code?

6

yes, it is due to your use of location as a variable name don’t do that

7

Thanks, that was it.