Tell us what’s happening:
im not able to pass this test 23. If there is an error, your getWeather function should log the error to the console.
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>
<button id="get-weather-btn">Get</button>
<select id="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">
<img id="weather-icon" src="" alt="icon">
<p id="main-temperature">main</p>
<p id="feels-like">feels</p>
<p id="humidity">humid</p>
<p id="wind">wind</p>
<p id="wind-gust">gust</p>
<p id="weather-main">weather</p>
<p id="location">loc</p>
</div>
<p id="error"></p>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
.hidden{
display: none;
}
/* file: script.js */
const weather=document.getElementById("weather");
weather.classList.add("hidden");
const cit=document.getElementById("city");
const errorm=document.getElementById("error");
const button=document.getElementById("get-weather-btn");
async function getWeather(city){
console.log("running");
console.log(city);
try{
const res=await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
if(res.ok){
console.log("ok");
const resp=await res.json();
return resp;
}
}catch(error){
console.error(error);
}
}
async function showWeather(city){
const ans=await getWeather(city);
console.log(ans);
if(ans==undefined){
weather.classList.add("hidden");
errorm.innerText="Something went wrong, please try again later";
alert("Something went wrong, please try again later");
}else{
errorm.innerText="";
weather.classList.remove("hidden");
console.log("run")
const icon=document.getElementById("weather-icon");
const main=document.getElementById("main-temperature");
const feels=document.getElementById("feels-like");
const humid=document.getElementById("humidity");
const wind=document.getElementById("wind");
const gust=document.getElementById("wind-gust");
const wmain=document.getElementById("weather-main");
const loc=document.getElementById("location");
icon.src=ans.weather[0].icon?ans.weather[0].icon:"N/A";
main.innerText=ans.main.temp?ans.main.temp:"N/A";
feels.innerText=ans.main.feels_like?ans.main.feels_like:"N/A";
humid.innerText=ans.main.humidity?ans.main.humidity:"N/A";
gust.innerText=ans.wind.gust?ans.wind.gust:"N/A";
wmain.innerText=ans.weather[0].main?ans.weather[0].main:"N/A";
loc.innerText=ans.name?ans.name:"N/A";
wind.innerText=ans.wind.speed?ans.wind.speed:"N/A";
}
}
button.addEventListener("click",()=>{
if(cit.value==""){
console.log("empty");
}else{
showWeather(cit.value);
}
});
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