So, everything looks to be alright when I press the button, but i don’t understand why steps 18-22 are still not being fulfilled.
I checked the web console, but it said something about a non-valid URL.
I surmised it might have something to do with the space between the city words?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="weather-container">
<div id="weather-display">
<div id="current-weather">
<img id="weather-icon" src=""/>
<p id="weather-main"></p>
</div>
<p class="main-temperature">Main Temp: <span id="main-temperature"></span></p>
<p class="feels-like">Feels like: <span id="feels-like"></span></p>
<p class="humidity">Humidity: <span id="humidity"></span></p>
<p class="wind">Wind: <span id="wind"></span></p>
<p class="wind-gust">Gusts: <span id="wind-gust"></span></p>
<p class="location">Location: <span id="location"></span></p>
</div>
<div id="weather-selector">
<p>Get Weather:</p>
<select id="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>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
body{
font-family: "Roboto Mono", system-ui;
}
#weather-container{
display: flex;
flex-direction: column-reverse;
}
#weather-selector{
border: 5px solid black;
padding: 15px;
}
#weather-display{
border: 5px solid black;
padding: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
#current-weather{
grid-column: 1 / -1;
margin: auto;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
#weather-icon{
width: 5rem;
}
#weather-main{
font-size: 2rem;
font-weight: 800;
}
#weather-display > p > span{
font-size: 1.5rem;
}
const getWeatherBtn = document.getElementById("get-weather-btn");
const weatherIcon = document.getElementById("weather-icon");
const mainTemp = document.getElementById("main-temperature");
const feelsLike = document.getElementById("feels-like");
const humiditySpan = document.getElementById('humidity');
const windSpan = document.getElementById('wind');
const gustSpan = document.getElementById('wind-gust');
const mainWeather = document.getElementById("weather-main");
const locationSpan = document.getElementById("location");
const citySelector = document.getElementById("cities");
async function getWeather(city){
try{
let res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
if (!res.ok){
throw new Error("Error occurred! Weather data does not exist!");
}
let data = await res.json();
return data;
} catch(err){
console.error(err);
return null;
}
}
async function showWeather(city){
const data = await getWeather(city);
if (!data || !data.weather){
alert("Something went wrong, please try again later");
return;
}
//console.log(data);
const { name, weather, main, wind} = data;
const [{icon, main: main_weather}] = weather;
const {temp, feels_like, humidity} = main;
const {speed, gust} = wind;
if (icon === undefined){
weatherIcon.alt = "N/A";
} else {
weatherIcon.src = icon;
}
mainTemp.innerHTML = (temp !== undefined) ? `${temp}°C` : "N/A";
feelsLike.innerHTML = (feels_like !== undefined) ? `${feels_like}°C` : "N/A";
humiditySpan.innerHTML = (humidity !== undefined) ? `${humidity}%` : "N/A";
windSpan.innerHTML = (speed !== undefined) ? `${speed} m/s` : "N/A";
gustSpan.innerHTML = (gust !== undefined) ? `${gust} m/s` : "N/A";
mainWeather.innerHTML = (main_weather !== undefined) ? `${main_weather}` : "N/A";
locationSpan.innerHTML = (name !== undefined) ? `${name}` : "N/A";
}
let city = "";
citySelector.addEventListener("change", (e) => {
city = e.target.value;
})
getWeatherBtn.addEventListener("click", () => {
if (city !== ""){
showWeather(city);
}
})
