Functioning Analog Clock

functioning-analog-clock.markdown

Functioning Analog Clock

A fun little CSS and JavaScript clock that tells you the current time.

A Pen by Ian on CodePen.

License.

index.html

<!-- #CodePenChallenge: Timekeeping -->
<div class="clock">
	<div class="hour-hand">
	</div>
	<div class="minute-hand">
	</div>
	<div class="second-hand">
	</div>
	<div class="circle">
	</div>
	<ul class="digits">
		<li class="digit">1</li>
		<li class="digit">2</li>
		<li class="digit">3</li>
		<li class="digit">4</li>
		<li class="digit">5</li>
		<li class="digit">6</li>
		<li class="digit">7</li>
		<li class="digit">8</li>
		<li class="digit">9</li>
		<li class="digit">10</li>
		<li class="digit">11</li>
		<li class="digit">12</li>
	</ul>
</div>

script.js

const calculateHourHandAngle = (h, m) => {
	return 0.5 * (60 * h + m);
};

const calculateMinuteHandAngle = (m) => {
	return 6 * m;
};

const calculateSecondHandAngle = (s) => {
	return s * 6;
};

const calculateSeconds = (angle) => {
	return angle / 6;
}

const setClock = () => {
	let date = new Date(Date.now());
	let hours = date.getHours() % 12;
	let minutes = date.getMinutes();
	let seconds = date.getSeconds();
	let hourHandAngle = calculateHourHandAngle(hours, minutes);
	let minuteHandAngle = calculateMinuteHandAngle(minutes);
	let secondHandAngle = calculateSecondHandAngle(seconds);
	$(".hour-hand").css("transform", "rotate(" + hourHandAngle + "deg)");
	$(".minute-hand").css(
		"transform",
		"rotate(" + minuteHandAngle + "deg)"
	);
	$(".second-hand").css(
		"transform",
		"rotate(" + secondHandAngle + "deg)"
	);
};

setClock();

setInterval(() => {
	setClock();
}, 1000);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.css

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {
	margin: 0;
}

.clock {
	position: absolute;
	width: 300px;
	height: 300px;
	left: calc(50% - 150px);
	top: calc(50% - 150px);
	background-color: white;
	border-radius: 50%;
	border: 8px solid black;
	box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.2);
}

.hour-hand {
	position: absolute;
	height: 100px;
	width: 7px;
	background-color: black;
	left: calc(50% - 3.5px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 30;
}

.hour-hand::after {
	content: "";
	width: 7px;
	height: 10px;
	background-color: black;
	position: absolute;
	bottom: -10px;
	z-index: 30;
}

.minute-hand {
	position: absolute;
	height: 140px;
	width: 4px;
	background-color: black;
	left: calc(50% - 2px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 20;
}

.minute-hand::after {
	content: "";
	width: 4px;
	height: 15px;
	background-color: black;
	position: absolute;
	bottom: -15px;
	z-index: 20;
}

.second-hand {
	position: absolute;
	height: 140px;
	width: 2px;
	background-color: red;
	left: calc(50% - 1px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 10;
}

.second-hand::after {
	content: "";
	width: 2px;
	height: 15px;
	background-color: red;
	position: absolute;
	bottom: -15px;
	z-index: 10;
}

.circle {
	position: absolute;
	width: 12px;
	height: 12px;
	background-color: black;
	left: calc(50% - 6px);
	top: calc(50% - 6px);
	border-radius: 50%;
	z-index: 40;
}

.circle::after {
	content: "";
	width: 6px;
	height: 6px;
	background-color: #B0BEC5;
	border-radius: 50%;
	position: absolute;
	left: calc(50% - 3px);
	top: calc(50% - 3px);
}

.digits {
	list-style: none;
	padding: 0;
	margin: 0;
}

.digit {
	position: absolute;
	width: 24px;
	height: 24px;
	font-size: 24px;
	font-family: Roboto, sans-serif;
	text-align: center;
	line-height: 24px;
}

.digit:nth-child(1) {
	top: 8%;
	right: 24%;
}

.digit:nth-child(2) {
	top: 24%;
	right: 8%;
}

.digit:nth-child(3) {
	right: 5px;
	top: calc(50% - 12px);
}

.digit:nth-child(4) {
	bottom: 24%;
	right: 8%;
}

.digit:nth-child(5) {
	bottom: 8%;
	right: 24%;
}

.digit:nth-child(6) {
	left: calc(50% - 12px);
	bottom: 5px;
}

.digit:nth-child(7) {
	bottom: 8%;
	left: 24%;
}

.digit:nth-child(8) {
	bottom: 24%;
	left: 8%;
}

.digit:nth-child(9) {
	left: 5px;
	top: calc(50% - 12px);
}

.digit:nth-child(10) {
	top: 24%;
	left: 8%;
}

.digit:nth-child(11) {
	top: 8%;
	left: 24%;
}

.digit:nth-child(12) {
	top: 5px;
	left: calc(50% - 12px);
}