Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

tests 17-22 are failing although the app is fetching the weather correctly and get forecast button is working fine. Any clues fellow campers?

Your code so far

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

  <body>  <button id="get-forecast">Get Forecast</button>
   <label for="select">Weather for:</label>
  <select id="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>
  <div id="weather-container">
  </div>
  <script src="script.js">
  </script></body>
</html>


body {
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
  padding: 2rem;
  text-align: center;
}

select, button {
  padding: 0.5rem 1rem;
  margin: 1rem 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}
button {
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
  min-width: 100px;
  min-height: 30px;
}
select{
min-width: 160px;         
min-height: 35px;  
}

button:hover {
  background-color: #0056b3;
}

#weather-container {
  margin-top: 2rem;
  font-size: 1.2rem;
  color: #333;
}



const getForecastBtn = document.getElementById('get-forecast');
const selectElement = document.getElementById('select');
const weatherContainer = document.getElementById('weather-container');

// Create the required weather display elements
function createWeatherElements() {
  weatherContainer.innerHTML = `
    <div class="weather-card">
      <div class="weather-header">
        <h2 id="location">Location</h2>
        <span id="weather-main">Weather Type</span>
      </div>
      <div class="weather-main">
        <img id="weather-icon" src="" alt="Weather icon">
        <div class="weather-temp" id="main-temperature">0°C</div>
      </div>
      <div class="weather-details">
        <div class="weather-detail">
          <span>Feels Like:</span>
          <span id="feels-like">N/A</span>
        </div>
        <div class="weather-detail">
          <span>Humidity:</span>
          <span id="humidity">N/A</span>
        </div>
        <div class="weather-detail">
          <span>Wind Speed:</span>
          <span id="wind">N/A</span>
        </div>
        <div class="weather-detail">
          <span>Wind Gust:</span>
          <span id="wind-gust">N/A</span>
        </div>
      </div>
    </div>
  `;
}

// Async function to fetch weather data
async function getWeather(city) {
  try {
    if (!city) return null;
    
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city.toLowerCase()}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching weather data:', error);
    return null;
  }
}

// Async function to display weather
async function showWeather(city) {
  if (!city) return;
  
  const weatherData = await getWeather(city);  
  if (!weatherData || !weatherData.weather) {
    alert('Something went wrong, please try again later');
    return;
  }
  
  // Create elements if they don't exist
  if (!document.getElementById('location')) {
    createWeatherElements();
  }
  
  // Update the DOM with weather data
  document.getElementById('location').textContent = weatherData.name || city;
  document.getElementById('weather-main').textContent = weatherData.weather[0].main || 'N/A';
  document.getElementById('main-temperature').textContent = `${Math.round(weatherData.main.temp)}°C`;
  document.getElementById('feels-like').textContent = `${Math.round(weatherData.main.feels_like)}°C`;
  document.getElementById('humidity').textContent = `${weatherData.main.humidity}%`;
  document.getElementById('wind').textContent = `${weatherData.wind.speed} m/s`;
  document.getElementById('wind-gust').textContent = weatherData.wind.gust ? `${weatherData.wind.gust} m/s` : 'N/A';
  
  // Set weather icon if available - using freeCodeCamp's icons
  const iconCode = weatherData.weather[0].icon;
  if (iconCode) {
    document.getElementById('weather-icon').src = `https://cdn.freecodecamp.org/weather-icons/${iconCode}.svg`;
    document.getElementById('weather-icon').style.display = 'block';
  } else {
    document.getElementById('weather-icon').style.display = 'none';
  }
}

// Event listener for the button
getForecastBtn.addEventListener('click', function() {
  const selectedCity = selectElement.value;
  if (selectedCity) {
    showWeather(selectedCity);
  }
});

// Optional: Add event listener for select change
selectElement.addEventListener('change', function() {
  weatherContainer.innerHTML = ''; // Clear previous weather display
});

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

2

  • Your icons are not displaying. Make sure iconCode is what you think it is and is used correctly. After you fix that, you will get some more useful asserts messages for the failing tests.

  • The error logging test is a little strict and do not allow for extra text beyond the error getting logged.

3

Thanks for the hint. Turns out that I was unnecessarily rounding the temperatures and repeating the urls for the icons.

1 Like