Build a Weather App

JavaScript
1

I don’t know if this is the correct place to ask this. I have actually completed this project but on the course of doing it I encountered what may be a bug, specifically with getting the element with the ‘location’ id, in the code the commented out version const loc = document.getElementById('location') works but const location = document.getElementById('location'); makes a 404 page not found error appear in the preview window.

error404
error404351×553 17.4 KB

If I try getting another element such as #weather-info with that I also get the 404 error which doesn’t happen in the commented out one.

Does anyone know why this happens with location but not with loc? Was it a problem with the variable name? I will paste the code with a chunk of it missing as to not give the full answer.

const selector = document.getElementById('selector');

const weatherIcon = document.getElementById('weather-icon');
const mainTemp = document.getElementById('main-temperature');
const location = document.getElementById('location');
//const loc = document.getElementById('location');

const getWeatherBtn = document.getElementById('get-weather-btn');

async function getWeather(city) {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
  if (!response.ok) {
    console.log(`There was an error: ${response.status}`);
    return undefined
  }
  return response.json();
  }
  catch(error) {
    console.log(error)
  }
}

async function showWeather(city) {
  const weatherData = await getWeather(city);
  if (weatherData === undefined) {
    console.log('Error')
    return
  }
  const icon = weatherData.weather[0].icon;
  const mainTemperature = weatherData.main.temp;
  const name = weatherData.name;
  
  weatherIcon.setAttribute('src', icon);
  mainTemp.textContent = mainTemperature !== undefined ? `Temperature: ${mainTemperature} C` : 'N/A';
  loc.textContent = name ? `${name}` : 'N/A';
}

getWeatherBtn.addEventListener('click', () => {
  if (selector.value !== 'paris') {
    showWeather(selector.value)
  } else if (selector.value === 'paris') {
    alert('Something went wrong, please try again later')
  }
  else {
    return
  }
})

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

  <body>
    <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>
    <button id="get-weather-btn">Get weather</button><br>
    <div id="weather-info">
      <img id="weather-icon">
      <p id="location"></p>
      <p id="weather-main"></p>
      <p id="main-temperature"></p>
      <p id="feels-like"></p>
      <p id="humidity"></p>
      <p id="wind"></p>
      <p id="wind-gust"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

#weather-info {
  background-color: white;
  border: 1px solid black;
  width: 100%;
  max-width: 500px;
  height: 310px;
  text-align: center;
}

body {
  background-color: whitesmoke;
}

The lab was: Build a Weather App

2

This is a bug. The problem is using location name as variable name, it currently rewrites the global location property.
See more about it at https://github.com/freeCodeCamp/freeCodeCamp/issues/52733