Last active
June 11, 2020 16:14
-
-
Save dustinrouillard/51e1d194e962af89ef10cc1954e0a027 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment