lee
/
home-display


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            *{margin:0;padding:0;box-sizing:border-box};
            html, body{
                height: 100vh;
                width: 100vw;
                background: black;
            }
            .grid{
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                height: 100vh;
                width: 100vw;
                grid-template-areas:
                    "topLeft topRight"
                    "bottom bottom";
                gap: 2px;
            }
            .grid > *{
                background: black;
                min-height: 0;
                min-width: 0;
                overflow: hidden;
            }
            .topLeft{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                grid-area: topLeft;
                color: white;
            }
            .topRight{
                display: flex;
                align-items: center;
                justify-content: center;
                grid-area: topRight;
            }
            .bottom{
                grid-area: bottom;
            }

            #date{
                font-size: 2.2em;
            }
            #time{
                font-size: 1.8em;
                text-align: center;
            }
            .weather{
                display: flex;
                justify-content: space-around;
                width: 100%;
            }
            .weatherBlock{
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: relative;
                padding-top: 35px;
                width: 50%;
            }
            .weatherBlock h2{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                text-align: center;
            }
            .topRight img{
                height: 95%;
            }
            .bottom iframe{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="grid">
            <div class="topLeft">
                <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>
            </div>
            <div class="topRight">
                <img id="radar" src="https://radar.weather.gov/ridge/standard/KLTX_0.gif" alt="radar">
            </div>
            <div class="bottom">
                <iframe src="https://www.youtube-nocookie.com/embed/4nMfRpesYfw?si=O9Up2lQKNo8v9gi2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </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);
                });
        }

        const getRadarImage = () =>{
            const img = document.getElementById("radar");
            const base = img.src.split("?")[0];
            img.src = base + "?t=" + Date.now();
        }

        getWeather();
        setInterval(getWeather, 60000);
        setDateTime();
        setInterval(setDateTime, 10000);
        setInterval(getRadarImage, 10 * 1000);
    </script>
</html>