//- Made for this challenge: https://www.youtube.com/watch?v=E4RyStef-gY
//- See the rest of the community clocks or submit your own here:
//- https://github.com/CodingTrain/Rainbow-Code/blob/master/CodingChallenges/CC_74_Clock/README.md
View Compiled
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT');

html,
body {
	font-family: 'Old Standard TT', serif;
	background-color: hsl(0, 0%, 12%);
	margin: 0;
	font-size: 0;
	color: hsl(0, 0%, 100%);
	text-align: center;
	overflow: hidden;
}

#clock {
	font-size: 24px;
	width: 350px;
	height: 350px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -175px;
	margin-top: -175px;
}

.digit-group {
	display: inline-block;
	height: 350px;
	&:not(:last-child) {
		&:after {
			content: ':';
			font-size: 72px;
		}
	}
}
.digit {
	display: inline-block;
	width: 50px;
	height: 350px;
	
	.digit-number {
		color: hsla(0, 0%, 100%, 0.1);
		transform: rotate(-90deg);
		transition: font-size 200ms, transform 350ms, color 150ms;
		&.highlight {
			color: inherit;
			font-size: 72px;
			transform: rotate(0deg);
		}
	}
}
View Compiled
let _timeElement10Digits = Array.from(Array(10)).map((n, i) => i);
let _timeElement6Digits = _timeElement10Digits.slice(0, 6);
let _timeElement3Digits = _timeElement10Digits.slice(0, 3);
let _timeElementStructure = [
		[ _timeElement3Digits, _timeElement10Digits ],
		[ _timeElement6Digits, _timeElement10Digits ],
		[ _timeElement6Digits, _timeElement10Digits ]
	];

let clock = document.createElement('div');
clock.id = 'clock';
document.body.appendChild(clock);
let digitGroups = [];
requestAnimationFrame(update);

_timeElementStructure.forEach(digits => {
	let digitGroup = document.createElement('div');
	digitGroup.classList.add('digit-group');
	clock.appendChild(digitGroup);
	digitGroups.push(digitGroup);
	digits.forEach(digitList => {
		let digit = document.createElement('div');
		digit.classList.add('digit');
		digitList.forEach(n => {
			let ele = document.createElement('div');
			ele.classList.add('digit-number');
			ele.innerText = n;
			digit.appendChild(ele);
		});
		digitGroup.appendChild(digit);
	});
});

function update() {
	requestAnimationFrame(update);
	let date = new Date();
	let time = [ date.getHours(), date.getMinutes(), date.getSeconds() ]
		.map(n => `0${n}`.slice(-2).split('').map(e => +e))
		.reduce((p, n) => p.concat(n), []);
	time.forEach((n, i) => {
		let digit = digitGroups[Math.floor(i * 0.5)].children[i % 2].children;
		Array.from(digit).forEach((e, i2) => e.classList[i2 === n ? 'add' : 'remove']('highlight'));
	});
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.