Skip to content

Commit 9b93994

Browse files
thinkswellthinkswell
authored
Merge pull request #1167 from tushar-2110/AnalogWatch-tushar-2110
added js analog watch
2 parents 8695ce8 + 2926731 commit 9b93994

5 files changed

Lines changed: 184 additions & 0 deletions

File tree

‎AnalogWatch/tushar-2110/AnalogWatch.png‎

506 KB
Loading

‎AnalogWatch/tushar-2110/Readme.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Analog JS Watch
2+
3+
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.
4+
5+
---
6+
7+
## Features
8+
- Dynamic real-time clock hands (hour, minute, second).
9+
- Smooth animations for the clock hands.
10+
- Responsive and minimalist design.
11+
- Fully functional and easy to customize.
12+
13+
---
14+
15+
## Technologies Used
16+
- **HTML5**: To structure the clock elements.
17+
- **CSS3**: For styling and adding animations.
18+
- **JavaScript**: To handle the logic for updating the clock hands in real-time.
19+
20+
---
21+
22+

‎AnalogWatch/tushar-2110/app.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
setInterval(setClock,1000)
2+
3+
const hourHand = document.querySelector('[data-hour-hand]')
4+
const minuteHand = document.querySelector('[data-minute-hand]')
5+
const secondHand = document.querySelector('[data-second-hand]')
6+
7+
8+
function setClock(){
9+
const currentDate=new Date()
10+
const secondsRatio=currentDate.getSeconds()/60
11+
const minutesRatio= (secondsRatio + currentDate.getMinutes())/60
12+
const hoursRatio=(minutesRatio +currentDate.getHours())/12
13+
14+
setRotation(secondHand,secondsRatio)
15+
setRotation(minuteHand,minutesRatio)
16+
setRotation(hourHand,hoursRatio)
17+
18+
19+
20+
21+
}
22+
23+
function setRotation(element,rotationRatio){
24+
25+
element.style.setProperty('--rotation',rotationRatio*360)
26+
27+
}
28+
29+
setClock()

‎AnalogWatch/tushar-2110/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>project 2</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<div class="clock">
12+
<div class="hand hour" data-hour-hand></div>
13+
<div class="hand minute" data-minute-hand></div>
14+
<div class="hand second" data-second-hand></div>
15+
<div class="number number1">1</div>
16+
<div class="number number2">2</div>
17+
<div class="number number3">3</div>
18+
<div class="number number4">4</div>
19+
<div class="number number5">5</div>
20+
<div class="number number6">6</div>
21+
<div class="number number7">7</div>
22+
<div class="number number8">8</div>
23+
<div class="number number9">9</div>
24+
<div class="number number10">10</div>
25+
<div class="number number11">11</div>
26+
<div class="number number12">12</div>
27+
28+
29+
</div>
30+
31+
<script defer src="app.js"></script>
32+
</body>
33+
</html>

‎AnalogWatch/tushar-2110/styles.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
*,*::after,*::before{
2+
box-sizing :border-box;
3+
font-family:Gotham Rounded,sans-serif;
4+
5+
}
6+
7+
body{
8+
background:linear-gradient(to right,hsl(200,100%,50%),hsl(175,100%,50%));
9+
display:flex;
10+
justify-content: center;
11+
align-items: center;
12+
min-height:100vh;
13+
overflow: hidden;
14+
15+
}
16+
17+
.clock{
18+
width:300px;
19+
height:300px;
20+
background-color: rgba(255,255,255,0.8);
21+
border-radius: 50%;
22+
border:2px solid black;
23+
position: relative;
24+
25+
}
26+
27+
.clock .number{
28+
--rotation:0;
29+
position:absolute;
30+
width:100%;
31+
height:100%;
32+
text-align:center;
33+
transform:rotate(var(--rotation));
34+
font-size:1.5rem;
35+
36+
}
37+
38+
.clock .number1{--rotation:30deg ;}
39+
.clock .number2{--rotation:60deg ;}
40+
.clock .number3{--rotation:90deg ;}
41+
.clock .number4{--rotation:120deg ;}
42+
.clock .number5{--rotation:150deg ;}
43+
.clock .number6{--rotation:180deg ;}
44+
.clock .number7{--rotation:210deg ;}
45+
.clock .number8{--rotation:240deg ;}
46+
.clock .number9{--rotation:270deg ;}
47+
.clock .number10{--rotation:300deg ;}
48+
.clock .number11{--rotation:330deg ;}
49+
50+
.clock .hand{
51+
--rotation:0;
52+
position:absolute;
53+
bottom:50%;
54+
left:50%;
55+
width: 10px;
56+
height:50%;
57+
background-color: black;
58+
border:1px solid white;
59+
border-top-left-radius: 10px;
60+
border-top-right-radius: 10px;
61+
transform-origin:bottom;
62+
z-index:10;
63+
transform: translateX(-50%) rotate( calc(var(--rotation)*1deg));
64+
65+
}
66+
67+
68+
.clock::after{
69+
content:'';
70+
position:absolute;
71+
background-color:black;
72+
z-index: 11;
73+
width:15px;
74+
height:15px;
75+
top:50%;
76+
left:50%;
77+
transform:translate(-50%,-50%);
78+
border-radius:50%;
79+
80+
}
81+
82+
.clock .hand.second{
83+
width:3px;
84+
height:45%;
85+
background-color: red;
86+
87+
}
88+
89+
.clock .hand.minute{
90+
width:7px;
91+
height:40%;
92+
background-color: black;
93+
94+
}
95+
96+
.clock .hand.hour{
97+
width:10px;
98+
height:35%;
99+
background-color:black;
100+
}

0 commit comments

Comments
 (0)