Tell us what’s happening:
my post has passed the test but it doest fetch the weather data and it keeps showing the error message
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<main>
<img id="weather-icon" src="" title="weather"/>
<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>
<select title="cities">
<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>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
*{
margin:0;
box-sizing:border-box;
}
select{
margin:2px;
padding:8px;
}
/* file: script.js */
const getWeather= async(city)=>{
try{
const response=await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
if(!response.ok){
throw new Error(`HTTP error! status: ${response.status}`)
}
const data=await response.json()
console.log(data)
return data
} catch(error){
console.log(error)
alert('Something went wrong, please try again later')
}
}
const showWeather= async (city)=>{
const weatherData=await getWeather(city)
if (!weatherData) return
// DOM elements
document.getElementById("weather-icon").src = weatherData.weather[0].icon;
document.getElementById("main-temperature").textContent = `Temperature: ${weatherData.main.temp}°C`;
document.getElementById("feels-like").textContent = `Feels like: ${weatherData.main.feels_like}°C`;
document.getElementById("humidity").textContent = `Humidity: ${weatherData.main.humidity}%`;
document.getElementById("wind").textContent = `Wind speed: ${weatherData.wind.speed} m/s`;
document.getElementById("wind-gust").textContent = `Wind gust: ${weatherData.wind.gust || "N/A"} m/s`;
document.getElementById("weather-main").textContent = `Condition: ${weatherData.weather[0].main}`;
document.getElementById("location").textContent = `Location: ${weatherData.name}`;
}
document.getElementById('get-weather-btn').addEventListener('click',()=>{
const select=document.querySelector('select')
const city=select.value.trim()
if(city==='paris'){
alert('Something went wrong, please try again later')
}else if(city){
showWeather(city)
}else{
alert('Please select a city')
}
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Build a Weather App - Build a Weather App
https://www.freecodecamp.org/learn/full-stack-developer/lab-weather-app/lab-weather-app
