index.html

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Sometype+Mono:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <script src="skycons.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="refresh" content="1800">

    <style>
        body {
            font-family: "Sometype Mono", sans-serif;
            background-color: #000;
            color: #fff;
            line-height: 1;
            font-size: 65px;
            margin: 0;
        }
        p { margin: 0; }
        #container { width: 100%; }
        #left, #right {
            float: left;
            width: 50%;
            text-align: center;
        }
        #left {
            margin-top: 25vh;
        }
        #right { text-align: right; }
        .day p { display: inline-block; margin-right: 10px; }
        /* canvas { margin-top: 20px; } */
        #time, #current-temp {
            font-weight: 500;
            font-size: 168px;
        }
        span[id^="minTemp"] {
            opacity: 0.5;
        }
        [id^="minTemp"]::after {
            content: "•";
            margin-left: 0.5em;
            font-size: 0.5em;
            vertical-align: middle;
        }    </style>

    <script>
        $(document).ready(function() {
            var url = 'https://api.open-meteo.com/v1/forecast?latitude=37.7646489&longitude=-122.4647699&current=temperature_2m&hourly=temperature_2m&daily=weather_code,temperature_2m_max,temperature_2m_min&temperature_unit=fahrenheit&wind_speed_unit=ms&precipitation_unit=inch&timezone=America%2FLos_Angeles';
            var skycons = new Skycons({"color": "white"});

            function getSkycon(weatherCode) {
                const skyconMap = {
                    0: Skycons.CLEAR_DAY,
                    1: Skycons.PARTLY_CLOUDY_DAY,
                    2: Skycons.PARTLY_CLOUDY_DAY,
                    3: Skycons.CLOUDY,
                    51: Skycons.RAIN,
                    53: Skycons.RAIN,
                    55: Skycons.RAIN,
                    61: Skycons.RAIN,
                    63: Skycons.RAIN,
                    65: Skycons.RAIN,
                    80: Skycons.RAIN,
                    81: Skycons.RAIN,
                    82: Skycons.RAIN,
                    56: Skycons.SLEET,
                    57: Skycons.SLEET,
                    66: Skycons.SLEET,
                    67: Skycons.SLEET,
                    71: Skycons.SNOW,
                    73: Skycons.SNOW,
                    75: Skycons.SNOW,
                    77: Skycons.SNOW,
                    85: Skycons.SNOW,
                    86: Skycons.SNOW,
                    45: Skycons.FOG,
                    48: Skycons.FOG
                };
                return skyconMap[weatherCode] || Skycons.CLOUDY;
            }

            function formatDateTime() {
                var now = new Date();
                var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                var day = days[now.getDay()];
                var date = now.getDate();
                var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
                var month = months[now.getMonth()];
                var hours = now.getHours();
                var minutes = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
                return day + ' ' + month + ' ' + date + ', ' + hours + ':' + minutes;
            }

            function updateDateTime() {
                $('#date').html(formatDateTime().split(',')[0].toLowerCase());
                $('#time').html(formatDateTime().split(',')[1]);
            }

            setInterval(updateDateTime, 1000);

            function forecast() {
                $.getJSON(url, function(data) {
                    console.log("Data received:", data);

                    $('#current-temp').html(Math.round(data.current.temperature_2m) + '&deg;F');

                    for (var i = 0; i < data.daily.time.length; i++) {
                        var weatherCode = data.daily.weather_code[i];
                        var skyconType = getSkycon(weatherCode);
                        skycons.set('day' + i, skyconType);
                        var maxTemp = data.daily.temperature_2m_max[i];
                        console.log(maxTemp);
                        $('#temp' + i).html(Math.round(data.daily.temperature_2m_max[i]) + '&deg;F');
                    }
                    skycons.play();
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    // console.error("Error fetching data:", textStatus, errorThrown); // Log any errors
                    console.log("Detailed error information:", jqXHR);

                });
                setTimeout(forecast, 120000); // Re-run every 2 minutes
            }
            forecast();
        });
    </script>
</head>
<body>
    <div id="container">
        <div id="left">
            <p id="date"></p>
            <p id="time"></p>
            <p id="current-temp"></p>
        </div>
        <div id="right">
            <p id="temp0"></p><canvas width="100" height="100" id="day0"></canvas>
            <p id="temp1"></p><canvas width="100" height="100" id="day1"></canvas>
            <p id="temp2"></p><canvas width="100" height="100" id="day2"></canvas>
            <p id="temp3"></p><canvas width="100" height="100" id="day3"></canvas>
            <p id="temp4"></p><canvas width="100" height="100" id="day4"></canvas>
            <p id="temp5"></p><canvas width="100" height="100" id="day5"></canvas>
            <p id="temp6"></p><canvas width="100" height="100" id="day6"></canvas>
        </div>
    </div>
</body>
</html>