Tell us what’s happening:
Hey, so I am failing tests #19-23, which are the ones that say to display the data. It looks like the data displays perfectly fine but it still fails. Any idea on what I should do to fix this?
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>
<h1 class="title">Weather App</h1>
<main>
<div class="container" id="weather-container">
<img id="weather-icon" src="" alt=""/>
</div>
<div class="container" id="weather-main">
</div>
<div class="container" id="location">
</div>
<div class="container" id="main-temperature">
</div>
<div class="container" id="feels-like">
</div>
<div class="container" id="humidity">
</div>
<div class="container" id="wind">
</div>
<div class="container" id="wind-gust">
</div>
<div class="container" id="input-container">
<div>
<label for="city">Select a city:</label>
<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>
<button type="button" id="get-weather-btn">Get Weather</button>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const weatherIcon = document.getElementById("weather-icon");
const getWeatherBtn = document.getElementById("get-weather-btn");
const selectCity = document.getElementById("city");
const mainTemperatureContainer = document.getElementById("main-temperature");
const feelsLikeContainer = document.getElementById("feels-like");
const humidityContainer = document.getElementById("humidity");
const windContainer = document.getElementById("wind");
const windGustContainer = document.getElementById("wind-gust");
const weatherMainContainer = document.getElementById("weather-main");
const locationContainer = document.getElementById("location");
async function getWeather(city) {
try{
const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
const weatherData = await res.json();
return weatherData;
} catch(err){
console.error(err);
}
}
async function showWeather(city) {
try{
const cityData = await getWeather(city);
// console.log(cityData);
if(!cityData){
alert("Something went wrong, please try again later");
throw new Error();
}
const {main, weather, wind} = cityData;
if(weather){
weatherIcon.setAttribute("src", weather[0]?.icon);
weatherMainContainer.innerHTML += weather[0].main ? `<h2>${weather[0].main}</h2>` : "<h2>N/A</h2>";
}
if(main){
mainTemperatureContainer.innerHTML = main.temp ? `<p>Temperature: ${main.temp} °C</p>` : "<p>N/A</p>";
feelsLikeContainer.innerHTML = main.feels_like ? `<p>Feels like: ${main.feels_like} °C</p>` : "<p>N/A</p>";
humidityContainer.innerHTML = main.humidity ? `<p>Humidity: ${main.humidity}</p>` : "<p>N/A</p>";
}
if(wind){
windContainer.innerHTML += wind.speed ? `<p>Wind: ${wind.speed} m/s</p>` : "<p>N/A</p>"
windContainer.innerHTML += wind.gust ? `<p>Wind Gust: ${wind.gust}</p>`: "<p>N/A</p>"
}
locationContainer.innerHTML = `<h3>${cityData.name}</h3>`;
} catch(err){
console.log(err);
}
}
getWeatherBtn.addEventListener("click", () => {
if(!selectCity.value){
weatherIcon.setAttribute("src", '');
weatherMainContainer.innerHTML = '';
humidityContainer.innerHTML = ''
feelsLikeContainer.innerHTML = '';
mainTemperatureContainer.innerHTML = '';
windContainer.innerHTML = '';
locationContainer.innerHTML = '';
return;
}
showWeather(selectCity.value);
selectCity.value = '';
})
/* file: styles.css */
:root{
--aquamarine: #186f59;
--light-aquamarine: #5bfcd4;
--dark-blue: #317a87;
}
h1{
text-align: center;
}
.container {
text-align: center;
width: 90%;
max-width: 680px;
}
h1,
.container {
margin: 20px auto;
}
button{
cursor: pointer;
background-color: var(--light-aquamarine);
border: 3px solid var(--aquamarine);
min-height: 24px;
margin-bottom: 10px;
}
button:hover{
background-image: linear-gradient(var(--light-aquamarine), var(--dark-blue))
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0
Challenge Information:
Build a Weather App - Build a Weather App
