Spaces:
Running
Running
File size: 3,982 Bytes
c083eb5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="search">
<input type="text" placeholder="Enter City Name" spellcheck="false">
<button> <img src="https://cdn3.iconfinder.com/data/icons/feather-5/24/search-512.png" alt="Search">
</button>
</div>
<div class="error">
<p>
Invalid city name
</p>
</div>
<div class="weather">
<img src="https://t4.ftcdn.net/jpg/03/38/74/43/360_F_338744374_c8v4RyKnToRWqPA4SalFf8ktaMQA48QW.jpg"
alt="rain" class="weather-icon">
<h1 class="temp">25°c</h1>
<h2 class="city">Bhilai</h2>
<div class="detail">
<div class="col">
<img src="https://static-00.iconduck.com/assets.00/humidity-icon-2048x1675-xxsge5os.png"
alt="humidity">
<div>
<p class="Humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="https://cdn-icons-png.flaticon.com/512/54/54298.png" alt="Wind">
<div>
<p class="Wind">7.6 km/h</p>
<p>Wind speed</p>
</div>
</div>
</div>
</div>
</div>
<script>
const apikey = "b8af2f72455a7c9ae28dabbb0e29b4a9";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?&units=metric&q=";
const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");
async function checkWeather(city) {
const response = await fetch(apiUrl + city + `&appid=${apikey}`);
if (response.status == 404) {
document.querySelector(".error").style.display = "block";
document.querySelector(".weather").style.display = "none";
}
else {
var data = await response.json();
document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".Humidity").innerHTML = data.main.humidity + "%";
document.querySelector(".Wind").innerHTML = data.wind.speed + " km/h";
if (data.weather[0].main == "Clouds") {
weatherIcon.scr = "https://cdn-icons-png.flaticon.com/512/4834/4834559.png";
}
else if (data.weather[0].main == "Clear") {
weatherIcon.src = "https://static-00.iconduck.com/assets.00/weather-clear-symbolic-icon-2048x2048-v4afvu7m.png";
}
else if (data.weather[0].main == "Rain") {
weatherIcon.src = "https://cdn2.iconfinder.com/data/icons/weather-flat-14/64/weather07-512.png";
}
else if (data.weather[0].main == "Drizzle") {
weatherIcon.src = "https://cdn-icons-png.flaticon.com/512/1458/1458966.png";
}
else if (data.weather[0].main == "Mist") {
weatherIcon.src = "https://cdn-icons-png.flaticon.com/512/4005/4005901.png";
}
document.querySelector(".weather").style.display = "block";
document.querySelector(".error").style.display = "none";
}
}
searchBtn.addEventListener("click", () => {
checkWeather(searchBox.value);
})
</script>
</body>
</html> |