Hexadecimal Clock

Hexadecimal Clock.markdown

Hexadecimal Clock

A simple clock written in JavaScript where the numerical value for the hours, minutes, and seconds represent the hexadecimal value of the background.

A Pen by Aleks Blagojevich on CodePen.

License.

index.html

<div class="clock"></div>
<div class="color"></div>

script.babel

var clock = document.querySelector('.clock'),
	color = document.querySelector('.color');

function getTime() {
	var time = new Date(),
		hours = ('0' + time.getHours()).slice(-2),
		minutes = ('0' + time.getMinutes()).slice(-2),
		seconds = ('0' + time.getSeconds()).slice(-2);
	
	return {
		time : hours + ' : ' + minutes + ' : ' + seconds,
		color : '#' + hours + minutes + seconds
	}
}

function outputTime() {
	var now = getTime();
	
	document.body.style.background = now.color;
	clock.innerHTML = now.time;
	color.innerHTML = now.color;
}

setInterval(outputTime, 250);

style.scss

@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400);

body {
	background: #000;
	color: #FFF;
	font-family: 'Fira Mono', sans-serif;
	font-size: 50px;
	transition: background 1s;
	height: 100%;
	text-align: center;
}

.clock,
.color {
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	transform: translateY(-50%);
}

.color {
	font-size: 20px;
	top: 80%;
}