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
https://www.freecodecamp.org/learn/full-stack-developer/lab-weather-app/lab-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

dhess · 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?

dhess · July 21, 2025, 12:35pm

Please explain how you think this can work.

dhess · July 22, 2025, 12:21pm

First you posted this code:

dreyes61:

const chooseCity = (city) =>{
  const selected = document.getElementById("city-select");
  const selectedCity = selected.value;
  if(selectedCity){
    return showWeather(city)
  }
}

Then a bit later you posted this code:

dreyes61:

const chooseCity = (city) =>{
document.querySelector(“city-select”);
const choice = document.querySelectorAll(“.choice”)
// const selectedCity = selected.value;
if(choice){
showWeather(city)
}
}

Which is current?

dreyes61 · July 26, 2025, 12:16am

I’ve been working on this for weeks now. Here is my current code:

Js:

//retrieve data declare getWeather asynchronous function
// declare getWeather function

const getWeather = async(city) => {
  try{
    const resp = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    const data = resp.json();
    if(!data.ok){
      alert("Something went wrong");
      return data
    }

  }catch (err){
    console.lof(err)
  }
}



// declare showWeather function
const showWeather = async(city) => {
  const data = await getWeather(city);

  const { main, icon } = data.weather[0]};
  const { temp, feels_like,  humidity} = data.weather[1];

  const { speed, gust } = weather[2]; 

  const mainTemperature = document.grtElementById("main-temperature");
  maintemperature.textContent = `? Temperature: ${temp} : N/A`;

  const feelsLike = document.GetElementById("feels_ike");
  feelsLike.textContent = `? Feels Like: ${feels_like}: N/A`;

  const humid = document.GetElementById("humidity");
  humid.textContent = `? Humidity ${humidity} : N/A`;

  const windSpeed = document.GetElementById("wind");
  windSpeed.textContent = `? WindSpeed: ${main.speed} : N/A`;
  
  const winGust = document.GetElementById("wond-gust");
  windGust.textContent = `? Wind Gust: ${wind-gust} : N/A`; 

const weatherMain = document.GetElementById("main");
weatherMain.textContent - `? Main Weather: ${weather-main}`;
const places = document.GetElementById("location");
places.textContent = `? Location: ${location} : N/A `;

const weatherIcon = document.GetElementById("weather-icon");
weatherIcon.src = `? $icon : N/A`;

const chooseOption = (city) => {
  const citySelect = document.querySelect("#city-select");

const citySelectValue = citySelect.value;
citySelect.addEventListener("change",() => {
  if(citySelectValue){
    showWeather(city)
  }
})
}

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



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="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">

  <p id="main-temperature"></o>
  <p id="feels-like"></p>
  <p id="humidity"></p>
  <p id="wind"></p>
  <p id="wind-gust"></>
  <p id="weather-main"></p>
  <p id="location"></p>

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

pkdvalis · July 26, 2025, 12:41am

How can we help you with this code?

Please tell us a bit more. What did you try? What did you change? Is it working now? What’s not working?

Maybe it’s taken weeks because you aren’t sharing any information here.

dhess · July 26, 2025, 12:04pm

When you go to a site meant to look up the weather and you’re presented with a dropdown list of cities and a button that says, “Get Weather,” what’s the first thing you do? Click the button or select a city?

dreyes61 · July 29, 2025, 4:34am

Sorry for tnot sharing ,
 I think  the event listener attached to the getWeatherBtn works because I’m  able to alert messages based conditionally if the value === “city”). But I’m still failing tests 18-22. Please see the code below.
Any  hints/ help will be appreciated 

Js:

// declare getWeather function
const getWeather = async(city) => {
  try{
    // retrieve response
    const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);

    // convert data to json format
    const data = await res.json();
    return data
    //} 

  }catch(err){
    console.log(err)
  }
}

//declare showWeather function to display data
  const showWeather = async(city) =>{
  try{
    // call getWeather function to display data
    
  const data = await getWeather(city);
    const {main, icon} = data.weather[0];
    const {temp, feels_like, humidity} = data.weather[1];
    const { speed, gust } = data.weather[2]
    const { name } = data.weaather[3];

    // access weather-icon element by id
    const weatherIcon = document.getElementByIf("");
    weatherIcon.src = icon || "";

    // access main-weather element by id 
    const mainWeather = document.getElementByIf("main-weather");
    // add text content to mainWeather element
    mainWeather.textContent = `? Temperature: ${temp} : N/A`;
    //access feels-like element by id
    const feelsLike = document.getElementByIf("feels-like");
    //add text content to feelsLike element
    feelsLike.textContent = `? Feels Like: ${feels_like} : N/A`;

//access humidity element by id
const humid = document.getElementByIf("humidity");
//add text const to humidity element
humid.textContent = `? ${humidity} : N/A`;

// access wind elemet by id
const windSpeed = document.getElementByIf("wind");
//add text content to windSpeed element
windSpeed.textContent = `? ${speed} : N/A`;

//access wind-gust Element by id
const windGust = document.getElementByIf("wind-gust");
//add text content to widGust element
windGust.textContent = `? Wind Gust: #{gust} : N/A`;

//access location element by id
const places = document.getElementByIf("loction");
// add text content to places element
places.textContent = `? ${name} : N/A`;

  }catch(err){
    console.log(err);
  }
}
// access get-weather-btn from id
const getWeatherBtn = document.getElementById("get-weather-btn");

// attach event  to get-weather-btn
getWeatherBtn.addEventListener("click", () =>{
  // access city-select element by id
  const citySelect = document.getElementById("city-select");

  // get value from citySelect element
const cityValue = citySelect.value;
if(cityValue === "new york"){
 // alert("New York");
  showWeather(cityValue)
}else if(cityValue === "los angeles"){
  //alert("Los Angeles");
  showWeather(cityValue)
}else if(cityValue === "chicago") {
  //alert("Chicago")
  showWeather(cityValue)
}else if(cityValue === "paris"){
  alert("Something went wrong, please try again later");
}else if(cityValue === "tokyo"){
  //alert("Tokyo");
  showWeather(cityValue)
}else if(cityValue === "london"){
 // alert("London");
 showWeather(cityValue)
}else{ 
  return
}

})

HTML:

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

  <body>

    <h1>Build a Weather App</h1>
    <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">

    <img id="weather-btn">

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

Topic		Replies	Views
Build a Weather App - Build a Weather App JavaScript	6	165	December 27, 2025
Build a Weather App - Build a Weather App JavaScript	3	112	January 10, 2026
Build a Weather App - Build a Weather App JavaScript	6	213	September 26, 2025
Build a Weather App - Build a Weather App JavaScript	2	57	May 19, 2026
Build a Weather App - Build a Weather App JavaScript	4	424	June 18, 2025

Build a Weather App - Build a Weather App

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics