Build a Weather App - Build a Weather App

Programming JavaScript
1

Tell us what’s happening:

Hi! My codes doesn’t pass the test 18,19,20,21 and 22. I have tried several time but no result. I need a help. Thank you

Weather App 

      </span>
      <span>
        <img src=""

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="main-container">
      <div class="holder-container">
        <p id="location"></p> 
        <p>
          <span id="main-temperature">

          </span>
          <span>
            <img src="" alt="weater item" id="weather-icon">
          </span>
          <span id="main">

          </span>
        </p>
        <p>Feels like:
          <span  id="feels-like">

          </span>
        </p>
        <p>Wind:
          <span  id="wind">

          </span>
        </p>
        <p>Humidity:
          <span  id="humidity">

          </span>
        </p>
        <p>Gust:
          <span  id="wind-gust">

          </span>
        </p>
        <p>
          <span  id="weather-main">

          </span>
        </p>
      </div>
      <div class="wether-icons">
        <h1>
          WHEATHER FOR:
        </h1>
      <select>
        <option value=""></option>
        <option value="london">London</option>
        <option value="tokyo">Tokyo</option>
        <option value="los angeles">Los Angeles</option>
        <option value="chicago">Chicago</option>
        <option value="new york">New York</option>
        <option value="paris">Paris</option>
      </select>
      <button id="get-weather-btn">
        Get Weather
      </button>
    </div>
    </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const weatherButton=document.querySelector("#get-weather-btn");
const selectCity=document.querySelector("select");
const weatherImg=document.querySelector("#weather-icon");
const mainTemp=document.querySelector("#main-temperature");
const feelsLike=document.querySelector("#feels-like");
const humidityEl=document.querySelector("#humidity");
const windElement=document.querySelector("#wind");
const windGust=document.querySelector("#wind-gust");
const weatherMain=document.querySelector("#weather-main");
const cityName=document.querySelector("#location");
const mainCondition=document.querySelector("#main");

async function getWeather(city) {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    if (!response.ok) {
      throw new Error("Weather data is unavailble");
    }
    const data = await response.json();
return data;
  } catch (error) {
    console.log(error);
    return;
  }
}
async function showWeather(city) {
  if(!city){
    return;
  }
  const weatherData=await getWeather(city);
  if(!weatherData||weatherData.error){
    alert("Something went wrong, please try again later");
    return;
  }
  else{
  const {weather,main,wind,name} = weatherData;
  cityName.textContent=name||'N/A';
  mainTemp.textContent=main.temp? main.temp+'°C':'N/A';
  mainCondition.textContent= weather[0].main? weather[0].main :"N/A";
  weatherImg.src=weather[0].icon? weather[0].icon:'';
  humidityEl.textContent=main.humidity? main.humidity+"%":'N/A'; 
  feelsLike.textContent=main.feels_like? main.feels_like +"°C": 'N/A';
  windElement.textContent=wind.speed? wind.speed+"m/s":'N/A';
  windGust.textContent=wind.gust? wind.gust+"m/s":'N/A';
  }
  return weatherData;
}
weatherButton.addEventListener("click", ()=>{
  showWeather(selectCity.value);
  
});


/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #45D9BE;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}
.main-container{
  background-color: inherit;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
.holder-container{
  background-color: #E5E7EB;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #3F3F46;
  border-radius: 30px;
  padding: 30px;
  font-size: 1.2rem;
}
.wether-icons{
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  border: 2px solid #3F3F46;
  border-radius: 30px;
  padding: 30px;
  font-size: 1.3rem;
}
#get-weather-btn{
  width: 200px;
  font-size: 1.2rem;
  text-align: center;
  border: 2px solid #A50C36;
  font-weight: 200;
  border-radius: 20px;
}
select{
  width: 200px;
  font-size: 1.2rem;
  padding: 10px;
  border-radius: 10px;
   border: 2px solid #A50C36;
}

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-weather-app/66f12a88741aeb16b9246c59.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @qumalo2021,

Did the instructions ask you to create a #main element for the weather[0].main value?

Happy coding

3

I have removed the element but still not passing the tests

4

Please post your updated code, formatted as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

5 
<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <title>Weather App</title>

    <link rel="stylesheet" href="styles.css">

  </head>

  <body>

    <div class="main-container">

      <div class="holder-container">

        <p id="location"></p> 

        <p>

          <span id="main-temperature">


          </span>

          <span>

            <img src="" alt="weater item" id="weather-icon">

          </span>

          <!-- <span id="main">


          </span> -->

        </p>

        <p>Feels like:

          <span  id="feels-like">


          </span>

        </p>

        <p>Wind:

          <span  id="wind">


          </span>

        </p>

        <p>Humidity:

          <span  id="humidity">


          </span>

        </p>

        <p>Gust:

          <span  id="wind-gust">


          </span>

        </p>

        <p>

          <span  id="weather-main">


          </span>

        </p>

      </div>

      <div class="wether-icons">

        <h1>

          WHEATHER FOR:

        </h1>

      <select>

        <option value=""></option>

        <option value="london">London</option>

        <option value="tokyo">Tokyo</option>

        <option value="los angeles">Los Angeles</option>

        <option value="chicago">Chicago</option>

        <option value="new york">New York</option>

        <option value="paris">Paris</option>

      </select>

      <button id="get-weather-btn">

        Get Weather

      </button>

    </div>

    </div>

    </div>

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

  </body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #45D9BE;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}
.main-container{
  background-color: inherit;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
.holder-container{
  background-color: #E5E7EB;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #3F3F46;
  border-radius: 30px;
  padding: 30px;
  font-size: 1.2rem;
}
.wether-icons{
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  border: 2px solid #3F3F46;
  border-radius: 30px;
  padding: 30px;
  font-size: 1.3rem;
}
#get-weather-btn{
  width: 200px;
  font-size: 1.2rem;
  text-align: center;
  border: 2px solid #A50C36;
  font-weight: 200;
  border-radius: 20px;
}
select{
  width: 200px;
  font-size: 1.2rem;
  padding: 10px;
  border-radius: 10px;
   border: 2px solid #A50C36;
}



const weatherButton=document.querySelector("#get-weather-btn");

const selectCity=document.querySelector("select");

const weatherImg=document.querySelector("#weather-icon");

const mainTemp=document.querySelector("#main-temperature");

const feelsLike=document.querySelector("#feels-like");

const humidityEl=document.querySelector("#humidity");

const windElement=document.querySelector("#wind");

const windGust=document.querySelector("#wind-gust");

const weatherMain=document.querySelector("#weather-main");

const cityName=document.querySelector("#location");




async function getWeather(city) {

  try {

    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);

    if (!response.ok) {

      throw new Error("Weather data is unavailble");

    }

    const data = await response.json();

return data;

  } catch (error) {

    console.log(error);

    return;

  }

}

async function showWeather(city) {

  if(!city){

    return;

  }

  const weatherData=await getWeather(city);

  if(!weatherData||weatherData.error){

    alert("Something went wrong, please try again later");

    return;

  }

  const {weather,main,wind,name} = weatherData;

  cityName.textContent=name||'N/A';

  mainTemp.textContent=main.temp? main.temp+'°C':'N/A';

  weatherImg.src=weather[0].icon? weather[0].icon:'';

  humidityEl.textContent=main.humidity? main.humidity+"%":'N/A'; 

  feelsLike.textContent=main.feels_like? main.feels_like +"°C": 'N/A';

  windElement.textContent=wind.speed? wind.speed+"m/s":'N/A';

  windGust.textContent=wind.gust? wind.gust+"m/s":'N/A';

  return;

}

weatherButton.addEventListener("click", ()=>{

  showWeather(selectCity.value);

  

});
6

Here is my codes, it continue failing the tests

7

Here’s an excerpt from User Story #4:

  • You should have an element with the id weather-main for displaying the main weather type.

Where in your code are you doing this?

8

Ohh, that was the problem!! I have done, thank you!!

10

test 23 was not mentioned in this topic

if you need help with your code please create your own topic

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge.

image
image668×186 6.59 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.