thinkswell · tushar-2110 · Nov 25, 2024
diff --git a/AnalogWatch/tushar-2110/AnalogWatch.png b/AnalogWatch/tushar-2110/AnalogWatch.png
diff --git a/AnalogWatch/tushar-2110/Readme.md b/AnalogWatch/tushar-2110/Readme.md
@@ -0,0 +1,22 @@
+# Analog JS Watch
+
+A simple and visually appealing **Analog Clock** built using **HTML**, **CSS**, and **JavaScript**. This project demonstrates the use of web technologies to create a functional clock that updates in real-time.
+
+---
+
+## Features
+- Dynamic real-time clock hands (hour, minute, second).
+- Smooth animations for the clock hands.
+- Responsive and minimalist design.
+- Fully functional and easy to customize.
+
+---
+
+## Technologies Used
+- **HTML5**: To structure the clock elements.
+- **CSS3**: For styling and adding animations.
+- **JavaScript**: To handle the logic for updating the clock hands in real-time.
+
+---
+
+
diff --git a/AnalogWatch/tushar-2110/app.js b/AnalogWatch/tushar-2110/app.js
@@ -0,0 +1,29 @@
+setInterval(setClock,1000)
+
+const hourHand = document.querySelector('[data-hour-hand]')
+const minuteHand = document.querySelector('[data-minute-hand]')
+const secondHand = document.querySelector('[data-second-hand]')
+
+
+function setClock(){
+    const currentDate=new Date()
+    const secondsRatio=currentDate.getSeconds()/60
+    const minutesRatio=  (secondsRatio + currentDate.getMinutes())/60
+    const hoursRatio=(minutesRatio +currentDate.getHours())/12
+
+    setRotation(secondHand,secondsRatio)
+    setRotation(minuteHand,minutesRatio)
+    setRotation(hourHand,hoursRatio)
+
+
+
+
+}
+
+function setRotation(element,rotationRatio){
+
+    element.style.setProperty('--rotation',rotationRatio*360)
+
+}
+
+setClock()
diff --git a/AnalogWatch/tushar-2110/index.html b/AnalogWatch/tushar-2110/index.html
@@ -0,0 +1,33 @@
+<!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>project 2</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="clock">
+    <div  class="hand hour" data-hour-hand></div>
+    <div  class="hand minute" data-minute-hand></div>
+    <div  class="hand second" data-second-hand></div>
+     <div class="number number1">1</div>
+     <div class="number number2">2</div>
+     <div class="number number3">3</div>
+     <div class="number number4">4</div>
+     <div class="number number5">5</div>
+     <div class="number number6">6</div>
+     <div class="number number7">7</div>
+     <div class="number number8">8</div>
+     <div class="number number9">9</div>
+     <div class="number number10">10</div>
+     <div class="number number11">11</div>
+     <div class="number number12">12</div>
+
+
+    </div>
+
+    <script defer src="app.js"></script>
+</body>
+</html>
diff --git a/AnalogWatch/tushar-2110/styles.css b/AnalogWatch/tushar-2110/styles.css
@@ -0,0 +1,100 @@
+*,*::after,*::before{
+    box-sizing :border-box;
+    font-family:Gotham Rounded,sans-serif;
+
+}
+
+body{
+    background:linear-gradient(to right,hsl(200,100%,50%),hsl(175,100%,50%));
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    min-height:100vh;
+    overflow: hidden;
+
+}
+
+.clock{
+    width:300px;
+    height:300px;
+    background-color: rgba(255,255,255,0.8);
+    border-radius: 50%;
+    border:2px solid black;
+    position: relative;
+
+}
+
+.clock .number{
+    --rotation:0;
+    position:absolute;
+    width:100%;
+    height:100%;
+    text-align:center;
+    transform:rotate(var(--rotation));
+    font-size:1.5rem;
+
+}
+
+.clock .number1{--rotation:30deg ;}
+.clock .number2{--rotation:60deg ;}
+.clock .number3{--rotation:90deg ;}
+.clock .number4{--rotation:120deg ;}
+.clock .number5{--rotation:150deg ;}
+.clock .number6{--rotation:180deg ;}
+.clock .number7{--rotation:210deg ;}
+.clock .number8{--rotation:240deg ;}
+.clock .number9{--rotation:270deg ;}
+.clock .number10{--rotation:300deg ;}
+.clock .number11{--rotation:330deg ;}
+
+.clock .hand{
+    --rotation:0;
+    position:absolute;
+    bottom:50%;
+    left:50%; 
+    width: 10px;
+    height:50%;  
+    background-color: black;
+    border:1px solid white;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    transform-origin:bottom;
+    z-index:10;
+    transform: translateX(-50%) rotate( calc(var(--rotation)*1deg));
+
+}
+
+
+.clock::after{
+    content:'';
+    position:absolute;
+    background-color:black;
+    z-index: 11;
+    width:15px;
+    height:15px;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    border-radius:50%;
+
+}
+
+.clock .hand.second{
+    width:3px;
+    height:45%;
+    background-color: red;
+
+}
+
+.clock .hand.minute{
+    width:7px;
+    height:40%;
+    background-color: black;
+
+}
+
+.clock .hand.hour{
+    width:10px;
+    height:35%;
+    background-color:black;
+}