diff --git a/AnalogWatch/tushar-2110/AnalogWatch.png b/AnalogWatch/tushar-2110/AnalogWatch.png new file mode 100644 index 000000000..2c28d29f7 Binary files /dev/null and b/AnalogWatch/tushar-2110/AnalogWatch.png differ diff --git a/AnalogWatch/tushar-2110/Readme.md b/AnalogWatch/tushar-2110/Readme.md new file mode 100644 index 000000000..8f76a2c41 --- /dev/null +++ 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 new file mode 100644 index 000000000..4bf097d3b --- /dev/null +++ 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() \ No newline at end of file diff --git a/AnalogWatch/tushar-2110/index.html b/AnalogWatch/tushar-2110/index.html new file mode 100644 index 000000000..d209bcc99 --- /dev/null +++ b/AnalogWatch/tushar-2110/index.html @@ -0,0 +1,33 @@ + + + + + + + project 2 + + + +
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+ + +
+ + + + \ No newline at end of file diff --git a/AnalogWatch/tushar-2110/styles.css b/AnalogWatch/tushar-2110/styles.css new file mode 100644 index 000000000..093063803 --- /dev/null +++ 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; +} \ No newline at end of file