Tell us what’s happening:
I am at a loss. I can not get this code to pass several of the tests even though it seems to function as intended. I have rewritten the code with different approaches but the same issues persist. #4, #17, #18,#20,#21,#23
Your code so far
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="weather-container">
<div class="weather-info-container hidden">
<div id="location" class="main-weather-location">
<span class="location-label title">-New York-</span>
</div>
<div class="header-container">
<div id="main-temperature" class="main-temp-container">
<span class="main-weather-text header">15.25 C</span>
</div>
<div class="main-weather-img-container">
<img id="weather-icon" class="img-weather-icon" src="" alt="" />
</div>
<div id="weather-main">
<span class="weather-main-text header">Clear</span>
</div>
</div>
<div class="divider"></div>
<div class="main-container">
<div id="humidity">
<span class="main-humidiy-text main">Humidity: 50%</span>
</div>
<div id="feels-like">
<span class="main-feels-like-text main">Feels Like: 30.2 C</span>
</div>
</div>
<div class="divider"></div>
<div class="wind-container">
<div class="wind-elements">
<div id="wind">
<span class="wind-text main">Wind: 5.3 m/s</span>
</div>
<div id="wind-gust">
<span class="wind-gust-text main">Gusts: 9.8 m/s</span>
</div>
</div>
<div class="direction-container"></div>
</div>
</div>
</div>
<div class="btn-container">
<span class="weather-text-span">Weather For:</span>
<select name="location" id="location-selector" class="location-selector">
<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-forecast" class="forecast-btn">Get Forcast</button>
</div>
<script src="script.js"></script>
</body>
</html>
-->
/* 'use strict';
const getWeather = async function (city) {
try {
const res = await fetch(
`https://weather-proxy.freecodecamp.rocks/api/city/${city}`
);
const data = await res.json();
if (!res.ok)
throw new Error('Something went wrong, please try again later');
return data;
} catch (err) {
console.log(err);
}
};
const showWeather = async function (city) {
try {
const data = await getWeather(city);
if (!data) {
throw new Error();
}
const weatherInfoContainer = document.querySelector(
'.weather-info-container'
);
// console.log(data);
const markup = `
<div id="location" class="main-weather-location">
<span class="location-label title">${
!data.name ? 'N/A' : data.name
}</span>
</div>
<div class="header-container">
<div id="main-temperature" class="main-temp-container">
<span class="main-weather-text header">${
!data.main.temp ? 'N/A' : data.main.temp + ' C'
}</span>
</div>
<div class="main-weather-img-container">
<img id="weather-icon" class="img-weather-icon" src="${
!data.weather[0].icon ? 'N/A' : data.weather[0].icon
}" alt="${
!data.weather[0].description ? 'N/A' : data.weather[0].description
}" />
</div>
<div id="weather-main">
<span class="weather-main-text header">${
!data.weather[0].main ? 'N/A' : data.weather[0].main
}</span>
</div>
</div>
<div class="divider"></div>
<div class="main-container">
<div id="humidity">
<span class="main-humidiy-text main">Humidity: ${
!data.main.humidity ? 'N/A' : data.main.humidity + '%'
}</span>
</div>
<div id="feels-like">
<span class="main-feels-like-text main">Feels Like: ${
!data.main.feels_like ? 'N/A' : data.main.feels_like + ' C'
}</span>
</div>
</div>
<div class="divider"></div>
<div class="wind-container">
<div class="wind-elements">
<div id="wind">
<span class="wind-text main">Wind: ${
!data.wind.speed ? 'N/A' : data.wind.speed + ' m/s'
}</span>
</div>
<div id="wind-gust">
<span class="wind-gust-text main">Gusts: ${
!data.wind.gust || data.wind.gust === undefined
? 'N/A'
: data.wind.gust + 'm/s'
}</span>
</div>
</div>
<div class="direction-container"></div>
</div>
`;
weatherInfoContainer.innerHTML = markup;
weatherInfoContainer.classList.remove('hidden');
} catch (err) {
const element = document.querySelector('.weather-info-container');
element.innerHTML =
'<span class="msg">Something went wrong, please try again later<span>';
element.classList.remove('hidden');
console.log(err);
}
};
document.getElementById('get-forecast').addEventListener('click', function () {
const selection = document.getElementById('location-selector');
if (selection.value === '') return;
showWeather(selection.value);
selection.value = '';
});
*/
/* * {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
font-family: sans-serif;
}
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(
0deg,
rgb(255 254 224),
rgb(204 242 255) 20%,
rgb(87 213 255) 60%,
rgb(30 120 190)
);
}
.weather-container {
width: 60rem;
min-height: 25rem;
margin-top: 20vh;
margin-bottom: 4rem;
background-color: white;
border: 1px solid black;
border-radius: 0.75rem;
box-shadow: 1rem 1rem 1rem rgb(0 0 0 / 20%);
}
.btn-container {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 60rem;
height: 7.5rem;
background-color: white;
border: 1px solid black;
border-radius: 0.75rem;
box-shadow: 1rem 1rem 1rem rgb(0 0 0 / 20%);
}
.weather-text-span {
font-size: 2.25rem;
font-weight: 100;
}
.forecast-btn {
width: 12.5rem;
height: 3.5rem;
font-size: 1.75rem;
background: linear-gradient(
0deg,
rgb(255 254 224),
rgb(229 249 255) 25%,
rgb(204 242 255) 85%
);
/* background: linear-gradient(rgb(87 213 255), rgb(204 242 255)); */
border: 1px solid black;
border-radius: 0.75rem;
}
.forecast-btn:hover {
transform: scale(103%);
}
.forecast-btn:active {
transform: scale(97%);
}
.location-selector {
width: 12.5rem;
height: 3.5rem;
border: 1px, solid black;
border-radius: 0.75rem;
text-align: center;
font-size: 1.75rem;
font-weight: 100;
}
.weather-info-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.header-container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 80%;
/* border: 1px dashed black; */
}
.hidden {
display: none;
}
.main-weather-location {
font-size: 2.5rem;
margin-top: 2rem;
margin-bottom: 1.25rem;
}
.divider {
width: 50rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-top: 0.5px solid black;
}
.header {
font-size: 2rem;
font-weight: 100;
}
.main {
font-size: 1.5rem;
font-weight: 100;
}
.main-container {
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-around;
/* border: 1px dashed black; */
}
.wind-container {
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 1rem;
margin-bottom: 3rem;
/* border: 1px dashed black; */
}
.wind-elements {
display: flex;
flex-direction: column;
align-items: left;
row-gap: 1rem;
}
.direction-container {
width: 6rem;
height: 6rem;
border: 1px solid black;
border-radius: 50%;
}
.msg {
font-size: 2.5rem;
margin-top: 4rem;
}
*/
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Challenge Information:
Build a Weather App - Build a Weather App