/ Clock

Cooper Hewitt Clock Wall

Cooper Hewitt Clock Wall

Cooper Hewitt Clock Wall

A CSS clock loosely based on this installation in the Cooper Hewitt Design Museum NYC.

Made with

Html/slim
Css/SCSS
Javascript

Html

div.display

	- for i in (1..2)
		div.digit

			- for c in (1..24)
				div.clock
	
	div.digit.separator
		- for c in (1..12)
			div.clock
	
	- for i in (1..2)
		div.digit

			- for c in (1..24)
				div.clock

Css

html, body {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
	background-color: #333;
	background: radial-gradient(#fff, #eee);
	display: flex;
}

.display {
	flex: 1;
	display: grid;
	grid-gap: 8px;
	max-width: 85em;
	grid-template-columns: 1fr;
	padding: 2rem;
	box-shadow: 0 4px 15px -1px rgba(#000, .1);
	margin: auto;
	background-color: #f7f7f7;
	background: linear-gradient(to bottom, #fff, #f5f5f5);
	
	@media (min-width: 20em) {
		grid-template-columns: repeat(2, 1fr);
	}
	
	@media (min-width: 40em) {
		grid-template-columns: repeat(2, 2fr) 1fr repeat(2, 2fr);
	}
}

.digit {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 8px;
	grid-row-gap: 4px;
}

.digit.separator {
	display: none;
	
	@media (min-width: 40em) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

.clock {
	border-radius: 50%;
	padding-top: 100%;
	box-shadow: 0 2px 5px rgba(#000, .3);
	position: relative;
	background-color: #fff;
	
	&:nth-child(2n+1) {
		transition-delay: .4s;
	}
	
	&:before,
	&:after {
		content: '';
		display: inline-block;
		height: 45%;
		width: 4px;
		background-color: #444;
		position: absolute;
		left: 50%;
		top: 8%;
		margin-left: -2px;
		transform-origin: 2px 100%;
		transition: all 10s cubic-bezier(0.5, 0, 0.5, 1);
	}
	
	&.pos1 {
		&:before {
			transform: rotate(90deg);
		}
	}
	
	&.pos2 {
		&:before {
			transform: rotate(180deg);
		}
		&:after {
			transform: rotate(90deg);
		}
	}
	
	&.pos3 {
		&:before {
			transform: rotate(180deg);
		}
		&:after {
			transform: rotate(270deg);
		}
	}
	
	&.pos4 {
		&:before {
			transform: rotate(270deg);
		}
		&:after {
			transform: rotate(360deg);
		}
	}
	
	&.pos5 {
		&:before {
			transform: rotate(360deg);
		}
		&:after {
			transform: rotate(540deg);
		}
	}
	
	&.pos6 {
		&:before {
			transform: rotate(450deg);
		}
		&:after {
			transform: rotate(630deg);
		}
	}
}

Javascript

var groups = document.querySelectorAll('.digit')

function setNumber(group, number) {
	var clocks = group.children;
	var numbers = [
		'266352355555555551451664',
		'263013500550055024131664',
		'266316352645526451631664',
		'266316352645163526451664',
		'232355555145163500550014',
		'266352645163163526451664',
		'266352645163523551451664',
		'266316350055005500550014',
		'266352355145523551451664',
		'266352355145163500550014'
	]
	for(var i = 0; i < 24; i++) {
		clocks[i].classList.value = 'clock pos' + numbers[number][i]
	}
}

function setSeparator(group) {
	var pos = '002314231400';
	for(var i = 0; i<12; i++) {
		group.children[i].classList.value = 'clock pos' + pos[i];
	}
}

function pad(number, digits) {
  number = parseInt(number, 10)  
	return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}

function writeTime() {
	var now = new Date();
	var hour = now.getHours().toString();
	var minute = now.getMinutes().toString();
	var number = pad(hour,2) + pad(minute, 2);
	setNumber(groups[0], number[0]);
	setNumber(groups[1], number[1]);
	setNumber(groups[3], number[2]);
	setNumber(groups[4], number[3]);
}

function runEveryMinute(f) {
	var now = new Date();
	var timeUntilNextMinute = 60000 - (now.getSeconds() * 1000 + now.getMilliseconds());

	setTimeout(function(){
		f();
		setInterval(f, 60000);
	}, timeUntilNextMinute);
}

setSeparator(groups[2]);
runEveryMinute(writeTime);
writeTime();

Author

Aurer

Demo

See the Pen Cooper Hewitt Clock Wall by Aurer (@aurer) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More