Okay guys so when i try to search about the country that I’m looking for, it does not Work and I do not know It’s the style object, html problems, typos, API or whatever and sorry if I make any mistake posting this because I’m a beginner at stack overflow I even went and saw the original creator and I used their source code but it didn’t work (Creator : ASMR Prog) but it still didn’t work
const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
const error404 = document.querySelector('.not-found');
search.addEventListener('click', () => {
const APIKey = 'b8ce744f89d884624abc5d9baa02f7de';
const city = document.querySelector('.search-box input').value;
if (city === ''){
return;
}
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`)
.then(response => response.json())
.then(json => {
if (json.cod === '404') {
container.style.height = '400px';
weatherBox.style.display = 'none';
weatherDetails.style.display = 'none';
error404.style.display = 'block';
error404.classList.add('fadeIn');
return;
}
error404.style.display = 'none';
error404.classList.remove('fadeIn');
const image = document.querySelector('.weather-box img');
const temperature = document.querySelector('.weather-box .temperature');
const description = document.querySelector('.weather-box .description');
const humidity = document.querySelector('.weather-details .humidity span');
const wind = document.querySelector('.weather-details .wind span');
switch (json.weather[0].main) {
case 'Clear':
image.src = 'images/clear.png';
break;
case 'Rain':
image.src = 'images/rain.png';
break;
case 'Snow':
image.src = 'images/snow.png';
break;
case 'Clouds':
image.src = 'images/cloud.png';
break;
case 'Haze':
image.src = 'images/mist.png';
break;
default:
image.src = '';
}
temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`;
description.innerHTML = `${json.weather[0].description}`;
humidity.innerHTML = `${json.main.humidity}%`;
wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`;
weatherBox.style.display = '';
weatherDetails.style.display = '';
weatherBox.classList.add('fadeIn');
weatherDetails.classList.add('fadeIn');
container.style.height = '590px';
});
});*{
margin: 0;
padding: 0;
border: 0;
outline: none;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #06283D;
}
.container{
position: relative;
width: 400px;
height: 105px;
background: #fff;
padding: 28px 32px;
overflow: hidden;
border-radius: 18px;
font-family: 'Roboto', sans-serif;
transition: 0.6s ease-out;
}
.search-box{
width: 100%;
height: min-content;
display: flex;
align-items: center;
justify-content: space-between;
}
.search-box input{
color: #06283D;
width: 80%;
font-size: 24px;
font-weight: 500;
text-transform: uppercase;
padding-left: 32px;
}
.search-box input::placeholder{
font-size: 20px;
font-weight: 500;
color: #06283D;
text-transform: capitalize;
}
.search-box button{
cursor: pointer;
width: 50px;
height: 50px;
color: #06283D;
background: #dff6ff;
border-radius: 50%;
font-size: 22px;
transition: 0.4s ease;
}
.search-box button:hover{
color: #fff;
background: #06283D;
}
.search-box i{
position: absolute;
color: #06283D;
font-size: 28px;
}
.weather-box{
text-align: center;
}
.weather-box img{
width: 60%;
margin-top: 30px;
}
.weather-box .temperature{
position: relative;
color: #06283D;
font-size: 4rem;
font-weight: 800;
margin-top: 30px;
margin-left: -16px;
}
.weather-box .temperature span{
position: absolute;
margin-left: 4px;
font-size: 1.5rem;
}
.weather-box .description{
color: #06283D;
font-size: 22px;
font-weight: 500;
text-transform: capitalize;
}
.weather-details{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.weather-details .humidity, .weather-details .wind{
display: flex;
align-items: center;
width: 50%;
height: 100px;
}
.weather-details .humidity{
padding-left: 20px;
justify-content: flex-start;
}
.weather-details .wind{
padding-right: 20px;
justify-content: flex-end;
}
.weather-details i{
color: #06283D;
font-size: 26px;
margin-right: 10px;
margin-top: 6px;
}
.weather-details span{
color: #06283D;
font-size: 22px;
font-weight: 500;
}
.weather-details p{
color: #06283D;
font-size: 14px;
font-weight: 500;
}
.not-found{
width: 100%;
text-align: center;
margin-top: 50px;
scale: 0;
opacity: 0;
display: none;
}
.not-found img{
width: 70%;
}
.not-found p{
color: #06283D;
font-size: 22px;
font-weight: 500;
margin-top: 12px;
}
.weather-box, .weather-details{
scale: 0;
opacity: 0;
}
.fadeIn{
animation: 0.5s fadeIn forwards;
animation-delay: 0.5s;
}
@keyframes fadeIn{
to {
scale: 1;
opacity: 1;
}
}<!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">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Weather App | Radmehr Firoozbkaht</title>
</head>
<body>
<div class="container" id=".container">
<div class="search-box" id=".search-box">
<i class="fa-solid fa-location-dot"></i>
<input type="text" placeholder="Enter your location">
<button class="fa-solid fa-magnifying-glass"></button>
</div>
<div class="not-found" id=".not-found">
<img src="images/404.png">
<p>Oops! Invalid location :/</p>
</div>
<div class="weather-box" id=".weather-box">
<img src="">
<p class="temperature"></p>
<p class="description"></p>
</div>
<div class="weather-details" id=".weather-details">
<div class="humidity">
<i class="fa-solid fa-water"></i>
<div class="text">
<span></span>
<p>Humidity</p>
</div>
</div>
<div class="wind">
<i class="fa-solid fa-wind"></i>
<div class="text">
<span></span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>I tied everything but it didn’t work. but I noticed something interesting, whenever I tried to run it in VS code, it didn’t work. but if I tried the same on console it worked and I was so confused that I just came here to just ask about it and wherever I searched I didn’t get any answer so I’d be very thankful of anyone who helps me out and with love, thanks again and pls let me know of any problem I made posting this question