Tell us what’s happening:
I keep failing test 13, 14, 15, 16, 17, 23 and I cannot figure out why. Test 13 told me there is no getWeather function even though I wrote it in the script.js
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
</head>
<body>
<button id="get-weather-btn">Get Weather</button>
<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>
<img id="weather-icon">
<div id="weather-main"></div>
<div id="main-temperature"></div>
<div id="feels-like"></div>
<div id="humidity"></div>
<div id="wind"></div>
<div id="wind-gust"></div>
<div id="location"></div>
<script src="script.js" defer></script>
</body>
</html>
/* file: script.js */
const getweatherBtn = document.getElementById("get-weather-btn");
const citySelect = document.querySelector("select");
const weatherIcon = document.getElementById("weather-icon");
const weatherMain = document.getElementById("weather-main");
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 cityName = document.getElementById("location");
async function getWeather(city) {
try {
const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
if (!response.ok) {
throw new Error(response.status);
}
const data = await response.json();
return data;
} catch (error) {
console.log(error);
}
}
async function showWeather(city) {
const weather = await getWeather(city);
if(!weather) {
alert("Something went wrong, please try again later");
return;
}
weatherIcon.src = weather["weather"] ?. [0] ?. ["icon"] ?? "";
weatherMain.textContent = weather["weather"] ?. [0] ?. ["main"] ?? "N/A";
mainTemperature.textContent = `Main Temperature: ${weather["main"] ?. ["temp"] ?? "N/A"}°C`;
feelsLike.textContent = `Feels Like: ${weather["main"] ?. ["feels_like"] ?? "N/A"}°C`;
humidity.textContent = `Humidity: ${weather["main"] ?. ["humidity"] ?? "N/A"}%`;
wind.textContent = `Wind: ${weather["wind"] ?. ["speed"] ?? "N/A"}`;
windGust.textContent = `Gust :${weather["wind"] ?. ["gust"] ?? "N/A"}`;
cityName.textContent = weather["name"];
}
getweatherBtn.addEventListener("click", ()=>{
if(citySelect.value) {
showWeather(citySelect.value);
}
})
/* file: styles.css */
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
Challenge Information:
Build a Weather App - Build a Weather App