Tell us what’s happening:
I need a little help. My code seems to be working like the example, but tests 18-22 aren’t passing (they are all the same, just with different city names):
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.
Does anyone know what’s wrong? Any help is really appreciated!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="select-container">
<h1>Weather For:</h1>
<div id="selection-container">
<select id="location-select">
<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">Select</button>
</div>
</div>
<div class="divider"></div>
<div id="temp-container">
<div id="location"></div>
<div id="temp-icon">
<div id="main-temperature"></div>
<img id="weather-icon" src=""/>
</div>
</div>
<div class="divider"></div>
<div id="stats">
<div id="temp-stats" class="stat-container">
<h3>Temp Stats</h3>
<div id="low" class="stat"></div>
<div id="high" class="stat"></div>
<div id="humidity" class="stat"></div>
<div id="feels-like" class="stat"></div>
</div>
<div id="other" class="stat-container">
<h3>Wind Stats</h3>
<div id="weather-main" class="stat"></div>
<div id="wind" class="stat"></div>
<div id="wind-speed" class="stat"></div>
<div id="wind-gust" class="stat"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const locationSelect = document.getElementById('location-select');
const getWeatherBtn = document.getElementById('get-weather-btn');
//
const locationDisplay = document.getElementById('location');
const mainTemp = document.getElementById('main-temperature');
const weatherImg = document.getElementById('weather-icon');
const low = document.getElementById('low');
const high = document.getElementById('high');
const humidity = document.getElementById('humidity');
const feelsLike = document.getElementById('feels-like');
const weatherType = document.getElementById('weather-main');
const windDeg = document.getElementById('wind');
const windSpeed = document.getElementById('wind-speed');
const windGust = document.getElementById('wind-gust');
//
async function getWeather(city) {
try {
const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
const data = await res.json();
return data;
} catch(err) {
console.log(err);
}
}
async function showWeather(city) {
try {
const data = await getWeather(city);
if (!data || !data.weather || !data.main || !data.wind) {
alert("Something went wrong, please try again later");
return;
}
const { weather, main, wind, name } = data;
locationDisplay.textContent = name || "";
mainTemp.textContent = main?.temp || "N/A";
weatherImg.src = weather[0]?.icon || "";
low.textContent = main?.temp_min || "N/A";
high.textContent = main?.temp_max || "N/A";
humidity.textContent = main?.humidity || "N/A";
feelsLike.textContent = main?.feels_like || "N/A";
weatherType.textContent = weather[0]?.main || "N/A";
windDeg.textContent = wind?.deg || "N/A";
windSpeed.textContent = wind?.speed || "N/A";
windGust.textContent = wind?.gust || "N/A";
} catch(err) {
console.log(err);
}
}
//
getWeatherBtn.addEventListener("click", () => {
const city = locationSelect.value;
showWeather(city);
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0
Challenge Information:
Build a Weather App - Build a Weather App