Tell us what’s happening:
My code is not being loaded on the preview tab and it keeps on giving me a 404 error and sometimes my console brings up a chunk load error, this happened when I was trying to work on the final required project to build a weather app , how can I fix this issue?
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
</head>
<body>
<div id="weather-details">
<img src="" id="weather-icon"/>
<h2 id="main-temperature"></h2>
<h4 id="feels-like"></h4>
<h4 id="humidity"></h4>
<h4 id="wind"></h4>
<h4 id="wind-gust"></h4>
<h4 id="weather-main"></h4>
<h4 id="location"></h4>
</div>
<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>
</body>
<script src="script.js"></script>
</html>
/* file: script.js */
const selectCategory = document.querySelector("select");
const getWeatherBtn = document.getElementById("get-weather-btn");
const weatherContainer = document.getElementById("weather-details");
const weatherIcon = document.getElementById("weather-icon");
const mainTemp = document.getElementById("main-temperature");
const feelsLikeEl = document.getElementById("feels-like");
const humidity = document.getElementById("humidity");
const wind = document.getElementById("wind");
const windGust = document.getElementById("wind-gust");
const mainWeather = document.getElementById("weather-main");
const location = document.getElementById("location");
selectCategory.addEventListener("change", (e)=>{
if ( selectCategory.value === "") {
getWeatherBtn.disabled = true;
} else {
getWeatherBtn.disabled = false;
getWeatherBtn.addEventListener("click", () => {
getWeather(selectCategory.value);
showWeather(selectCategory.value);
});
};
});
const getWeather = async (city) => {
try {
const weatherDataObj = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`) ;
const weatherData = await weatherDataObj.json() ;
return weatherData;
} catch (err) {
console.log(err);
};
};
const showWeather = (city) => {
try {
const data = getWeather(city);
weatherIcon.src = data.weather[0].icon;
mainTemp.textContent = data[main].temp ;
feelsLikeEl.textContent = data[main].feels_like ;
humidity.textContent = data[main].humidity ;
wind.textContent = data[wind].speed ;
windGust.textContent = data[wind].gust ;
mainWeather.textContent = data.weather[0].main ;
location.textContent = data[main].feels_like ;
feelsLikeEl.textContent = data.name ;
} catch (err) {
alert("Something went wrong, please try again later");
};
};
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0
Challenge Information:
Build a Weather App - Build a Weather App
