Simple Analog Clock Using Html, CSS & Javascript

Preview : Today we are creating Simple Analog Clock.

In this post, I'll show you how to create an analogue clock using HTML CSS and JavaScript code.
There are three hands to denote the hours, minutes, and seconds, much like on a traditional analogue kite.
I used numbers ranging from 1 to 12.

1.index.html

Make an index.html file and paste the following code into it:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie-edge">
	<link rel="stylesheet" href="style.css">
	<link rel="icon" type="image/png" href="clock.png">
	<script defer src="script.js"></script>
	<title>Simple Analog Clock</title>
	</head>
	<body>
	<div class="clock">
	<div class="hand hour" data-hour-hand></div>
	<div class="hand minute" data-minute-hand></div>
	<div class="hand second" data-second-hand></div>
	<div class="number number1">1</div>
	<div class="number number2">2</div>
	<div class="number number3">3</div>
	<div class="number number4">4</div>
	<div class="number number5">5</div>
	<div class="number number6">6</div>
	<div class="number number7">7</div>
	<div class="number number8">8</div>
	<div class="number number9">9</div>
	<div class="number number10">10</div>
	<div class="number number11">11</div>
	<div class="number number12">12</div>
	</div>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

2.style.css

Let's make a CSS file named style.css and add the CSS code below to it:

	, ::after, ::before {
	box-sizing: border-box;
	font-family: Gotham Rounded, sans-serif;
	}

	body{
	background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%));
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
	}

	.clock {
	width: 400px;
	height: 400px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	border: 2px solid black;
	position: relative;
	}


	.clock .number {
	--rotation: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	transform: rotate(var(--rotation));
	font-size: 1.5rem;
	}

	.clock .number1{ --rotation: 30deg; }
	.clock .number2 { --rotation: 60deg; }
	.clock .number3 { --rotation: 90deg; }
	.clock .number4 { --rotation: 120deg; }
	.clock .number5 { --rotation: 150deg; }
	.clock .number6 { --rotation: 180deg; }
	.clock .number7 { --rotation: 210deg; }
	.clock .number8 { --rotation: 240deg; }
	.clock .number9 { --rotation: 270deg; }
	.clock .number10 { --rotation: 300deg; }
	.clock .number11 { --rotation: 330deg; }

	.clock .hand {
	--rotation: 0;
	position: absolute;
	bottom: 50%;
	left: 50%;
	width: 10px;
	height: 50%;
	background-color: black;
	border: 1px solid white;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	transform-origin: bottom;
	z-index: 10;
	transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
	}

	.clock::after {
	content: '';
	position: absolute;
	background-color: black;
	z-index: 11;
	width: 15px;
	height: 15px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	}

	.clock .hand.second {
	width: 3px;
	height: 45%;
	background-color: red;
	}

	.clock .hand.minute {
	width: 7px;
	height: 40%;
	background-color: black;
	}

	.clock .hand.hour {
	width: 10px;
	height: 35%;
	background-color: black;
	}

view raw style.css hosted with ❤ by GitHub

3.script.js

Create a JavaScript file named script.js and paste the following JavaScript code into it:

	setInterval(setClock, 1000)

	const hourHand = document.querySelector('[data-hour-hand]')
	const minuteHand = document.querySelector('[data-minute-hand]')
	const secondHand = document.querySelector('[data-second-hand]')

	function setClock() {
	const currentDate = new Date()
	const secondsRatio = currentDate.getSeconds() / 60
	const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
	const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
	setRotation(secondHand, secondsRatio)
	setRotation(minuteHand, minutesRatio)
	setRotation(hourHand, hoursRatio)
	}

	function setRotation(element, rotationRatio) {
	element.style.setProperty('--rotation', rotationRatio * 360)
	}

	setClock()

view raw script.js hosted with ❤ by GitHub

Code with Ranjan

Search This Blog