Merge pull request #48 from Nipunkhattri/main

gantavyamalviya · web-flow · commit 83f6f626144a · 2022-10-03T02:47:07.000+05:30
added a wall-clock project
diff --git a/wall-clock/.vscode/settings.json b/wall-clock/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/wall-clock/clock.png b/wall-clock/clock.png
diff --git a/wall-clock/index.css b/wall-clock/index.css
@@ -0,0 +1,77 @@
+
+ html {
+      background-size:cover;
+      font-family:'helvetica neue';
+      text-align: center;
+      font-size: 10px;
+}
+
+body {
+    margin: 0;
+    font-size: 2rem;
+    flex:1;
+    min-height: 100vh;
+    align-items: center;
+}
+
+.clock{  
+    position: relative;
+    margin: auto;
+    height: 30vw;
+    width: 30vw; 
+    background: url(clock.png) no-repeat;
+    background-size: 100%;
+}
+
+#hour,#minute,#second{
+    position: absolute;
+    background: black;
+    border-radius: 10px; 
+    transform-origin: bottom;
+}
+
+#hour{
+    width: 1.8%;
+    height: 25%;
+    top: 25%;
+    left: 48.85%;
+    opacity: 0.8;  
+}
+#minute{
+    width: 1.6%;
+    height: 30%;
+    top: 19%;
+    left: 48.9%;
+    opacity: 0.8;  
+}
+#second{
+    width: 1%;
+    height: 40%;
+    top: 9%;
+    left: 49.25%;
+    opacity: 0.8; 
+    
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wall-clock/index.html b/wall-clock/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>clock</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <h1 class="heading">The Time</h1>
+    <div class="clock">
+        <div id="hour"></div>
+        <div id="minute"></div>
+        <div id="second"></div>
+    </div>
+</body>
+<script src="index.js"></script>
+</html>
diff --git a/wall-clock/index.js b/wall-clock/index.js
@@ -0,0 +1,13 @@
+setInterval(() => {
+  d = new Date();
+  htime = d.getHours();
+  mtime = d.getMinutes();
+  stime = d.getSeconds();
+  hrotation = 30*htime + mtime/2;
+  mrotation = 6*mtime;
+  srotation = 6*stime;
+
+  hour.style.transform = `rotate(${hrotation}deg)`;
+  minute.style.transform = `rotate(${mrotation}deg)`;
+  second.style.transform = `rotate(${srotation}deg)`;
+}, 1000);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "liveServer.settings.port": 5501`
	`3`	`+}`