Tell us what’s happening:
Hello I don’t undestand why test 13 to 17 and test 23 don’t work.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<header>
<div>
<img class="location-icon" src="location2.svg" alt="Location Icon">
<h1 id="location">Tokyo</h1>
</div>
<p id="date">Mercredi, le 11 Mai</p>
</header>
<section class="first-part">
<p id="main-temperature">21°C</p>
<img id="weather-icon" src="nuage.svg">
<p id="weather-main">Clear</p>
</section>
<section class="second-part">
<div id="feels-like"></div>
<div id="humidity"></div>
<div id="wind-gust"></div>
<div id="wind"></div>
</section>
<section class="third-part">
<select>
<option value="" selected></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">Obtenir la météo</button>
</section>
<script src="script.js" defer></script>
</body>
</html>
/* file: styles.css */
*{
box-sizing: border-box;
margin:0px;
font-size: 16px;
}
body{
background-color:#111010;
}
html{
font-size: 16px;
color: white;
font-family:'Segoe UI', Helvetica, Geneva, Verdana, sans-serif;
}
header{
display: flex;
flex-direction: column;
gap:4px;
align-items: center;
justify-content: flex-start;
}
header div:first-child{
display: flex;
}
h1{
font-size: 30px;
}
.location-icon{
width: 27px;
height: 40px;
}
#weather-icon{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
#main-temperature{
text-align: center;
font-weight: bold;
font-size: 64px;
padding:0px;
margin-bottom: 10px;
}
.container{
background-image: linear-gradient(to bottom, #00A3FF 0%, #0057FF 100%);
width:90%;
max-width: 600px;
height: 640px;
margin: auto;
display: flex;
flex-direction: column;
height: 100vh;
border-radius: 30px;
padding: 10px 19px;
}
#weather-main{
text-align: center;
font-size: 35px;
margin-top:-10px;
}
.second-part{
width: 95%;
height: 150px;
background-color:#111010;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 10px;
border-radius: 10px;
gap: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 20px;
}
.second-part div{
border: 1px solid #1F6CE0;
border-radius:15px;
}
.third-part{
display: flex;
justify-content:space-around;
height: 40px;
align-items: stretch;
}
.third-part *{
width: 130px;
border-radius: 10px;
border: 1px solid transparent;
font-weight: 900;
}
#get-weather-btn{
font-size: 14px;
background-color: #13701B;
color: white;
cursor:pointer;
}
@media screen and (min-width: 400px){
.second-part{
grid-template-columns: repeat(4, 1fr);
height: 100px;
}
.container{
gap: 10px;
}
}
/* file: script.js */
async function getWeather(city){
try{
const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
if(!response.ok) throw new Error("Error fetching weather data")
const data = await response.json();
return data;
} catch (error) {
console.error(error);
return;
}
}
const currentLocation=document.getElementById("location");
const date=document.getElementById("date");
const temperature=document.getElementById("main-temperature");
const weatherIcon=document.getElementById("weather-icon");
const weatherMain=document.getElementById("weather-main");
const parameters=document.querySelector(".second-part").children;
async function showWeather(){
const selectedCity= document.querySelector('select').value;
if(!selectedCity) return;
const weatherData= await getWeather(selectedCity);
if(weatherData===undefined){
alert("Something went wrong, please try again later");
return;
};
const {weather, main, visibility, wind, name} = weatherData;
currentLocation.textContent=name;
date.textContent= new Date().toLocaleString('fr-FR', {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric"
});
temperature.textContent=main.temp + "°C";
weatherIcon.src=weather[0].icon;
weatherMain.textContent=weather[0].main;
parameters[0].textContent=main.feels_like ? main.feels_like + "°C": 'N/A'
parameters[1].textContent=main.humidity ? main.humidity + "%": 'N/A'
parameters[2].textContent=wind.gust ? wind.gust + " m/s": 'N/A'
parameters[3].textContent=wind.speed ? wind.speed + " m/s": 'N/A'
}
const getWeatherButton=document.getElementById("get-weather-btn");
getWeatherButton.addEventListener("click", showWeather);
Your browser information:
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
Challenge Information:
Build a Weather App - Build a Weather App