I got stuck on requirement test 23, all other requirements passed. please see the error information for assist. 23. If there is an error, your getWeather function should log the error to the console.
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Build a Weather App - Build a Weather App
Attached is the code, Thanks.
const citySelect = document.getElementById('city-select');
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.getE
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Build a Weather App - Build a Weather App
dhess
April 18, 2026, 5:36pm
3
Hi @anthonybassey ,
I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.
Happy coding!
dhess
April 18, 2026, 5:38pm
4
It looks like we’re missing some code. Please try posting your code manually, as follows:
When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add the backticks.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Noted with thanks, the error message for the required test to pass the log still prompting.
// running tests
23. If there is an error, your getWeather function should log the error to the console.
// tests completed
dhess
April 18, 2026, 7:39pm
6
We need your code to help you. Please post it.
const citySelect = document.getElementById('city-select');
const getWeatherBtn = document.getElementById('get-weather-btn');
// Element references
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 locationEl = document.getElementById('location');
// 1. getWeather function - Fixed URL structure for fCC tests
async function getWeather(city) {
try {
// The required API URL for the freeCodeCamp project
const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data;
} catch (error) {
// Requirement 23: Log the error to the console
console.error('Error fetching weather:', error);
return undefined; // Ensure undefined is returned on error
}
}
// 2. showWeather function - Updated for better null handling (Requirements 18-22)
async function showWeather(city) {
if (!city) return;
const data = await getWeather(city);
if (!data || !data.main) {
// Handle error case or no data returned
alert('Something went wrong, please try again later');
return;
}
// Update DOM elements with data or 'N/A'
weatherIcon.src = data.weather[0].icon || '';
mainTemperature.textContent = data.main.temp ? `${data.main.temp}°C` : 'N/A';
feelsLike.textContent = data.main.feels_like ? `Feels like: ${data.main.feels_like}°C` : 'N/A';
humidity.textContent = data.main.humidity ? `Humidity: ${data.main.humidity}%` : 'N/A';
wind.textContent = data.wind.speed ? `Wind: ${data.wind.speed} m/s` : 'N/A';
windGust.textContent = data.wind.gust ? `Gust: ${data.wind.gust} m/s` : 'N/A';
weatherMain.textContent = data.weather[0].main || 'N/A';
locationEl.textContent = data.name ? `${data.name}, ${data.sys.country}` : 'N/A';
}
// Event Listener
getWeatherBtn.addEventListener('click', () => {
const selectedCity = citySelect.value;
if (selectedCity) {
showWeather(selectedCity);
}
});
Please, find the attached code for your assiatance.
dhess
April 18, 2026, 7:50pm
9
Please also post your HTML and CSS.
dhess
April 18, 2026, 7:58pm
10
Can’t test without the rest of your code, but for now, try removing this line.
HTML FILE
<!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>
<h1>Weather App</h1>
<select id="city-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">Get Weather</button>
<div id="weather-display" style="display:none;">
<img id="weather-icon" src="" alt="Weather Icon">
<p id="location"></p>
<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>
</div>
<script src="script.js"></script>
</body>
</html>
CSS FILE
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
margin: 0;
}
.container {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
text-align: center;
width: 90%;
max-width: 400px;
}
select, button {
padding: 10px;
margin: 10px 0;
width: 100%;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover { background-color: #0056b3; }
.hidden { display: none; }
#weather-display { margin-top: 20px; }
#weather-icon { width: 100px; height: 100px; }
/* Media Query for Mobile */
@media (max-width: 480px) {
.container { padding: 1rem; }
h1 { font-size: 1.5rem; }
}
Please, see the above files as requested for your perusing.
I have removed the code and test run it, still requesting for the appropriate code to pass the build.
dhess
April 18, 2026, 8:12pm
14
Try removing everything in that catch block except the log and only include error in the log.
I have removed the code, still prompting same message.
async function getWeather(city) {
try {
// The required API URL for the freeCodeCamp project
const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching weather:', error);
}
}
dhess
April 18, 2026, 8:33pm
16
You didn’t follow the instruction fully.
Like this, It’s still prompting same message.
async function getWeather(city) {
try {
// The required API URL for the freeCodeCamp project
const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data;
} catch (error) {
console.error('error');
}
}
I have been on this same project for two days just the same error trying different ideas to figure it out on my own it did not work! and I still have two more to fix so I can proceed to the Frontend development. your assistance will means a lot.
Thumbs up, I got rid of the string and it passed. Thanks a ton.
