dustinrouillard/time.html

## time.html
<html>
    <head>
        <title>Time Display</title>

        <link rel="stylesheet" type="text/css" href="./css/dank-mono.css">
        <link rel="stylesheet" href="./css/all.css">
        <script defer src="./js/all.js"></script>

        <style>
            body {
                font-family: 'dm';
                font-size: 25px;
                color: rgb(117, 193, 236);
            }

            .time {
                font-size: 30px;
                color: rgb(117, 193, 236);
            }

            .item {
                padding-bottom: 5px;
            }

            .item-container {
                display: flex;
            }

            #weather-icon {
                padding-top: 8px;
                font-size: 25px;
                padding-right: 10px;
            }
        </style>

        <script>
            let token = 'openweathermap-api-token';
            let days = ["Sunday", "Monday", "Tuseday", "Wednesday", "Thursday", "Friday", "Saturday"];
            let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            let icons = {
                '01': { d: 'fad fa-sun', n: 'fad fa-moon' },
                '02': { d: 'fad fa-cloud-sun', n: 'fad fa-moon-cloud' },
                '03': { d: 'fad fa-cloud', n: 'fad fa-cloud' },
                '04': { d: 'fad fa-clouds', n: 'fad fa-clouds' },
                '09': { d: 'fad fa-cloud-rain', n: 'fad fa-cloud-rain' },
                '10': { d: 'fad fa-cloud-sun-rain', n: 'fad fa-cloud-moon-rain' },
                '11': { d: 'fad fa-thunderstorm-sun', n: 'fad fa-thunderstorm-moon' },
                '13': { d: 'fad fa-snowflakes', n: 'fad fa-snowflakes' }
            };

            getNumberWithOrdinal = (n) => {
                var s = ["th", "st", "nd", "rd"],
                    v = n % 100;
                return n + (s[(v - 20) % 10] || s[v] || s[0]);
            };

            setInterval(() => {
                let request = new XMLHttpRequest();
                let weatherElement = document.getElementById('weather');

                request.open('GET', `https://api.openweathermap.org/data/2.5/weather?zip=87124,us&appid=${token}&units=imperial`, false);
                request.send(null);

                try {
                    let data = JSON.parse(request.responseText);

                    let fahrenheit = data.main.temp;
                    let celsius = ((fahrenheit - 32) * 5 / 9);
                    let humidity = data.main.humidity;
                    let type = data.weather[0].icon.slice(-1);
                    let Class = icons[data.weather[0].icon.slice(0, -1)][type];

                    weatherElement.innerHTML = `<i id="weather-icon" class="${Class} item"></i>${Math.floor(fahrenheit)}˚ F / ${Math.floor(celsius)}˚ C | ${humidity}% Humidity`;
                } catch (error) {
                    console.error(error);
                }
            }, 2000);

            setInterval(() => {
                let date = new Date();

                let dateElement = document.getElementById('date');
                let timeElement = document.getElementById('time');

                dateElement.innerHTML = `Date: ${days[date.getDay()]}, ${months[date.getMonth()]} ${getNumberWithOrdinal(date.getDate())}, ${date.getFullYear()}`;
                timeElement.innerHTML = `Time: UTC-7 ${date.toLocaleTimeString()}`;
            }, 1000);
        </script>
    </head>

    <body>
        <div class="item-container"><div class="weather" id="weather">LOADING...</div></div>
        <div class="time" id="time">LOADING...</div>
        <div class="date" id="date">LOADING...</div>
    </body>
</html>
	<html>
	<head>
	<title>Time Display</title>

	<link rel="stylesheet" type="text/css" href="./css/dank-mono.css">
	<link rel="stylesheet" href="./css/all.css">
	<script defer src="./js/all.js"></script>

	<style>
	body {
	font-family: 'dm';
	font-size: 25px;
	color: rgb(117, 193, 236);
	}

	.time {
	font-size: 30px;
	color: rgb(117, 193, 236);
	}

	.item {
	padding-bottom: 5px;
	}

	.item-container {
	display: flex;
	}

	#weather-icon {
	padding-top: 8px;
	font-size: 25px;
	padding-right: 10px;
	}
	</style>

	<script>
	let token = 'openweathermap-api-token';
	let days = ["Sunday", "Monday", "Tuseday", "Wednesday", "Thursday", "Friday", "Saturday"];
	let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

	let icons = {
	'01': { d: 'fad fa-sun', n: 'fad fa-moon' },
	'02': { d: 'fad fa-cloud-sun', n: 'fad fa-moon-cloud' },
	'03': { d: 'fad fa-cloud', n: 'fad fa-cloud' },
	'04': { d: 'fad fa-clouds', n: 'fad fa-clouds' },
	'09': { d: 'fad fa-cloud-rain', n: 'fad fa-cloud-rain' },
	'10': { d: 'fad fa-cloud-sun-rain', n: 'fad fa-cloud-moon-rain' },
	'11': { d: 'fad fa-thunderstorm-sun', n: 'fad fa-thunderstorm-moon' },
	'13': { d: 'fad fa-snowflakes', n: 'fad fa-snowflakes' }
	};

	getNumberWithOrdinal = (n) => {
	var s = ["th", "st", "nd", "rd"],
	v = n % 100;
	return n + (s[(v - 20) % 10] \|\| s[v] \|\| s[0]);
	};

	setInterval(() => {
	let request = new XMLHttpRequest();
	let weatherElement = document.getElementById('weather');

	request.open('GET', `https://api.openweathermap.org/data/2.5/weather?zip=87124,us&appid=${token}&units=imperial`, false);
	request.send(null);

	try {
	let data = JSON.parse(request.responseText);

	let fahrenheit = data.main.temp;
	let celsius = ((fahrenheit - 32) * 5 / 9);
	let humidity = data.main.humidity;
	let type = data.weather[0].icon.slice(-1);
	let Class = icons[data.weather[0].icon.slice(0, -1)][type];

	weatherElement.innerHTML = `<i id="weather-icon" class="${Class} item"></i>${Math.floor(fahrenheit)}˚ F / ${Math.floor(celsius)}˚ C \| ${humidity}% Humidity`;
	} catch (error) {
	console.error(error);
	}
	}, 2000);

	setInterval(() => {
	let date = new Date();

	let dateElement = document.getElementById('date');
	let timeElement = document.getElementById('time');

	dateElement.innerHTML = `Date: ${days[date.getDay()]}, ${months[date.getMonth()]} ${getNumberWithOrdinal(date.getDate())}, ${date.getFullYear()}`;
	timeElement.innerHTML = `Time: UTC-7 ${date.toLocaleTimeString()}`;
	}, 1000);
	</script>
	</head>

	<body>
	<div class="item-container"><div class="weather" id="weather">LOADING...</div></div>
	<div class="time" id="time">LOADING...</div>
	<div class="date" id="date">LOADING...</div>
	</body>
	</html>