Merge pull request #11 from Ananya2003Gupta/main

Hackout #3 Clock built with HTML, CSS and JS
Hackerabad · May 1, 2022 · bc4a861 · bc4a861
2 parents 0b37486 + 5dfb3e0
commit bc4a861
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 0 deletions.
diff --git a/#3 Javascript Clock/Ananya/index.html b/#3 Javascript Clock/Ananya/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Clock</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+    <div class="clock">
+        <div class="clock-face">
+            <div class="hand hour-hand"></div>
+            <div class="hand min-hand"></div>
+            <div class="hand second-hand"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/#3 Javascript Clock/Ananya/script.js b/#3 Javascript Clock/Ananya/script.js
@@ -0,0 +1,32 @@
+const secondHand = document.querySelector('.second-hand')
+const minsHand = document.querySelector('.min-hand')
+const hourHand = document.querySelector('.hour-hand')
+
+function setDate() {
+    const currentTime = new Date()
+
+    const seconds = currentTime.getSeconds()
+    const secondDeg = (seconds / 60) * 360 + 90
+    secondHand.style.transform = `rotate(${secondDeg}deg)`
+
+    const mins = currentTime.getMinutes()
+    const minsDeg = (mins / 60) * 360 + 90
+    minsHand.style.transform = `rotate(${minsDeg}deg)`
+
+    const hours = currentTime.getHours()
+    const hoursDeg = (hours / 12) * 360 + 90
+    hourHand.style.transform = `rotate(${hoursDeg}deg)`
+
+    if (seconds == 0) {
+        secondHand.style.transitionDuration = '0s'
+        minsHand.style.transitionDuration = '0s'
+        hourHand.style.transitionDuration = '0s'
+    } else {
+        secondHand.style.transitionDuration = '0.05s'
+        minsHand.style.transitionDuration = '0.05s'
+        hourHand.style.transitionDuration = '0.05s'
+    }
+
+    requestAnimationFrame(setDate)
+}
+setDate()
diff --git a/#3 Javascript Clock/Ananya/style.css b/#3 Javascript Clock/Ananya/style.css
@@ -0,0 +1,52 @@
+body {
+    background: #ec4bdc;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.clock {
+    width: 25rem;
+    height: 25rem;
+    border: 20px solid rgb(46, 246, 53);
+    border-radius: 50px;
+    background: rgb(212, 233, 119);
+    background-image: url(https://bit.ly/2RcERUw);
+    background-size: cover;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.clock-face {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.hand {
+    background: black;
+    height: 6px;
+    position: absolute;
+    top: 50%;
+    transform-origin: 100%;
+    transform: rotate(90deg);
+    transition: all 0.05s;
+    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+}
+
+.hour-hand {
+    width: 30%;
+    right: 50%;
+}
+
+.min-hand {
+    width: 35%;
+    right: 50%;
+}
+
+.second-hand {
+    width: 40%;
+    right: 50%;
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Hackouts
+The repository where I'll be uploading the projects built during hackouts :)