Tell us what’s happening:
I need help checking my code
Test 16, 17 are failing
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.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
</head>
<body>
<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 id="get-weather-btn">Get Weather</button>
<img id="weather-icon">
<p id="main-temperature"></p>
<p id="feels-like"></p>
<p id="humidity"></p>
<p id="wind"></p>
<p id="wind-gust"></p>
<p id="weather-main"></p>
<p id="location"></p>
</body>
<script src="script.js"></script>
</html>
/* file: styles.css */
/* file: script.js */
const citySelect = document.getElementById("city");
const getWeatherBtn = document.getElementById("get-weather-btn");
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 locationElement = document.getElementById("location");
const getWeather = async (city) => {
try {
const response = await fetch(
`https://weather-proxy.freecodecamp.rocks/api/city/${city}`
);
return await response.json();
} catch (error) {
console.log(error)
return undefined
}
};
const showWeather = async (city) => {
const data = await getWeather(city);
if (data === undefined || data.error) {
alert("Something went wrong, please try again later.");
return;
}
weatherIcon.src = data.weather?.[0]?.icon ?? "";
weatherIcon.alt = data.weather?.[0]?.description ?? "";
mainTemperature.textContent = data.main?.temp ?? "N/A";
feelsLike.textContent = data.main?.feels_like ?? "N/A";
humidity.textContent = data.main?.humidity ?? "N/A";
wind.textContent = data.wind?.speed ?? "N/A";
windGust.textContent = data.wind?.gust ?? "N/A";
weatherMain.textContent = data.weather?.[0]?.main ?? "N/A";
locationElement.textContent = data.name ?? "N/A";
};
getWeatherBtn.addEventListener("click", () => {
const city = citySelect.value;
if (!city) {
return;
}
showWeather(city);
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0
Challenge Information:
Build a Weather App - Build a Weather App