Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

test number 18 says ( * 18. When New York is selected the showWeather function should display the data from the API in the respective HTML elements. If the value from the API is undefined, you should show N/A.

i succeed handled the data and returned it as it must be - i think - but iam not passing the test yet, anyhelp please ?

showWeather

function should display the data from the API in the respective HTML elements. If the value from the API is

undefined

, you should show

N/A

.)

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
  </head>

  <body>
    <div id='container'>
      <img id='weather-icon' src='' alt='' />
      <main id='main-temperature'>
      </main>
      <section id='feels-like'>Feels Like:
      </section>
      <section id='humidity'>
        Humidty:
      </section>
      <section id='wind'>
        Wind:
      </section>
      <section id='wind-gust'>
        Gusts:
      </section>
      <section id='weather-main'>
      </section>
      <section id='location'>
      </section>

    </div>
    <select id='drop-down'>
      <option value=''></option>
      <option value='paris'>Paris</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>
    </select>
    <button id='get-weather-btn'>Get Weather</button>
  </body>
  <script src='./script.js'>
  </script>
</html>

/* file: script.js */

const weatherBtn = document.getElementById('get-weather-btn');

const dropDownMenu = document.getElementById('drop-down'); 

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


dropDownMenu.addEventListener('input', (e) => {
  if(!e.target.value) {
    weatherBtn.disabled = true
    weatherBtn.style.cursor = 'not-allowed'

  }
    weatherBtn.style.cursor = 'pointer'
    weatherBtn.disabled = false

  
  
})

const showWeather = async (city) => {
  getWeather(dropDownMenu.value)
}
async function getWeather (city) {
  try {

 const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}` )
  const data = await res.json()
  console.log(data)
  // console.log(data.weather[0])

  weatherIcon.src = data.weather[0].icon

  data.main.temp ?
  mainTemperature.textContent = data.main.temp + '°' + 'C'
   :   mainTemperature.textContent = 'N/A'

  feelsLike.textContent = 'Feels Like: ' + data.main['feels_like'] || 'N/A' 

  data.main.humidity ?
  humidity.textContent = 'Humidty: ' + data.main.humidity
   : humidity.textContent = 'N/A'
   data.wind.speed ? 
    wind.textContent = 'Wind: ' + data.wind.speed
   : wind.textContent = 'N/A'
  data.wind.gust ? 
    windGust.textContent = 'Gusts: ' + data.wind.gust
  : windGust.textContent = 'N/A'
    weatherMain.textContent = data.weather.main
  return data
  
}catch(error) {
    alert('Something went wrong, please try again later')
  } 
}
weatherBtn.addEventListener('click', () => {
  if(!dropDownMenu.value) {
    return 
  }
  if(dropDownMenu.value == 'paris') {
        alert('Something went wrong, please try again later')
  }
  if(!showWeather()) {
    mainTemperature.textContent = 'N/A'
  }
 
})  

/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

2

image
image480×270 11.6 KB

  • is this “N/A” supposed to be there?

  • get weather" isnt responding on each click!!

perhaps looking into these might be useful, happy coding :slight_smile:

3

yes, because it’s result of undefined value !!

i still don’t get what you mean ??

4

the user story number 11 says:
11. If the data from getWeather are usable, the showWeather function should display the weather data in the corresponding elements. If a certain value from the API is undefined, you should write N/A in the corresponding element.

5

where can i get the location shape that looks like the clock ??

6

if you mean when no choice is choosen ?

user story number 3 says:
3. If no city is selected, pressing the button should do nothing.

7

Your code is not displaying #weather-main or #location.

Why are you doing this?

You are already handling Paris in your weatherBtn listener. All other errors should be logged.

8

here is my updated code
i think i’d realized some of your notice

const weatherBtn = document.getElementById('get-weather-btn');

const dropDownMenu = document.getElementById('drop-down'); 

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


dropDownMenu.addEventListener('input', (e) => {
  if(!e.target.value) {
    weatherBtn.disabled = true
    weatherBtn.style.cursor = 'not-allowed'

  }
    weatherBtn.style.cursor = 'pointer'
    weatherBtn.disabled = false

  
  
})

const showWeather = async (city) => {
  getWeather(dropDownMenu.value)
}
async function getWeather (city) {
  try {

 const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}` )
  const data = await res.json()
  console.log(data)
  weatherIcon.src = data.weather[0].icon
 
  data.main.temp ?
  mainTemperature.textContent = data.main.temp + '°' + 'C'
   : mainTemperature.textContent = 'N/A'

locationI.textContent = dropDownMenu.value
  feelsLike.textContent = 'Feels Like: ' + data.main['feels_like'] || 'N/A' 

  data.main.humidity ?
  humidity.textContent = 'Humidty: ' + data.main.humidity
   : humidity.textContent = 'N/A'
   data.wind.speed ? 
    wind.textContent = 'Wind: ' + data.wind.speed
   : wind.textContent = 'N/A'
  data.wind.gust ? 
    windGust.textContent = 'Gusts: ' + data.wind.gust
  : windGust.textContent = ' N/A'
    weatherMain.textContent = data.weather.main
  return data
   
}catch(error) {
    // alert('Something went wrong, please try again later')
    console.log(`error: ${error}`)
  } 
}
weatherBtn.addEventListener('click', () => {
  if(!dropDownMenu.value) {
    return 
  }
  if(dropDownMenu.value == 'paris') {
      alert('Something went wrong, please try again later')
  }
})
9 
    weatherMain.textContent = data.weather.main
    locationI.textContent = dropDownMenu.value

here iam displaying the weather main
but location element should i show this clock like shape in the example project or can i just display the location’s name from the drop down menu ?

10

For location, you should be using the value returned from the API. Where is the value of #weather-main displayed when you select a city?

11

haha, yes i did it . i did it:slight_smile:
thanks very much for your help