Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

guys help with my project
23. If there is an error, your getWeather function should log the error to the console.
i have only one error and theres no way tobe solve how much i tried ;-;

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="style.css">
</head>
<body>
  <div class="weather-container">
    <h1>Weather App</h1>

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

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

    <div id="weather-info" class="hidden">
      <h2 id="location"></h2>
      <img id="weather-icon" src="" alt="Weather Icon">
      <p>Main Temperature: <span id="main-temperature"></span>°C</p>
      <p>Feels Like: <span id="feels-like"></span>°C</p>
      <p>Humidity: <span id="humidity"></span>%</p>
      <p>Wind Speed: <span id="wind"></span> m/s</p>
      <p>Wind Gust: <span id="wind-gust"></span> m/s</p>
      <p>Weather: <span id="weather-main"></span></p>
    </div>
  </div>

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


/* file: styles.css */


/* file: script.js */
// Elements
const btn = document.getElementById('get-weather-btn');
const select = document.getElementById('city-select');
const weatherInfo = document.getElementById('weather-info');

const weatherIcon = document.getElementById('weather-icon');
const mainTemp = document.getElementById('main-temperature');
const feelsLike = document.getElementById('feels-like');
const humidity = document.getElementById('humidity');
const windSpeed = document.getElementById('wind');
const windGust = document.getElementById('wind-gust');
const weatherMain = document.getElementById('weather-main');
const locationEl = document.getElementById('location');

// Fetch weather data from API
async function getWeather(city) {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    if (!response.ok) throw new Error(`API error: ${response.status}`);
    const data = await response.json();
    return data;
  } catch (error) {
  console.error(error);
  throw error;

  }
}

// Display weather data
async function showWeather(city) {
  if (!city) return;

  // Loading state
  btn.disabled = true;
  btn.textContent = 'Loading...';

  try {
    const data = await getWeather(city);

    // Weather icon
    if (data.weather?.[0]?.icon) {
      weatherIcon.src = data.weather[0].icon;
      weatherIcon.style.display = 'inline';
    } else {
      weatherIcon.style.display = 'none';
    }

    // Set text content or N/A
    locationEl.textContent = data.name ?? 'N/A';
    weatherMain.textContent = data.weather?.[0]?.main ?? 'N/A';
    mainTemp.textContent = data.main?.temp ?? 'N/A';
    feelsLike.textContent = data.main?.feels_like ?? 'N/A';
    humidity.textContent = data.main?.humidity ?? 'N/A';
    windSpeed.textContent = data.wind?.speed ?? 'N/A';
    windGust.textContent = data.wind?.gust ?? 'N/A';

    weatherInfo.classList.remove('hidden');
  } catch {
    weatherInfo.classList.add('hidden');
    alert('Something went wrong, please try again later');
  } finally {
    btn.disabled = false;
    btn.textContent = 'Get Weather';
  }
}

// Button click event
btn.addEventListener('click', () => {
  const selectedCity = select.value;
  showWeather(selectedCity);
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 Edg/144.0.0.0

Challenge Information:

Build a Weather App - Build a Weather App

2

Do you see an error in the console after you try to get weather for Paris?

3

oh i kinda found the error alrd’