Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

Hello,
Test no. 18, 19, 21, 22, and 24 is not passing. I have tried different methods to try and determine if a specific data is undefined, but the result stays the same.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta charset="utf-8" />
    <title>Weather App</title>
     <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <!-- The Upper Box -->
      <div id="outputs" class="main-box">
       <div id="main-details"> 
        <section id="selected-city">
          <p id="location"></p>
        </section>

        <section id="weather-container">
          <p id="main-temperature"></p>

          <div class="icon">
            <img id="weather-icon">
            <p id="weather-main"></p>
          </div> 
        </section>
       </div> 
        
        <!-- Extra details about the weather -->
       <div id="weather-details"> 
        <section id="humdity-container">
          <p id="humidity"></p>
          <p id="feels-like"></p>
        </section>

        <section id="wind-action">
          <div>
            <p id="wind"></p>
            <p id="wind-gust"></p>
          </div>  

          <div class="appear" id="clock-picture">
          </div>  
        </section>
       </div>       
      </div>
      
      <!-- The Lower Box -->
      <div id="info-inputs" class="main-box">
        <label for="cities">WEATHER FOR:</label>
       <div id="clickables"> 
        <select id="cities">
          <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>
     </div> 
    </main>

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

/* file: styles.css */
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* border: 1px solid; */
}

:root {
  font-size: 62.5%;
  font-family: 'Quicksand', sans-serif;
}

body {
  background-color: hsl(214, 80%, 60%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0 auto;
}

main {
  min-width: 600px;
  max-width: 650px;
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#outputs {
  min-height: 24em;
  background-color: hsl(0, 0%, 94%);
  margin-bottom: 2.7em;
}

#info-inputs {
  min-height: 8em;
  background-color: hsl(207, 85%, 80%);
  padding: 1em 2em;
  text-align: center;
  align-items: center;
}

#outputs, #info-inputs {
  box-shadow: 5px 5px 10px black;
}

.main-box {
  border: 2px solid black;
  border-radius: 10px;
}

/* The elements with flex */
#outputs section, #info-inputs, #clickables, #main-details section, .icon, #wind-action { 
  display: flex;
}

/* This is for the inputs*/
#get-weather-btn, #cities  {
  font-size: 1.8em;
  width: fit-content;
  height: fit-content;
  min-width: 9em; 
  padding: 0.5em 1.5em;
}

#get-weather-btn {
  margin-left: 0.8em;
}

label[for="cities"] {
  font-size: 1.7em;
  width: 50%;
}

label[for="cities"]::first-letter {
  font-size: 1.3em;
}

#clickables {
  width: 50%;
  justify-content: flex-end;
}

/* This is for the Upper Box */

#main-details {
  height: 40%;
  border-bottom: 1px solid;
}

#main-details section {
  height: fit-content;
}

#weather-details {
  height: 60%;
}

#selected-city {
  font-size: 3em;
  justify-content: center;
  align-items: flex-end;
  margin-top: 1.1em;
  margin-bottom: 0.6em;
}

#weather-container {
  font-size: 2.5em;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1em;
}

.icon {
  align-items: center;
}

#weather-icon {
  margin-right: 5px;

}

/* The Extra Deatails (Second Innerbox) */

#humdity-container {
  padding: 1.5em ;
  font-size: 1.7em;
  /* border: 1px solid; */
  min-height: 45%;
  justify-content: space-around;
}

#humdity-container p {
  margin: 0.2em 0 0; 
}

#weather-details> section:last-of-type {
   font-size: 1.7em;
   min-height: 2.5em;
   justify-content: space-around;
}

#wind-action {
  align-items: center;
}

#wind-action > div > p {
  margin: 0.5em 2em;
}

#clock-picture {
  min-height: 4.5em; 
  margin: 1.7em 0;
}



/* file: script.js */
 const place = document.getElementById('location');
 const mainTemperature = document.getElementById('main-temperature');
 const weatherMain = document.getElementById('weather-main');
 const weatherIcon = document.getElementById('weather-icon');
 const humidity = document.getElementById('humidity');
 const feelsLike = document.getElementById('feels-like');
 const wind = document.getElementById('wind');
 const windGust = document.getElementById('wind-gust');
 const clockPicture = document.getElementById('clock-picture');
 const getWeatherBtn = document.getElementById('get-weather-btn');
 const cities = document.getElementById('cities');



async function getWeather(city) {
  try {
    let response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
    let cityData = await response.json();
    return cityData;
  } catch (error) {
    console.error(error);
  }
}


// This the setting function.
async function showWeather(city) {
    if(!city) {
      return;
    }

    let coordinates = await getWeather(city);

    if (!coordinates || coordinates.error) {
     alert(`Something went wrong, please try again later`);
     return;
    }
    
    place.innerText =  coordinates.name || "N/A";
    mainTemperature.innerText =  coordinates.main.temp? `${coordinates.main.temp}\u00B0 C` : "N/A";
    weatherMain.innerText = coordinates.weather[0].main || "N/A";
    weatherIcon.src = coordinates.weather[0].icon || "";
    humidity.textContent = coordinates.main.humidity ? `Humdity: ${coordinates.main.humidity}%` : "N/A";
    feelsLike.textContent = coordinates.main.feels_like ? `Feels Like: ${coordinates.main.feels_like}\u00B0 C` : "N/A";
    wind.textContent = coordinates.wind.speed ? `Wind: ${coordinates.wind.speed} m/s` : "N/A";
    windGust.textContent = coordinates.wind.gust ? `Gusts: ${coordinates.wind.gust} m/s` : "N/A";

    return;
}



cities.addEventListener('change', () => {
  getWeatherBtn.addEventListener("click", () => {
    showWeather(cities.value)
  })
})

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

2

Hi @dylanpueo

Are you sure you’re supposed to register the click event listener for the button inside the change event listener for the city select menu?

4

Thank you for pointing that out. I changed it and I passed. Though I have a question about it. When I try to log the selected value directly, it doesn’t appear in the console, why is that?

5

Where are you logging it? As in, which part of the code

6

When I try to directly log the “select element“.value , it does not show anything on the logs, but without the value, it shows an object containing numbers as keys

7

When I do cities.value it doesn’t show anything

8

Sorry for the late reply. What other tests are still still failing?

9

No worries. I’m already done with this test