lee
/
home-display


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            *{margin:0;padding:0;box-sizing:border-box}
            html, body{
                height: 100vh;
            }
            body{
                background: black;
                color: white;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
            }
            .dateTime{
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 3em;
            }
            .weatherBlock{
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                padding: 45px 15px 25px 15px;
                border: 1px solid white;
                height: 250px;
            }
            .weatherBlock h2{
                position: absolute;
                width: 100%;
                text-align: center;
                top: 15px;
                left: 0;
                font-size: 2em;
                text-decoration: underline;
            }
            .weatherBlock img{
                height: 10vw;
                width: 10vw;
            }
            .condition{
                margin-right: 35px;
            }
            .conditionText{
                text-align: center;
            }
            .weatherInfo{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                padding: 15px 0;
            }
            .weatherInfo p{
                font-size: 1.3em;
            }
        </style>
    </head>
    <body>
        <div class="dateTime">
            <p id="date"></p>
            <p id="time"></p>
        </div>
        <div class="weather">
            <div id="currentWeather" class="weatherBlock">
                <h2>Current Weather</h2>
                <div class="condition">
                    <img> 
                    <p class="conditionText"></p>
                </div>
                <div class="weatherInfo">
                    <p id="temp"></p>
                    <p id="feels"></p>
                    <p id="wind"></p>
                    <p id="humidity"</p>
                </div>
            </div>
        </div>
    </body>
    <script>
        const setDateTime = ()=>{
            const dateTime = new Date();
            document.getElementById("date").textContent = dateTime.toLocaleDateString("en-US", {
                weekday: "long",
                year: "numeric",
                month: "long",
                day: "numeric"
            });
            document.getElementById("time").textContent = dateTime.toLocaleTimeString("en-US", {
                hour: "numeric",
                minute: "2-digit",
                hour12: true
            });
        }

        const getWeather = ()=>{
            fetch("https://api.weatherapi.com/v1/current.json?key=519f51763fa8477b864184849251502&q=29576&aqi=no", {
                method: "get"
            })
                .then(r=>r.json())
                .then((response)=>{
                    const tempDisplay = `Temperature: ${response.current.temp_f}\u00B0F`;
                    document.getElementById("temp").textContent = tempDisplay;

                    const feelsLike = `Feels Like: ${response.current.feelslike_f}\u00B0F`;
                    document.getElementById("feels").textContent = feelsLike;

                    const currentWeatherImage = document.querySelector("#currentWeather img");
                    currentWeatherImage.src = `https:${response.current.condition.icon}`;
                    currentWeatherImage.alt = response.current.condition.text;

                    const currentWeatherText = document.querySelector("#currentWeather .conditionText");
                    currentWeatherText.textContent = response.current.condition.text;

                    const currentWind = `Wind: ${response.current.wind_mph}mph ${response.current.wind_dir}`;
                    document.getElementById("wind").textContent = currentWind;

                    const humidity = `Humidity: ${response.current.humidity}%`;
                    document.getElementById("humidity").textContent = humidity;
                })
                .catch((err)=>{
                    console.log(err);
                });
        }

        getWeather();
        setInterval(getWeather, 60000);
        setDateTime();
        setInterval(setDateTime, 10000);
    </script>
</html>