incubateind · rushi026 · Feb 6, 2021
diff --git a/Rushiraj Parekh/Mini Project.pdf b/Rushiraj Parekh/Mini Project.pdf
diff --git a/Rushiraj Parekh/Output_Screenshot.png b/Rushiraj Parekh/Output_Screenshot.png
diff --git a/Rushiraj Parekh/clock.html b/Rushiraj Parekh/clock.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Clock</title>
+	<link rel="stylesheet" href="css/clock.css">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+	<script src="js/clock.js"></script>
+</head>
+<body>
+<div id="a"></div>
+    <script>
+        function c() {
+            var time = new Date();
+            var hh = time.getHours();
+            var mm = time.getMinutes();
+            var ss = time.getSeconds();
+
+            if (hh < 10) {
+                hh = '0' + hh;
+            }
+            if (mm < 10) {
+                mm = '0' + mm;
+            }
+            if (ss < 10) {
+                ss = '0' + ss;
+            }
+            document.getElementById('a').innerHTML = (hh + ':' + mm + ':' + ss);
+        }
+        setInterval(c, 100);
+    </script>
+<div id="clock-image">
+	<div class="hand hour"></div>
+	<div class="hand min"></div>
+	<div class="hand sec"></div>
+</div>
+</body>
+</html>
diff --git a/Rushiraj Parekh/css/clock.css b/Rushiraj Parekh/css/clock.css
@@ -0,0 +1,62 @@
+*{
+	margin: 0;
+	padding: 0;
+}
+
+#a {
+	text-align: center;
+	margin: 20px 400px;
+	font-size: 100px;
+	color: rgb(3, 82, 34);
+	border: 6px solid rgb(56, 34, 2);
+	border-top-right-radius: 50px;
+	border-bottom-left-radius: 50px;
+	background-image: linear-gradient(rgb(141, 14, 14), rgb(190, 230, 17), rgb(110, 5, 5));
+	font-family: monospace;
+}
+
+body {
+	background-image: linear-gradient(black, blue,black, blue, black);
+	height: 100%;
+}
+
+#clock-image{
+	background-image: url('../img/clock.jpeg');
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+	height: 700px;
+	width: 700px;
+	margin-left: 400px;
+	position: relative;
+}
+
+.hand{
+	position: absolute;
+	left: 340px;
+	bottom: 350px;
+	z-index: 10;
+	transform-origin: bottom;
+}
+
+.min{
+	background-color: black;
+	width: 10px;
+	height: 270px;
+	border-radius: 50px;
+}
+
+.hour{
+	background-color: black;
+	width: 10px;
+	height: 150px;
+	border-radius: 50px;
+}
+
+.sec{
+	background-color: red;
+	width: 5px;
+	height: 300px;
+	left: 343px;
+	border-radius: 50px;
+}
diff --git a/Rushiraj Parekh/img/clock.jpeg b/Rushiraj Parekh/img/clock.jpeg
diff --git a/Rushiraj Parekh/js/clock.js b/Rushiraj Parekh/js/clock.js
@@ -0,0 +1,26 @@
+const secHand = document.getElementsByClassName('sec');
+const minHand = document.getElementsByClassName('min');
+const hourHand = document.getElementsByClassName('hour');
+
+
+
+function setClock(){
+	//alert("Done");
+	let date = new Date();
+	let secRatio = date.getSeconds() / 60;
+	let minRatio = (secRatio + date.getMinutes()) / 60;
+	let hrRatio = (minRatio + date.getHours()) / 12;
+
+	setRotation(secHand, secRatio);
+	setRotation(minHand, minRatio);
+	setRotation(hourHand, hrRatio);
+}
+
+function setRotation(element, value){
+	$(()=>{
+		$(element).css('transform',`rotate(${value * 360}deg)`);
+	});
+}
+
+setClock();
+window.setInterval(setClock, 100);