Build a Weather App - Build a Weather App

dreyes61 · July 17, 2025, 6:06pm

Tell us what’s happening:

I don;t understand why I’m receiving a 404 Page not found message on the preview screen. And advice would be helpful and appreciated,

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
    <link href="styles.css" rel="stylesheet">
  </head>

  <body>
    <main id="main-content">
    <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> 
    
    <img id="weather-icon">

    <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>
    </main>
    <script src="script.js" async></script>
  </body>
</html>

/* file: styles.css */
body{ 
  background-color: lightgray;
  color: white;
  padding:0px;
  margin: 0px;
}
#main-content{
  margin-top: 2em;
  width: 600px;
  height: 400px;
  background-color: #fff;
  margin: 0 auto; 
  text-align: center;
  border: 2px solid #00ff00;
  border-radius: 15px
}
#get-weather-btn{
  width: 20em;
  height: 3em;
  background-color: gold;
  border: 2px dashed black;
  border-radius: 25px;
  
}

select{
  width: 200px;
  background-color: #ecede8;
  padding: 5px;
  height: 3em;
  margin:0 auto;
}
select option:nth-child(1){
  background-color: brown;
  color: #fff;
}
  

#city-select{
  width: inherit;
  background-color: #b8f0b4 
}
#city select option{
  background-color: #db2c81;
}

/* file: script.js */
const getWeather = async(city) =>{
  try{
  const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
  const data = await response.json();
  return data;
}catch(err){
  console.log(err);
}
}
const showWeather = async(city) => {
  const data = await getWeather(city);
  if(!data.ok) alert('Something went wrong, please try again later')
}
const getWeatherBtn = document.getElementById("get-weather-btn");
const citySelect = document.querySelector("#city-select");
const weatherIcon = document.getElementById("weather-icon");
const mainTemperature = document.getElementById("main-temperature");
const feelsLike = document.getElementById("feels-like");
const humidity = document.getElementById("humidity");
const wind = document.getElementById("wind");
const windGust = document.getElementById("wind-gust");
const location =  document.getElementById("location")

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Challenge Information:

Build a Weather App - Build a Weather App

ILM · July 17, 2025, 6:35pm

this one is a browser variable, you need to change name to this variable

related issue:

github.com/freeCodeCamp/freeCodeCamp

Global browser objects should not be overwritten by locally declared variables

opened 06:20PM - 23 Dec 23 UTC

lasjorg

scope: curriculum status: PR in works

### Describe the Issue Image of the bug: https://global.discourse-cdn.com/…freecodecamp/original/4X/4/5/0/450b30022003aba1bf58cde0834180b757026b88.png 1. Go to step 52 https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-javascript-by-building-a-role-playing-game/step-52 2. Write the wrong code `const location = []`. The locally declared variable should not overwrite the [location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) property. ### Affected Page https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-javascript-by-building-a-role-playing-game/step-52 ### Your code ``` ``` ### Expected behavior Not to have a buggy state with double editors. ### Screenshots _No response_ ### System - Device: [e.g. iPhone 6, Laptop] - OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] - Browser: [e.g. Chrome, Safari] - Version: [e.g. 22] ### Additional context Forum: https://forum.freecodecamp.org/t/js-freecodecamp-bug-report/657713 https://forum.freecodecamp.org/t/server-error-in-javascript/659246 https://forum.freecodecamp.org/t/how-can-i-set-the-freecodecamp-coding-viewer-to-its-original-mode/659527 https://forum.freecodecamp.org/t/cool-issue-in-the-role-play-game-step-52/662613

fcc4b6d10c4-b540-4e2 · July 17, 2025, 7:03pm

I stumbled here, too, when I did this challenge. I was working in my local system and the console just said, ‘Identifier location has already been declared’, which was a headscratcher. I finally changed the variable name to ‘weatherLocation’ out of frustration but never did figure out the why of it, so @ILM’s issue post was helpful. At the time, it never occurred to me that location is a browser object (e.g. window.location).

dreyes61 · July 19, 2025, 1:37am

Thank you for your help

dreyes61 · July 19, 2025, 4:03am

I fixed the location issue but i am stuck failing tests 18 - 24. Any hints/help will be appreciated, Here’s my updated code{

const mainTemperature = document.getElementById("main-temperature");
const feelsLike = document.getElementById("feels-like");
const humidity = document.getElementById("humidity");
const winds = document.getElementById("wind");
const windGust = document.getElementById("wind-gust");
const weatherMain = document.getElementById("weather-main");
const city = document.getElementById("location");
const getWeatherBtn = document.getElementById("get-weather-btn");
const citySelect = document.querySelector("#city-select");
const weatherIcon = document.getElementById("weather-icon")


const getWeather = async(city) =>{
  try{
  const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
  const data = await response.json();
  return data;
}catch(err){
  alert('Something went wrong, please try again later');
}
}

const showWeather = async(city) => {
  try{
    const res = await getWeather(city);
   
    if(!data.ok) {
      alert("Something went wrong, please try again later")
  }
       const{ main, icon } = weather;
      const{ temp, feels_like, humidity } = main;
      const{ speed, gust } = wind;

      mainTemperature.textContent = `? Temperature: ${temp} : N/A`;
      feelsLike.textContent = `? Feels Like: ${feels_Like} : N/A`
      humidity.textContent  = `? Humidity: {humidity}: N/A`;
      winds.textContent = `? ≈ Speed: $speed : N/A}`
      windGust.textContent = `? Wind Gust: ${gust} : N/A`;
      weatherMain.textContent = `? Main Weather: ${main} : N/A`;
      city.textContent = `? City: ${location} : N/A`
  }catch(err){
    alert("Something went wring, please try again later")
  }
}
 
const chooseCity = (city) => {
  const selection = citySelect.value;
  if(selection){
    showWeather(city)  
    }
  }
 getWeather.addEventListener("click",chooseCity);

HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
    <link href="styles.css" rel="stylesheet">
  </head>

  <body>
    <main id="main-content">
    <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> 
    
    <img id="weather-icon">

    <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>
    </main>
    <script src="script.js" async></script>
  </body>
</html>

I just fixed error with the speed variable by adding curly braces but still need help with tests 18-24

dreyes61 · July 19, 2025, 4:43am

I also added a src attribute to the weather=icon.

ILM · July 19, 2025, 10:45am

why is your event listener on a function?

dreyes61 · July 20, 2025, 10:00pm

Thanks i totally missed that.

dreyes61 · July 20, 2025, 11:55pm

Ok when i choose a city then click the get-weather-btn, the only result i get is the error message: “”Something went wrong, please try again later
Nothing comes up on the console. I was getting errors but i fixed them(like syntax errors) either on fCC console or code one console.
Please help. So far i can’t figure out what I’m missing.

Here’s my code:


  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Weather App</title>
      <link href="styles.css" rel="stylesheet">
    </head>


    <body>
      <main id="container">
        <button id="get-weather-btn">Get Weather</button>

        <label for="city-select">Choose a city</label>
        <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>
      
        <img id="weather-icon" alt="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>
  </main>
    <script src="script.js" async></script>
    </body>
  </html>
  
CSS

body{ 
  background-color: #303;
  color: white;
  padding:0px;
  margin: 0px;
}
#main-content{
  margin-top: 2em;
  width: 600px;
  height: 400px;
  background-color: #fff;
  margin: 0 auto; 
  text-align: center;
  border: 2px solid #00ff00;
  border-radius: 15px
}
#get-weather-btn{
  width: 20em;
  height: 3em;
  background-color: gold;
  border: 2px dashed black;
  border-radius: 25px;
  
}

select{
  width: 200px;
  background-color: 
  color: #000;
  padding: 5px;
  height: 3em;
  margin:0 auto;
}
select option:nth-child(1){
  background-color: brown;
  color: #fff;
}
  

#city-select{
  width: inherit;
  background-color: #b8f0b4 
}
#city select option{
  background-color: #db2c81;
}
		
JS:

const showWeather = async(city) => {

  const data = await getWeather(city);
  if(!data.ok) throw new Error("Something went wrong, please try again later");
  const { main, icon } = weather;
  const { temp, feels_like,humidity } = main;
  const { speed,gust } = wind;

  const weatherIcon = document.getElementById("weather-icon");
weatherIcon.src = `${icon}`
const mainTemperature = document.getElementById("main-temperature");
mainTemperature.textContent = `${main-temperature}`;
mainTemperature.textContent = `Main Temperature: ${temp}`;

const feelsLike = document.getElementById("feels-like");
feelsLike.textContent = `Feels Like: (feels_like)`;

const humid = document.getElementById("humidity");
humid.textContent = `Humidity: ${humid}`;
const wind = document.getElementById("wind");
wind.textContent = `Wind Speed: ${speed}`;
windGust = document.getElementById("wind-gust");
windGust.textContent = `Wind Gust: ${gust}`;
const weatherMain = document.getElementById("weather-main");
weatherMain.textContent = `Main Weather: {weatherMain}`;

const cities = document.getElementById("location");
cities.textContent = `City: {location}`
}


const getWeather = async(city) => {
try{
  const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
  const data = res.json();
  if(!data.ok){alert("Something went wrong, please try again later")};
  return data
}catch(err){
  console.log(err);
}
} 
const chooseCity = (city) =>{
  const selected = document.getElementById("city-select");
  const selectedCity = selected.value;
  if(selectedCity){
    return showWeather(city)
  }
}

const getWeatherBtn = document.getElementById("get-weather-btn");
getWeatherBtn.addEventListener("click",chooseCity);

:

pkdvalis · July 21, 2025, 12:29am

Can you divide the HTML CSS and JS into three different boxes? It makes it easier to select.

Just

Like

This

Also, your JS seems to end in a single colon ? : is that correct?

pkdvalis · July 21, 2025, 12:30am

Please share your troubleshooting steps. The error message is the one that you yourself coded.

Examine the returned data in the variable. What does it look like?

dreyes61 · July 21, 2025, 2:27am

Her’s my code asked for:


HTML:

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Weather App</title>
      <link href="styles.css" rel="stylsheet" >
    </head>

    <body>
      <main id="container">
        <button id="get-weather-btn">Get Weather</button>

        <label for="city-select">Choose a city</label>
        <select id="city-select">
          <option class="choice" value=""></option>
          <option class="choice" value="new york">New York</option>
          <option class="choice"value="los angeles">Los Angeles</option>
          <option class="choice" value="chicago">Chicago</option>
          <option class="choice" value="paris">Paris</option>
          <option class="choice" value="tokyo">Tokyo</option>
          <option class="choice" value="london">London</option>
        </select>
      
        <img id="weather-icon" alt="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>
  </main>
    <script src="script.js" async></script>
    </body>
  </html>

CSS:

{
box-sizing: border-box;

}

#get-weather-btn{
width: 12rem;
height: auto;
margin-right: 16px;
padding:5px;
background-color: #00f00f;
color: #000;
font-size: 16px;
font-weight: bold;
border: 12px dotted red;
border-radius: 15px;
}
#city-select{
width: 12rem;
height: relative;
background-color: #00f00f;
}

JS:

const showWeather = async(city) => {

const weatherIcon = document.getElementById(“weather-icon”);
weatherIcon.src = ${icon}
const mainTemperature = document.getElementById (“temp”);
mainTemperature.textContent = Main Temperature: ${temp};

const feelsLike = document.getElementById(“feels-like”);
feelsLike.textContent = Feels Like: ${feels_like};

const cities = document.getElementById(“location”);
cities.textContent = City: ${location}
}

const getWeatherBtn = document.getElementById(“get-weather-btn”);
getWeatherBtn.addEventListener(“click”,chooseCity);

hbar1st · July 21, 2025, 2:51am

when sharing code here, you have to put 3 backticks on a separate line above each code block
and then another 3 backticks on a separate line below each code block
if you don’t match them up properly then you get weird results

pkdvalis · July 21, 2025, 12:05pm

Examine the returned data in the data variable. What does it look like?

fcc4b6d10c4-b540-4e2 · July 21, 2025, 12:35pm

Please explain how you think this can work.

Topic		Replies	Views
Build a Weather App - Build a Weather App JavaScript	4	100	June 18, 2025
Build a Weather App - Build a Weather App JavaScript	10	180	June 8, 2025
Let's discuss your "Local Weather App" Code Feedback	831	57346	March 20, 2018
Build a Weather App - Build a Weather App JavaScript	1	316	March 14, 2025
Weather App - feedback - Code Feedback	6	694	January 17, 2021

Build a Weather App - Build a Weather App

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics