Update 5.html
This commit is contained in:
FURK4NGG
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Weather App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="5.css"></head><body><h1>Weather Dashboard</h1><div class="container"><div class="weather-input"><h3>Enter a City Name</h3><input class="city-input" type="text" placeholder="E.g., New York, London, Tokyo"><button class="search-btn">Search</button><div class="separator"></div><button class="location-btn">Use Current Location</button></div><div class="weather-data"><div class="current-weather"><div class="details"><h2>_______ ( ______ )</h2><h6>Temperature: __°C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></div></div><div class="days-forecast"><h2>5-Day Forecast</h2><ul class="weather-cards"><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li></ul></div></div></div><script>const cityInput=document.querySelector(".city-input"),searchButton=document.querySelector(".search-btn"),locationButton=document.querySelector(".location-btn"),currentWeatherDiv=document.querySelector(".current-weather"),weatherCardsDiv=document.querySelector(".weather-cards"),API_KEY="20b42445ddc589983b0a83678e584187",createWeatherCard=(e,t,n)=>0===n?`<div class="details">\n <h2>${e} (${t.dt_txt.split(" ")[0]})</h2>\n <h6>Temperature: ${(t.main.temp-273.15).toFixed(2)}°C</h6>\n <h6>Wind: ${t.wind.speed} M/S</h6>\n <h6>Humidity: ${t.main.humidity}%</h6>\n </div>\n <div class="icon">\n <img src="https://openweathermap.org/img/wn/${t.weather[0].icon}@4x.png" alt="weather-icon">\n <h6>${t.weather[0].description}</h6>\n </div>`:`<li class="card">\n <h3>(${t.dt_txt.split(" ")[0]})</h3>\n <img src="https://openweathermap.org/img/wn/${t.weather[0].icon}@4x.png" alt="weather-icon">\n <h6>Temp: ${(t.main.temp-273.15).toFixed(2)}°C</h6>\n <h6>Wind: ${t.wind.speed} M/S</h6>\n <h6>Humidity: ${t.main.humidity}%</h6>\n </li>`,getWeatherDetails=(e,t,n)=>{fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${t}&lon=${n}&appid=${API_KEY}`).then((e=>e.json())).then((t=>{const n=[],r=t.list.filter((e=>{const t=new Date(e.dt_txt).getDate();if(!n.includes(t))return n.push(t)}));cityInput.value="",currentWeatherDiv.innerHTML="",weatherCardsDiv.innerHTML="",r.forEach(((t,n)=>{const r=createWeatherCard(e,t,n);0===n?currentWeatherDiv.insertAdjacentHTML("beforeend",r):weatherCardsDiv.insertAdjacentHTML("beforeend",r)}))})).catch((()=>{alert("An error occurred while fetching the weather forecast!")}))},getCityCoordinates=()=>{const e=cityInput.value.trim();if(""===e)return;fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${e}&limit=1&appid=${API_KEY}`).then((e=>e.json())).then((t=>{if(!t.length)return alert(`No coordinates found for ${e}`);const{lat:n,lon:r,name:i}=t[0];getWeatherDetails(i,n,r)})).catch((()=>{alert("An error occurred while fetching the coordinates!")}))},getUserCoordinates=()=>{navigator.geolocation.getCurrentPosition((e=>{const{latitude:t,longitude:n}=e.coords;fetch(`https://api.openweathermap.org/geo/1.0/reverse?lat=${t}&lon=${n}&limit=1&appid=${API_KEY}`).then((e=>e.json())).then((e=>{const{name:r}=e[0];getWeatherDetails(r,t,n)})).catch((()=>{alert("An error occurred while fetching the city name!")}))}),(e=>{e.code===e.PERMISSION_DENIED?alert("Geolocation request denied. Please reset location permission to grant access again."):alert("Geolocation request error. Please reset location permission.")}))};locationButton.addEventListener("click",getUserCoordinates),searchButton.addEventListener("click",getCityCoordinates),cityInput.addEventListener("keyup",(e=>"Enter"===e.key&&getCityCoordinates()));</script></body></html>
|
||||
<!DOCTYPE html><html lang="en"><head><link href="img/icon.ico" rel="shortcut icon" type="image/x-icon"><meta charset="UTF-8"><meta http-equiv="X-XSS-Protection" content="1; mode=block"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"><meta name="publisher" content="https://furk4ngg.github.io"><title>Weather App</title><link rel="stylesheet" href="5.css"></head><body><h1>Weather Dashboard</h1><div class="container"><div class="weather-input"><h3>Enter a City Name</h3><input class="city-input" type="text" placeholder="E.g., New York, London, Tokyo"><button class="search-btn">Search</button><div class="separator"></div><button class="location-btn">Use Current Location</button></div><div class="weather-data"><div class="current-weather"><div class="details"><h2>_______ ( ______ )</h2><h6>Temperature: __°C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></div></div><div class="days-forecast"><h2>5-Day Forecast</h2><ul class="weather-cards"><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li><li class="card"><h3>( ______ )</h3><h6>Temp: __C</h6><h6>Wind: __ M/S</h6><h6>Humidity: __%</h6></li></ul></div></div></div><script>const cityInput=document.querySelector(".city-input"),searchButton=document.querySelector(".search-btn"),locationButton=document.querySelector(".location-btn"),currentWeatherDiv=document.querySelector(".current-weather"),weatherCardsDiv=document.querySelector(".weather-cards"),API_KEY="20b42445ddc589983b0a83678e584187",createWeatherCard=(e,t,n)=>0===n?`<div class="details">\n <h2>${e} (${t.dt_txt.split(" ")[0]})</h2>\n <h6>Temperature: ${(t.main.temp-273.15).toFixed(2)}°C</h6>\n <h6>Wind: ${t.wind.speed} M/S</h6>\n <h6>Humidity: ${t.main.humidity}%</h6>\n </div>\n <div class="icon">\n <img src="https://openweathermap.org/img/wn/${t.weather[0].icon}@4x.png" alt="weather-icon">\n <h6>${t.weather[0].description}</h6>\n </div>`:`<li class="card">\n <h3>(${t.dt_txt.split(" ")[0]})</h3>\n <img src="https://openweathermap.org/img/wn/${t.weather[0].icon}@4x.png" alt="weather-icon">\n <h6>Temp: ${(t.main.temp-273.15).toFixed(2)}°C</h6>\n <h6>Wind: ${t.wind.speed} M/S</h6>\n <h6>Humidity: ${t.main.humidity}%</h6>\n </li>`,getWeatherDetails=(e,t,n)=>{fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${t}&lon=${n}&appid=${API_KEY}`).then((e=>e.json())).then((t=>{const n=[],r=t.list.filter((e=>{const t=new Date(e.dt_txt).getDate();if(!n.includes(t))return n.push(t)}));cityInput.value="",currentWeatherDiv.innerHTML="",weatherCardsDiv.innerHTML="",r.forEach(((t,n)=>{const r=createWeatherCard(e,t,n);0===n?currentWeatherDiv.insertAdjacentHTML("beforeend",r):weatherCardsDiv.insertAdjacentHTML("beforeend",r)}))})).catch((()=>{alert("An error occurred while fetching the weather forecast!")}))},getCityCoordinates=()=>{const e=cityInput.value.trim();if(""===e)return;fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${e}&limit=1&appid=${API_KEY}`).then((e=>e.json())).then((t=>{if(!t.length)return alert(`No coordinates found for ${e}`);const{lat:n,lon:r,name:i}=t[0];getWeatherDetails(i,n,r)})).catch((()=>{alert("An error occurred while fetching the coordinates!")}))},getUserCoordinates=()=>{navigator.geolocation.getCurrentPosition((e=>{const{latitude:t,longitude:n}=e.coords;fetch(`https://api.openweathermap.org/geo/1.0/reverse?lat=${t}&lon=${n}&limit=1&appid=${API_KEY}`).then((e=>e.json())).then((e=>{const{name:r}=e[0];getWeatherDetails(r,t,n)})).catch((()=>{alert("An error occurred while fetching the city name!")}))}),(e=>{e.code===e.PERMISSION_DENIED?alert("Geolocation request denied. Please reset location permission to grant access again."):alert("Geolocation request error. Please reset location permission.")}))};locationButton.addEventListener("click",getUserCoordinates),searchButton.addEventListener("click",getCityCoordinates),cityInput.addEventListener("keyup",(e=>"Enter"===e.key&&getCityCoordinates()));</script></body></html>
|
||||
|
||||
Reference in New Issue
Block a user