Tell us what’s happening:
i can not pass test 23.All the other tests are passing except this one
Your code so far
<!-- file: index.html<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 40px;
max-width: 500px;
width: 100%;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
h1 {
color: white;
font-size: 2.5rem;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.input-section {
margin-bottom: 30px;
}
select {
width: 100%;
padding: 15px 20px;
font-size: 1.1rem;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
outline: none;
transition: all 0.3s ease;
cursor: pointer;
}
select:focus {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
button {
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
border: none;
padding: 15px 40px;
font-size: 1.1rem;
font-weight: bold;
color: white;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(-1px);
}
.weather-info {
display: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 30px;
margin-top: 30px;
text-align: left;
}
.weather-header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
text-align: center;
}
#weather-icon {
width: 80px;
height: 80px;
margin-right: 20px;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.temperature-section {
text-align: center;
}
#main-temperature {
font-size: 3rem;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin: 10px 0;
}
#weather-main {
font-size: 1.3rem;
color: #f0f0f0;
margin-bottom: 5px;
text-transform: capitalize;
}
#location {
font-size: 1.1rem;
color: #e0e0e0;
margin-bottom: 25px;
}
.weather-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.detail-item {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 10px;
text-align: center;
}
.detail-label {
font-size: 0.9rem;
color: #d0d0d0;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value {
font-size: 1.2rem;
font-weight: bold;
color: white;
}
.loading {
color: white;
font-size: 1.1rem;
margin-top: 20px;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 2rem;
}
#main-temperature {
font-size: 2.5rem;
}
.weather-details {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🌤️ Weather Station</h1>
<div class="input-section">
<select id="city-select">
<option value="">Select a city...</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 class="weather-info" id="weather-info">
<div class="weather-header">
<img id="weather-icon" alt="Weather icon">
<div class="temperature-section">
<div id="main-temperature"></div>
<div id="weather-main"></div>
<div id="location"></div>
</div>
</div>
<div class="weather-details">
<div class="detail-item">
<div class="detail-label">Feels Like</div>
<div class="detail-value" id="feels-like"></div>
</div>
<div class="detail-item">
<div class="detail-label">Humidity</div>
<div class="detail-value" id="humidity"></div>
</div>
<div class="detail-item">
<div class="detail-label">Wind Speed</div>
<div class="detail-value" id="wind"></div>
</div>
<div class="detail-item">
<div class="detail-label">Wind Gust</div>
<div class="detail-value" id="wind-gust"></div>
</div>
</div>
</div>
<div class="loading" id="loading" style="display: none;">
Fetching weather data...
</div>
</div>
<script>
// Async function to fetch weather data
async function getWeather(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 weatherData = await response.json();
return weatherData;
} catch (error) {
console.log(error);
throw error;
}
}
// Async function to display weather data
async function showWeather(city) {
const loadingElement = document.getElementById('loading');
const weatherInfo = document.getElementById('weather-info');
if (!city) return;
// Show loading state
loadingElement.style.display = 'block';
weatherInfo.style.display = 'none';
try {
const weatherData = await getWeather(city);
// Hide loading
loadingElement.style.display = 'none';
// Display weather data
displayWeatherData(weatherData);
weatherInfo.style.display = 'block';
} catch (error) {
// Hide loading
loadingElement.style.display = 'none';
alert('Something went wrong, please try again later');
}
}
// Function to display weather data in the UI
function displayWeatherData(data) {
// Helper function to get value or N/A if undefined
const getValue = (value, suffix = '') => {
return value !== undefined ? value + suffix : 'N/A';
};
// Set weather icon
const weatherIcon = document.getElementById('weather-icon');
weatherIcon.src = data.weather?.[0]?.icon || '';
// Set main temperature
const mainTemp = document.getElementById('main-temperature');
mainTemp.textContent = getValue(data.main?.temp, '°C');
// Set weather main description
const weatherMain = document.getElementById('weather-main');
weatherMain.textContent = getValue(data.weather?.[0]?.main);
// Set location
const location = document.getElementById('location');
location.textContent = getValue(data.name);
// Set feels like temperature
const feelsLike = document.getElementById('feels-like');
feelsLike.textContent = getValue(data.main?.feels_like, '°C');
// Set humidity
const humidity = document.getElementById('humidity');
humidity.textContent = getValue(data.main?.humidity, '%');
// Set wind speed
const wind = document.getElementById('wind');
wind.textContent = getValue(data.wind?.speed, ' m/s');
// Set wind gust
const windGust = document.getElementById('wind-gust');
windGust.textContent = getValue(data.wind?.gust, ' m/s');
}
// Event listener for the get weather button
document.getElementById('get-weather-btn').addEventListener('click', () => {
const citySelect = document.getElementById('city-select');
const selectedCity = citySelect.value;
// Only proceed if a city is selected
if (selectedCity) {
showWeather(selectedCity);
}
});
// Allow Enter key to trigger weather fetch
document.getElementById('city-select').addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
const selectedCity = event.target.value;
if (selectedCity) {
showWeather(selectedCity);
}
}
});
</script>
</body>
</html> -->
/* file: styles.css */
/* file: script.js */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.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