Im trying to use .style to style some things on the thing that i’m working on. it’s a weather app and
I don’t know why but it doesn’t work so I’m going to send you guys the codes and tell me what’s wrong:
<!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>
Java Script:
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 = 'Your Api Key';
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';
});
});
so i tried everything but nothing worked aswell and i even asked AI but it couldn’t guess why asWell
so please help me because I’m dying trying to fix it