Can’t seem to update the location details when I click on one of the cities on the panel or when I search in the search bar. It keeps throwing that catch erro at the end of the fetchWeatherData function “Location not found, please try again”.
I get the data in the console though, I’m new with javascript. Can’t seem to find a solution for this issue
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather</title>
<link
href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./styles.css" />
<script src="./script.js" defer></script>
<script
src="https://kit.fontawesome.com/4e3cd221df.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="weather-app">
<div class="container">
<h3 class="brand">the weather</h3>
<div>
<h1 class="temp">20°</h1>
<div class="city-time">
<h1 class="name">Tunis</h1>
<small>
<span class="time">00:00</span>
-
<span class="date">Monday Mar 16</span>
</small>
</div>
<div class="weather">
<img
src="./icons/day/113.png"
alt="icon"
class="icon"
width="50"
height="50"
/>
<span class="condition">Clear</span>
</div>
</div>
</div>
<div class="panel">
<form id="locationInput">
<input type="text" class="search" placeholder="Search location" />
<button class="submit" type="submit">
<i class="fas fa-search"></i>
</button>
</form>
<ul class="cities">
<li class="city">Algiers</li>
<li class="city">Berlin</li>
<li class="city">Rio</li>
<li class="city">Moscow</li>
</ul>
<ul class="details">
<h4>Weather Details</h4>
<li>
<span>Clear</span>
<span class="cloud">78%</span>
</li>
<li>
<span>Humidity</span>
<span class="humidity">42%</span>
</li>
<li>
<span>Wind</span>
<span class="wind">5km/h</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Javascript:
const app = document.querySelector('.weather-app');
const temp = document.querySelector('.temp');
const dateOutput = document.querySelector('.date');
const timeOutput = document.querySelector('.time');
const conditionOutput = document.querySelector('.condition');
const nameOutput = document.querySelector('.name');
const icon = document.querySelector('.icon');
const cloudOutput = document.querySelector('.cloud');
const humidityOutput = document.querySelector('.humidity');
const windOutput = document.querySelector('.wind');
const form = document.getElementById('locationInput');
const search = document.querySelector('.search');
const btn = document.querySelector('.submit');
const cities = document.querySelectorAll('.city');
let cityInput = "Moscow";
cities.forEach((city) => {
city.addEventListener('click', (e) => {
cityInput = e.target.textContent;
fetchWeatherData();
app.style.opcaity = "0";
});
})
form.addEventListener('submit', (e) => {
if (search.value.length == 0) {
alert('Please enter a city name');
} else {
cityInput = search.value;
fetchWeatherData();
search.value = "";
app.style.opcaity = "0";
}
e.preventDefault();
})
function dayOfTheWeek(day, month, year) {
const weekday = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
return weekday[new Date(`${day}/${month}/${year}`).getDay()];
};
var api = `https://api.weatherapi.com/v1/current.json?key=edfdd9e1ff7a462f99104631221003&q=${cityInput}`
function fetchWeatherData() {
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);
temp.innerHTML = data.current.temp_c + "°";
conditionOutput.innerHTML = data.current.condition.text;
const date = data.location.localtime;
const y = parseInt(date.substr(0, 4));
const m = parseInt(date.substr(5, 2));
const d = parseInt(date.substr(8, 2));
const time = date.substr(11);
dateOutput.innerHTML = `${dayOfTheWeek(d, m, y)} ${d}, ${m}, ${y}`;
timeOutput.innerHTML = time;
nameOutput.innerHTML = data.location.name;
const iconId = data.current.condition.icon.subtr(
"//cdn.weatherapi.com/weather/64x64/".length);
icon.src = "./icons" + iconId;
cloudOutput.innerHTML = data.current.cloud + "%";
humidityOutput.innerHTML = data.current.humidity + "%";
windOutput.innerHTML = data.current.wind_kph + "km/h";
let timeOfDay = "day";
const code = data.current.condition.code;
if (!data.current.is_day) {
timeOfDay = "night";
}
if (code == 1000) {
app.style.backgroundImage = `
url(./images/${timeOfDay}/clear.jpg1)`;
btn.style.background = "#e5ba92";
if (timeOfDay == "night") {
btn.style.background = "#181e27";
}
} else if (
code == 1003 ||
code == 1006 ||
code == 1009 ||
code == 1030 ||
code == 1069 ||
code == 1087 ||
code == 1135 ||
code == 1273 ||
code == 1276 ||
code == 1279 ||
code == 1282
) {
app.style.backgroundImage = `
url(./images/${timeOfDay}/cloudy.jpg1)`;
btn.style.background = "#fa6d1b";
if (timeOfDay == "night") {
btn.style.background = "#181e27";
}
} else if (
code == 1063 ||
code == 1069 ||
code == 1072 ||
code == 1150 ||
code == 1153 ||
code == 1180 ||
code == 1183 ||
code == 1186 ||
code == 1189 ||
code == 1192 ||
code == 1195 ||
code == 1204 ||
code == 1207 ||
code == 1240 ||
code == 1243 ||
code == 1246 ||
code == 1249 ||
code == 1252
) {
app.style.backgroundImage = `
url(./images/${timeOfDay}/rainy.jpg1)`;
btn.style.background = "#fa6d1b";
if (timeOfDay == "night") {
btn.style.background = "#325c80";
}
} else {
app.style.backgroundImage = `
url(./images/${timeOfDay}/snowy.jpg1)`;
btn.style.background = "#4d72aa";
if (timeOfDay == "night") {
btn.style.background = "#1b1b1b";
}
}
app.style.opcaity = "1";
})
.catch(() => {
alert('Location not found, try again please');
app.style.opcaity = "1";
});
}
fetchWeatherData();
app.style.opcaity = "1";