Spaces:
Running
Running
| <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> |