I'm trying tp display the weather of a certain weather and certain weather details (humidity, pressure, etc), however, the javascript doesn't fetch the info of location that is inputed through the search field. The API Key and API Url are correct so that is not the problem.
HTML File
<!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 App</title>
<script src="https://kit.fontawesome.com/96bfde6bea.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="yes.css">
</head>
<body>
<div id="frame">
<div id="location">Search for a location</div>
<form id="form123">
<input type="search" id="search123" placeholder="Enter a city name...">
<button id="search_button"><i id="search_icon" class="fa-solid fa-magnifying-glass"></i></button>
</form>
<div id="box1">
<div id="loc1">
<i class="fa-solid fa-location-dot"></i></i>
<div id="city1">Paris</div>
<div id="country1">FR</div>
</div>
<div id="full_date"></div>
<div id="fullweather_info">
<i id="weather_icon" class="fa-solid fa-sun"></i>
<div id="weather_unit"></div>
<div id="weather_disc">Sunny</div>
<div id="weather_border"></div>
</div>
<div class="details">
<div class="left">
<div id="humidity_title">Humidity</div>
<i class="fa-solid fa-cloud-rain"></i>
<div id="humidity_disc">50%</div>
</div>
<div id="center_bar"></div>
<div class="middle">
<div id="wind_title">Wind Speed</div>
<i class="fa-solid fa-wind"></i>
<div id="wind_disc">15 km/h</div>
</div>
<div id="center_bar"></div>
<div class="right">
<div id="pressure_title">Air Pressure</div>
<i class="fa-solid fa-tornado"></i>
<div id="pressure_disc">hPa</div>
</div>
</div>
</div>
</div>
<script src="yes.js"></script>
</body>
</html>
The JS File
const weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const d = new Date();
let weekday = weekdays[d.getDay()]
const months = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"];
let full_date = document.getElementById("full_date")
let full_day = d.getDate();
let full_year = d.getFullYear();
let full_month = months[d.getMonth()]
full_date.innerHTML = weekday + " " + full_day + " " + full_month + " " + full_year;
const apiKey = "2e0012571930ac4b99b14046b8e90317";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
const searchInput = document.querySelector("#search123");
const searchBtn = document.querySelector("#search_button");
const city = searchInput.value;
async function checkWeather(city){
const url = `${apiUrl}${city}&appid=${apiKey}`;
const response = await fetch(url);
const data = await response.json();
console.log(data);
document.querySelector("#city1").innerHTML = data.name;
document.querySelector("#country1").innerHTML = data.sys.country;
document.querySelector("#weather_unit").innerHTML = Math.round(data.main.temp) + "°C";
document.querySelector("#weather_disc").innerHTML = data.weather[0].main;
document.querySelector("#humidity_disc").innerHTML = data.main.humidity + "%";
document.querySelector("#wind_disc").innerHTML = data.wind.speed + " km/h";
document.querySelector("#pressure_disc").innerHTML = data.main.pressure + " hPa";
}
searchBtn.addEventListener("click", () => {
checkWeather(searchInput.value);
});
Tried numerous methods but none turned out to be successful
