Tell us what’s happening:
For “Build a Weather App”…I have many tests that are failing, but the ones that trouble me are test 13 and 14, saying I should have a showWeather and getWeather function respectively. I have those functions, and the whole program itself works at least initially. Other solutions I have seen on the forums involve a missing link between index.html and script.js, but I have that in my header. Any help or hints is appreciated.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div id="report-container">
<div id="display-container">
<div id="weather-icon-container" class="info-container">
<img id="weather-icon" alt=""></img>
</div>
<div id="main-temperature" class="info-container"></div>
<div id="feels-like" class="info-container"></div>
<div id="humidity" class="info-container"></div>
<div id="wind" class="info-container"></div>
<div id="wind-gust" class="info-container"></div>
<div id="weather-main" class="info-container"></div>
<div id="location" class="info-container"></div>
</div>
<div id="controls-container">
<select id="city-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>
<button id="get-weather-btn">Get Weather</button>
</div>
</div>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const getWeatherBtn = document.getElementById("get-weather-btn");
const citySelect = document.getElementById("city-select");
const weatherIcon = document.getElementById("weather-icon");
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 weatherMain = document.getElementById("weather-main");
const location = document.getElementById("location");
async function getWeather(city) {
const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Response status: ${response.status}`)
}
const data = await response.json();
return data;
}
catch (err) {
console.error(err)
}
}
async function showWeather(city) {
const weather = await getWeather(city);
if (!weather) {
console.log("Something went wrong, please try again later");
return;
};
weather.weather[0].icon ? weatherIcon.setAttribute("src", weather.weather[0].icon) : weatherIcon.innerHTML = "N/A";
mainTemperature.innerHTML = weather.main.temp ? `<p>${weather.main.temp} Celcius</p>` : "N/A";
feelsLike.innerHTML = weather.main.feels_like ? `<p>${weather.main.feels_like} Celcius</p>` : "N/A";
humidity.innerHTML = weather.main.humidity ? `<p>${weather.main.humidity}%</p>` : "N/A";
wind.innerHTML = weather.wind.speed ? `<p>${weather.wind.speed}m/s</p>` : "N/A";
windGust.innerHTML = weather.wind.gust ? `<p>${weather.wind.gust}m/s</p>` : "N/A";
weatherMain.innerHTML = weather.weather[0].main ? `<p>${weather.weather[0].main}</p>` : "N/A";
location.innerHTML = weather.name ? `<p>${weather.name}</p>` : "N/A";
}
getWeatherBtn.addEventListener("click", () => {
const selectedCity = citySelect.value;
if (selectedCity === "") {
alert("Something went wrong, please try again later")
return;
}
showWeather(selectedCity)
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Build a Weather App - Build a Weather App