I am unable to pass test 23 despite changing it several times. It seems correct to me so I don’t understand the issue.
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
const weatherUrl = 'https://weather-proxy.freecodecamp.rocks/api/city/'
const selectedCity = document.getElementById("city");
const getWeatherBtn = document.getElementById("get-weather-btn");
const cityName = document.getElementById("location");
const temperature = document.getElementById("main-temperature");
const weatherMain = document.getElementById("weather-main");
const humidity = document.getElementById("humidity");
const feelsLike = document.getElementById("feels-like");
const wind = document.getElementById("wind");
const windGusts = document.getElementById("wind-gust");
const weatherIcon = document.getElementById("weather-icon");
const mainIcon = document.getElementById("main-icon");
const naStr = "N/A";
async function showWeather(city)
{
//console.log(city);
if(city === "paris")
{
alert("Something went wrong, please try again later");
return;
}
try
{
const res = await getWeather(city);
if(!res)
{
//show N/A
return;
}
//conditions.textContent = res.weather[main];
cityName.textContent = res.name || naStr;
weatherMain.textContent = res.weather[0].main || naStr;
temperature.textContent = (res.main.temp + "\u00B0C") || naStr;
humidity.textContent = res.main.humidity || naStr;
feelsLike.textContent = res.main.feels_like || naStr;
wind.textContent = res.wind.speed || naStr;
windGusts.textContent = res.wind.gust || naStr;
console.log(res.weather[0].icon);
weatherIcon.src = res.weather[0].icon || naStr;
}
catch(err)
{
alert("Something went wrong, please try again later");
}
}
async function getWeather(city)
{
try
{
const res = await fetch(`${weatherUrl}${city}`);
if(!res.ok)
{
throw new Error(`http error! status: ${res.status}`);
}
const data = await res.json();
return data;
}
catch (error)
{
console.error("error: ", error);
}
}
getWeatherBtn.addEventListener("click", (e) => handleGetWeatherClick(e));
function handleGetWeatherClick(e)
{
if(selectedCity.value === "")
{
console.log("city not selected");
return;
}
showWeather(selectedCity.value);
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Build a Weather App - Build a Weather App
ILM
February 11, 2026, 4:41pm
2
please share your html too
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link rel="stylesheet" href="./styles.css"/>
</head>
<body>
<main>
<div id="main-display-div">
<div id="location">name of city</div>
<div class="flex-item" class="test"><span id="main-temperature">Temperature</span><span id="weather-main">Conditions</span></div>
<div class="divider flex-item"></div>
<div class="flex-item"><span id="humidity">humidity</span><span id="feels-like">feels like</span></div>
<div>
<div class="flex-item"><span id="wind">wind</span><img id="weather-icon"></div>
<div class="flex-item"><span id="wind-gust">gusts</span></div>
</div>
</div>
<div id="weather-div">
<div>
<span class="no-pad">
<label for="city">Weather for:</label>
<select name="city" 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="london">London</option>
<option value="tokyo">Tokyo</option>
</select>
</span><button id="get-weather-btn" class="btn">Get </button></div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
here it is but I don’t see how that changes 23. If there is an error, your getWeather function should log the error to the console. ? The HTML shouldn’t have anything to do with that test, right? Everything else has passed except the error throwing.
dhess
February 11, 2026, 4:52pm
4
I don’t see what I’m missing. My error catching is set up very similarly to this:async function fetchUserData() { try { let response = await fetch(`https://api.example.com/users`); let userData = await response.json(); console.log(userData); } catch (error) { console.log("Error fetching user data:", error); } }
dhess
February 11, 2026, 4:57pm
6
Are you sure you’re doing this?
I’m awaiting the JSON reponse after awaiting the fetch and checking if the response if OK from awaiting the fetch. Is that not correct?
I even revised it for testing and it’s wrong still?
async function getWeather(city)
{
try
{
let res = await fetch(`${weatherUrl}${city}`);
let data = await res.json();
return data;
}
catch (error)
{
console.error("error: ", error);
alert("Something went wrong, please try again later");
//return undefined;
}
}
console says this, I don’t understand: n {message: “expected 'error: ’ to include ‘This is a test error’”, showDiff: false, actual: 'error: ', expected: undefined, operator: ‘strictEqual’, …}
OK so they literally want catch(err)
{
alert("Something went wrong, please try again later");
console.error(err);
}
and if there’s anything else, it doesn’t pass. That was a lot of work to fix a very small bug based on what the test expected.
dhess
February 11, 2026, 5:14pm
11
I apologize. I was looking at your showWeather function, not your getWeather function, where you are waiting for json. More coffee, please.
No worries! Glad I figured it out.
system
March 11, 2026, 5:18pm
13
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
