Tell us what’s happening:
I have these functions yet these simple tests are failing, what is going on
13. You should have a showWeather function.
14. You should have a getWeather function.
15. The getWeather function should accept a city as its only argument and return the JSON from the Weather API.
16. The showWeather function should call the getWeather function to get the weather data.
17. The showWeather function should manage the case in which getWeather returns undefined.
18. When New York is selected the showWeath
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
</head>
<body>
<button id="get-weather-btn"></button>
<select id="select-city">
<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>
<img id="weather-icon"/>
<h2 id="main-temperature"></h2>
<span id="feels-like"></span>
<div id="humidity"></div>
<div id="wind"></div>
<span id="wind-gust"></span>
<div id="weather-main"></div>
<div id="location"></div>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const getWeatherBtn = document.getElementById("get-weather-btn");
const selectCity = document.getElementById("select-city");
const weatherContainer = document.getElementById("weather-container");
const getWeather=async(city)=>{
try{const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
const data = await res.json();
return data
}catch(error){alert("Something went wrong, please try again later");
return undefined;
}
}
const showWeather=async(city)=>{
const data = await getWeather(city);
if(!data)
{
return;
}
weatherContainer.innerHTML =`<img id="weather-icon" src="${data.weather?.[0]?.icon ?? ""}"/>
<h2 id="main-temperature">${data.main?.temp?? "N/A"}°C</h2>
<span id="feels-like">${data.main?.["feels_like"] ?? "N/A"}°C</span>
<div id="humidity">${data.main?.humidity ?? "N/A"}</div>
<div id="wind">${data.wind?.speed ?? "N/A"}m/s</div>
<span id="wind-gust">${data.wind?.gust ?? "N/A"}</span>
<div id="weather-main">${data.weather?.[0]?.main ?? "N/A"}</div>
<div id="location">${data.name ?? "N/A"}</div>
`
}
getWeatherBtn.addEventListener("click",()=>{ if(!selectCity.value) return;
showWeather(selectCity.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