Skip to content

Instantly share code, notes, and snippets.

@dustinrouillard
Last active June 11, 2020 16:14
Show Gist options
  • Save dustinrouillard/51e1d194e962af89ef10cc1954e0a027 to your computer and use it in GitHub Desktop.
Save dustinrouillard/51e1d194e962af89ef10cc1954e0a027 to your computer and use it in GitHub Desktop.
<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