My first commit

NageshMandal · Oct 21, 2022 · 0930cf8 · 0930cf8
1 parent 1d975d2
commit 0930cf8
Showing 1 changed file with 99 additions and 0 deletions.
diff --git a/Clock/Clock.html b/Clock/Clock.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>CLOCK</title>
+</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>
+
+
+ <style>
+ html {
+ background: green url(https://tse4.mm.bing.net/th?id=OIP.eFeaQKj4D6oz9LpcUTAvIgHaEo&pid=Api&P=0);
+ background-size: cover;
+ font-family: 'helvetica neue';
+ text-align: center;
+ font-size: 10px;
+ }
+
+ body {
+ margin: 0;
+ font-size: 2rem;
+ display: flex;
+ flex: 1;
+ min-height: 100vh;
+ align-items: center;
+ }
+
+ .clock {
+ width: 30rem;
+ height: 30rem;
+ border: 20px solid black;
+ border-radius: 50%;
+ margin: 50px auto;
+ position: relative;
+ padding: 2rem;
+ 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%;
+ transform: translateY(-3px); /* account for the height of the clock hands */
+ }
+
+ .hand {
+ width: 50%;
+ height: 6px;
+ background: black;
+ 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);
+ }
+</style>
+
+<script>
+ const secondHand = document.querySelector('.second-hand');
+ const minsHand = document.querySelector('.min-hand');
+ const hourHand = document.querySelector('.hour-hand');
+
+ function setDate() {
+ const now = new Date();
+
+ const seconds = now.getSeconds();
+ const secondsDegrees = ((seconds / 60) * 360) + 90;
+ secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+ const mins = now.getMinutes();
+ const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
+ minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+
+ const hour = now.getHours();
+ const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
+ hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+ }
+
+ setInterval(setDate, 1000);
+
+ setDate();
+
+</script>
+</body>
+</html>