Tell us what’s happening:
I can’t get many function-related tests to pass. Keeps saying I should have a function and it should do X, when I already have the function doing X. I have read other similar posts but I can’t get it
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<script src="script.js" defer></script>
</head>
<body>
<button id="get-weather-btn">Get Weather</button>
<select id="choice">
<option default 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>
<section id="weather-container"></section>
</body>
</html>
/* file: styles.css */
/* Haven't styled the project yet*/
/* file: script.js */
const weatherBtn = document.getElementById("get-weather-btn");
const choice = document.getElementById("choice");
weatherBtn.addEventListener("click", () => showWeather(choice.value));
async function showWeather(city) {
if (city === "") {
return;
}
const data = await getWeather(city);
if (!data) {
alert(`Something went wrong, please try again later`);
return;
}
const weatherContainer = document.getElementById("weather-container");
weatherContainer.replaceChildren();
const icon = document.createElement("img");
const mainTemp = document.createElement("p");
const feelsLike = document.createElement("p");
const humidity = document.createElement("p");
const wind = document.createElement("p");
const windGust = document.createElement("p");
const weatherMain = document.createElement("p");
const location = document.createElement("p");
icon.id = "weather-icon";
mainTemp.id = "main-temperature";
feelsLike.id = "feels-like";
humidity.id = "humidity";
wind.id = "wind";
windGust.id = "wind-gust";
weatherMain.id = "weather-main";
location.id = "location";
weatherContainer.appendChild(location);
weatherContainer.appendChild(weatherMain);
weatherContainer.appendChild(feelsLike);
weatherContainer.appendChild(windGust);
weatherContainer.appendChild(wind);
weatherContainer.appendChild(humidity);
weatherContainer.appendChild(mainTemp);
weatherContainer.appendChild(icon);
icon.src = data.weather[0].icon ?? "N/A";
icon.alt = data.weather[0].description ?? "N/A";
mainTemp.textContent = data.main.temp ?? "N/A"
feelsLike.textContent = data.main.feels_like ?? "N/A";
humidity.textContent = data.main.humidity ?? "N/A";
wind.textContent = data.wind.speed ?? "N/A";
windGust.textContent = data.wind.gust ?? "N/A";
weatherMain.textContent = data.weather[0].main ?? "N/A";
location.textContent = data.name ?? "N/A";
}
async function getWeather(city) {
try {
const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
const data = await res.json();
return data;
} catch (error) {
console.log(error);
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/154.0.0.0 Safari/537.36
Challenge Information:
Build a Weather App - Build a Weather App
