Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

My app is fetching data from the API before I start the event By clicking my get weather button. I am only invoking my getWeather function in my showWeather function, but before I even invoke it via the button the api is returning a 404 page

Your code so far

<!-- file: index.html -->
<!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 rel="stylesheet" href="styles.css"/>
  </head>

  <body>
    <h1 id="location"></h1>
    <div class="data-container">
      <span class="flex">
        <h3 id="main-temperature"></h3>
        <span class="no-border">
          <img id="weather-icon"/>
          <h3 id="weather-main"></h3>
        </span>
      </span>
      <span class="flex">
        <p id="humidity"></p>
        <p id="feels-like"></p>
      </span>
      <span class="flex">
        <p id="wind"></p>
        <p id="wind-gust"></p>
      </span>
    </div>
    <div class="input-container ">
      <h2>Check the Weather</h2>
      <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>
      <button id="get-weather-btn" type="button">Get Weather</button>
     
    </div>
    <script src="script.js"></script>
  </body>
</html>


/* file: styles.css */
*:before,
*:after,
*{
  margin:0;
  padding:0;
  box-sizing:boder-box;
}

:root{
  --skyBlue:#4A90E2;
  --sunsetYellow: #F5A623;
  --cloudWhite: #F9F9F9;
}

body{
  background-color:var(--skyBlue);
}

h1{
  color:var(--sunsetYellow);
  text-align:center;
  padding:20px
}

span{
display:flex;
justify-content:space-between;
align-items:center;
}

span:not(.no-border){
  border-bottom:1px solid black;
}

.flex{
  margin:20px 100px;
  font-size:23px;
}
.input-container, .data-container{
  margin:20px 40px;
  background-color:var(--cloudWhite);
  border-radius:10px;
  padding:10px 0
  
}

.input-container{
  display:flex;
  justify-content:center;
  align-items:center;

}
.input-container *{
  margin:0 20px;
}

img{
padding: 0 7px;
width:20px;
height:20px;
}

button{
  background-color:var(--sunsetYellow);
  border-radius:5px;
  padding:10px;
  font-size:14px;
  transition:transform 0.2s;
}

button:hover{
  cursor:pointer;
  transform:scale(1.1);
}


/* file: script.js */
const btn = document.getElementById("get-weather-btn");
const citySelection = document.getElementById("city-select")
const image = document.getElementById("weather-icon");
const temp = 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 weatherType = document.getElementById("weather-main");
const location = document.getElementById("location")



async function getWeather(city){
  try{
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
    if(!response.ok){
     throw new Error("something went wrong, please try again later")
    }
     const data = await response.json();
     if (data) return data;
  }
  catch (error){
    console.error(error);
    alert(error.message);
  }
}

async function showWeather(city){
  console.log("showWeather function executed")
    const data = await getWeather(city);
    location.textContent = (()=>{
      if (!data.name) return "N/A";
      else return data.name;
    })
}


btn.addEventListener("click", (event) => {
  event.preventDefault();
  showWeather(citySelection.value);
})

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

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

const location = document.getElementById(“location”)

Try googling “JavaScript location.”

3

please don’t use location variable name