Knowledge Walls
Praveen Kumar R
Creating analogue clock in Basics of JS learning
1678 Views
analogue clock
	
		<!DOCTYPE html>
	
		<head>
	
		<title>creating analogue clock using - web development</title>
	
		<link rel="stylesheet" href="css/clock.css">
	
		 
	
		</script>
	
		</head>
	
		<body>
	
		<div id="main">
	
		<div class="clock">
	
		<div class="number num1"><div>1</div></div>
	
		<div class="number num2"><div>2</div></div>
	
		<div class="number num3"><div>3</div></div>
	
		<div class="number num4"><div>4</div></div>
	
		<div class="number num5"><div>5</div></div>
	
		<div class="number num6"><div>6</div></div>
	
		<div class="number num7"><div>7</div></div>
	
		<div class="number num8"><div>8</div></div>
	
		<div class="number num9"><div>9</div></div>
	
		<div class="number num10"><div>10</div></div>
	
		<div class="number num11"><div>11</div></div>
	
		<div class="number num12"><div>12</div></div>
	
		<div class="hand" id="sec"><div class="sec"></div></div>
	
		<div class="hand" id="min"><div class="min"></div></div>
	
		<div class="hand" id="hour"><div class="hour"></div></div>
	
	
		</div>
	
		</div>
	
		<div class="view">
	
		<div id="day">Today</div>
	
		<div id="hr" >Hours</div>
	
		<div id="mini" >Minutes</div>
	
		<div id="se" >Seconds</div>
	
		</div>
	
		<script src="js/clock.js"></script>
	
		</body>
	
		</html>
creating analogue clock
	
		*{
	
		padding: 0px;
	
		margin: 0px;
	
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	
		box-sizing: border-box;
	
		}
	
	
	
	
		body{
	
		background: linear-gradient(to right,hsl(101, 80%, 60%), hsl(131, 80%, 60%), hsl(161, 80%, 60%));
	
		width: 100vw;
	
		height: 100vh;
	
		 
	
		 
	
	
		 
	
		}
	
		#main{
	
		overflow: hidden;
	
		display: flex;
	
		justify-content: center;
	
		align-items: center;
	
		padding: 50px;
	
		}
	
	
		.clock{
	
		width: 400px;
	
		height: 400px;
	
		overflow: hidden;
	
		border-radius: 50%;
	
		background-color: rgba(255, 255, 255, 0.7);
	
		border: 2px solid black;
	
		position: relative;
	
		 
	
		}
	
		.clock::after{
	
		content: '';
	
		position: absolute;
	
		width: 100%;
	
		height: 100%;
	
		background-color: linear-gradient(285deg, rgba(0,0,0,0.175)50%, rgba(0,0,0,0.1)50% );
	
		left: 0;
	
		top:0;
	
		}
	
		.number{
	
		width: 100%;
	
		height: 100%;
	
		text-align: center;
	
		position: absolute;
	
		top:0;
	
		left: 0;
	
		font-size: 1.5rem;
	
		font-weight: 600;
	
		padding: 18px;
	
		}
	
		.number::before{
	
		position: absolute;
	
		content: '';
	
		transform: translatex(-50%);
	
		top:0;
	
		left: 50%;
	
		width: 5px;
	
		height: 15px;
	
		background-color: black;
	
	
		}
	
		.clock::before{
	
		content: '';
	
		position: absolute;
	
		width: 25px;
	
		height: 25px;
	
		background-color: linear-gradient(285deg, rgba(0,0,0,0.175)50%, rgba(0,0,0,0.1)50% );
	
		left: 50%;
	
		top:50%;
	
		border-radius: 50%;
	
		background-color: black;
	
		transform: translate(-50%, -50%);
	
		z-index: 11;
	
		}
	
	
		.num1{
	
		transform: rotate(30deg); 
	
		}
	
		.num1 div{
	
		transform: rotate(-30deg);
	
		}
	
		.num2{
	
		transform: rotate(60deg); 
	
		}
	
		.num2 div{
	
		transform: rotate(-60deg);
	
		}
	
		.num3{
	
		transform: rotate(90deg); 
	
		}
	
		.num3 div{
	
		transform: rotate(-90deg);
	
		}
	
		.num4{
	
		transform: rotate(120deg); 
	
		}
	
		.num4 div{
	
		transform: rotate(-120deg);
	
		}
	
		.num5{
	
		transform: rotate(150deg); 
	
		}
	
		.num5 div{
	
		transform: rotate(-150deg);
	
		}
	
		.num6{
	
		transform: rotate(180deg); 
	
		}
	
		.num6 div{
	
		transform: rotate(-180deg);
	
		}
	
		.num7{
	
		transform: rotate(210deg); 
	
		}
	
		.num7 div{
	
		transform: rotate(-210deg);
	
		}
	
		.num8{
	
		transform: rotate(240deg); 
	
		}
	
		.num8 div{
	
		transform: rotate(-240deg);
	
		}
	
		.num9{
	
		transform: rotate(270deg); 
	
		}
	
		.num9 div{
	
		transform: rotate(-270deg);
	
		}
	
		.num10{
	
		transform: rotate(300deg); 
	
		}
	
		.num10 div{
	
		transform: rotate(-300deg);
	
		}
	
		.num11{
	
		transform: rotate(330deg); 
	
		}
	
		.num11 div{
	
		transform: rotate(-330deg);
	
		}
	
		.num12{
	
		transform: rotate(360deg); 
	
		}
	
		.num12 div{
	
		transform: rotate(-360deg);
	
		}
	
	
		.hand{
	
		position: absolute;
	
		top: 0;
	
		left: 0;
	
		width: 100%;
	
		height: 100%;
	
		}
	
		.hand div{
	
		position: absolute;
	
		bottom: 50%;
	
		left: 50%;
	
		 
	
		transform: translatex(-50%)
	
		}
	
		.sec{
	
		width: 1px;
	
		height: 38%;
	
		background-color: red;
	
		}
	
		.min{
	
		width: 4px;
	
		height: 30%;
	
		background-color: green;
	
		border-radius: 5px;
	
		}
	
		.hour{
	
		width: 12px;
	
		height: 20%;
	
		background-color: black;
	
		border-radius: 5px;
	
		}
	
	
		.view{
	
		display: grid;
	
		grid-template-columns:auto auto auto auto;
	
		padding: 50px;
	
		justify-content: space-evenly;
	
		grid-column-gap: 1px;
	
		 
	
		color: white;
	
		background: linear-gradient(to left,hsl(101, 80%, 60%), hsl(131, 80%, 60%), hsl(161, 80%, 60%));
	
		color: black;
	
		border: 2px solid white;
	
		margin: 2px;
	
		}
	
	
		#hr, #mini, #se, #day{
	
		font-size: 1.5em;
	
		 
	
		 
	
		}
creating analogue clock
	
		const secDiv = document.querySelector("#sec");
	
	
		const minDiv = document.querySelector("#min");
	
		const hourDiv = document.querySelector("#hour");
	
	
		setInterval(updateClock, 1000);
	
	
		function updateClock(){
	
		let date = new Date();
	
		let sec = date.getSeconds();
	
		let min = date.getMinutes();
	
		let hour = date.getHours()%12;
	
		console.log(hour);
	
	
		let hourDeg = (hour * 30) + (0.5 * min) // it should move 30 degree once in an hour, it should also needs to respond to the minutes.
	
		// (we have 60mins per hour hece 30deg / 60) 
	
		let minDeg = (min * 6) + (0.1 * sec);// it moves 6 deg per minute and also needs to respond to the seconds. so 6deg/60
	
		let secDeg = sec * 6; // it moves 6 deg per second and we have 60seconds, maximum deg is 360 so 360/60 = 6
	
	
		secDiv.style.transform = "rotate(" + secDeg +"deg)";
	
		minDiv.style.transform = "rotate(" + minDeg + "deg)";
	
		hourDiv.style.transform = "rotate(" + hourDeg +"deg)";
	
	
		}
	
		updateClock()
	
	
	
		const se = document.querySelector("#se");
	
	
		const min = document.querySelector("#mini");
	
		const hour = document.querySelector("#hr");
	
		const day = document.querySelector("#day");
	
	
		setInterval(function(){
	
		let time = new Date();
	
		let hr = time.getHours();
	
		 
	
		se.innerHTML = "Seconds: " + time.getSeconds();
	
		min.innerHTML = "Minutes: " + time.getMinutes();
	
		if (hr < 12){
	
		hour.innerHTML = "Hours: " + hr + " Am";
	
		} else {
	
		hour.innerHTML = "Hours: " + hr + " Pm";
	
		}
	
		 
	
		if (hr == 0){
	
		hour.innerHTML = "Hours: " + 12;
	
		}else if (hr > 12 ){
	
		hour.innerHTML = "Hours: " + (hr-12) + " Pm";
	
		}
	
		 
	
		day.innerHTML = time.toLocaleString();
	
		},1000);
	
	
	
	
	 
Previous Topics
Previous lessons of current book.
Best Lessons of "JS learning"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details