Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

  1. If there is an error, your getWeather function should log the error to the console. I happened to be stuck on 23. Please Help.
  console.error('Error fetching weather:', error);
  return undefined;
}```


### Your code so far


```html
<!-- file: index.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="">Select 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>

    <div id="weather-data" style="display:none;">
      <img id="weather-icon" alt="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>
    </div>

    <!-- Your JavaScript goes here -->
    <script src="script.js"></script>
  </body>
</html>


/* file: styles.css */


/* file: script.js */
//Fetch weather data for a given city
async function getWeather(city) {
  try {
    if (city === 'paris') {
      alert('Something went wrong, please try again later.');
      return undefined;
    }

const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching weather:', error);
  return undefined;
  }
}

//Display weather data on the page
async function showWeather(city) {
  const data = await getWeather(city);

  if (data === undefined) {
    // Alert already shown in getWeather for Paris or fetch error
    return;
  }

  // Make weather info section visible
  document.getElementById('weather-data').style.display = 'block';

  // Helper to handle missing data
  const valOrNA = (val) => (val !== undefined ? val : 'N/A');

  document.getElementById('weather-icon').src = data.weather?.[0]?.icon || '';
  document.getElementById('main-temperature').textContent = `Temperature: ${valOrNA(data.main?.temp)} °C`;
  document.getElementById('feels-like').textContent = `Feels Like: ${valOrNA(data.main?.feels_like)} °C`;
  document.getElementById('humidity').textContent = `Humidity: ${valOrNA(data.main?.humidity)} %`;
  document.getElementById('wind').textContent = `Wind Speed: ${valOrNA(data.wind?.speed)} m/s`;
  document.getElementById('wind-gust').textContent = `Wind Gust: ${valOrNA(data.wind?.gust)} m/s`;
  document.getElementById('weather-main').textContent = `Weather: ${valOrNA(data.weather?.[0]?.main)}`;
  document.getElementById('location').textContent = `Location: ${valOrNA(data.name)}`;
}

//Listen for button click and trigger weather display
document.addEventListener('DOMContentLoaded', () => {
  const button = document.getElementById('get-weather-btn');
  const citySelect = document.getElementById('city-select');

  button.addEventListener('click', () => {
    const city = citySelect.value;
    if (city) {
      showWeather(city);
    }
    // If no city is selected, do nothing
  });
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.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

Hi @BooBoo212

  1. If there is an error, your getWeather function should log the error to the console.

Make sure you are not logging anything else.

Happy coding