8000 Analog-Clock-App · SunilHooda/JavaScript-Projects@8e3bf69 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8e3bf69

Browse files
SunilHoodaSunilHooda
committed
Analog-Clock-App
1 parent 68e5567 commit 8e3bf69

File tree

7 files changed

+319
-0
lines changed

7 files changed

+319
-0
lines changed

‎Analog-Clock/Images/DarkMode.png

39.6 KB
Loading

‎Analog-Clock/Images/lightMode.png

55.4 KB
Loading

‎Analog-Clock/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Analog Clock
2+
3+
A simple clock app.
4+
<br />
5+
6+
## [Deployed URL](https://lucky-clock.netlify.app/)
7+
8+
## Features
9+
10+
- Responsive Layouts.
11+
- Dom manipulation with new Date instance.
12+
- Dark and Light Theme.
13+
14+
## Built With
15+
16+
- love
17+
- html
18+
- css
19+
- javascript
20+
21+
## How to Run?
22+
23+
To run my application you simply need to clone the project and run the html file.
24+
25+
## Dark Theme
26+
27+
![Dark-Theme]()
28+
29+
## Light Theme
30+
31+
![Light-Theme]()

‎Analog-Clock/formulas.txt

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
==========================hour hand =====================
2+
3+
rotate 12 Hour = 360 deg.
4+
rotate 1 Hour = 360/12 deg.
5+
= 30deg.
6+
2 Hour = 30*2 deg.
7+
= 60deg.
8+
H Hour = 30*H deg.
9+
30H.
10+
11+
or rotate 60min = 30 deg
12+
rotate 1 min = 30/60 deg.
13+
= 1/2deg
14+
2 min = 1/2*2 deg.
15+
= 1 deg.
16+
M min = 1/2*M deg
17+
M/2 deg.
18+
19+
Hour formula = (30H+M/2)deg.
20+
21+
22+
23+
==========================minute ha A3E2 nd =====================
24+
25+
rotate 60 Minutes = 360deg.
26+
1 Minute = 360/60deg
27+
= 6deg.
28+
2 Minutes = 2*6deg
29+
= 12deg
30+
M Minutes = M*6deg
31+
= 6Mdeg.
32+
33+
34+
==========================second hand =====================
35+
36+
rotate 60 Seconds = 360deg.
37+
1 Second = 360/60deg
38+
= 6deg.
39+
2 Seconds = 2*6deg
40+
= 12deg
41+
S Seconds = S*6deg
42+
= 6Sdeg.

‎Analog-Clock/index.css

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
F438 7+
:root {
8+
--primary: #fff;
9+
--secondary: #000;
10+
--border-color: white;
11+
transition: all 0.5s ease-in-out;
12+
}
13+
14+
html.dark {
15+
--primary: #000;
16+
--secondary: #fff;
17+
background-color: rgb(34, 34, 34);
18+
--border-color: rgba(107, 103, 103, 0.1);
19+
transition: all 0.5s ease-in-out;
20+
}
21+
22+
body {
23+
font-family: "Times New Roman", Times, serif;
24+
width: 100vw;
25+
height: 100vh;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
}
30+
31+
.clock-container {
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
36+
}
37+
38+
.clock {
39+
width: 210px;
40+
height: 210px;
41+
position: relative;
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
border-radius: 50%;
46+
border: 7px solid var(--border-color);
47+
margin-bottom: 50px;
48+
box-shadow: 0 0 25px 1px rgba(0, 0, 0, 0.15),
49+
2px 2px 20px 3px rgba(0, 0, 0, 0.1) inset;
50+
}
51+
52+
/* Using absolute position with inset of 10 px relative to clock div and rotating the numbers using Interpolytant CSS Numeric Variable. */
53+
.clock span {
54+
position: absolute;
55+
inset: 8px;
56+
display: block;
57+
text-align: center;
58+
transform: rotate(calc(30deg * var(--num)));
59+
}
60+
61+
.clock span p {
62+
font-size: 18px;
63+
transform: rotate(calc(-30deg * var(--num)));
64+
color: var(--secondary);
65+
}
66+
67+
.center-point {
68+
position: absolute;
69+
top: 50%;
70+
left: 50%;
71+
width: 10px;
72+
height: 10px;
73+
background-color: #dc143c;
74+
border-radius: 50%;
75+
transform: translate(-50%, -50%);
76+
}
77+
78+
.hand {
79+
position: absolute;
80+
top: 50%;
81+
left: 50%;
82+
transform-origin: bottom center;
83+
}
84+
85+
.hand.hour {
86+
width: 5px;
87+
height: 50px;
88+
background-color: var(--secondary);
89+
border-top: 2px solid skyblue;
90+
}
91+
92+
.hand.minute {
93+
width: 3px;
94+
height: 60px;
95+
background-color: var(--secondary);
96+
border-top: 2px solid darkred;
97+
}
98+
99+
.hand.second {
100+
width: 2px;
101+
height: 70px;
102+
background-color: #dc143c;
103+
}
104+
105+
.time {
106+
font-size: 60px;
107+
color: var(--secondary);
108+
}
109+
110+
.date {
111+
font-size: 30px;
112+
color: var(--secondary);
113+
}
114+
115+
.toggle {
116+
position: absolute;
117+
left: 50%;
118+
bottom: 100px;
119+
transform: translate(-50%);
120+
padding: 5px 10px;
121+
background-color: transparent;
122+
border: 5px solid var(--border-color);
123+
color: var(--secondary);
124+
border-radius: 5px;
125+
font-size: 18px;
126+
box-shadow: 0 0 25px 1px rgba(0, 0, 0, 0.15),
127+
2px 2px 20px 3px rgba(0, 0, 0, 0.1) inset;
128+
}

‎Analog-Clock/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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>Clock</title>
8+
<link rel="stylesheet" href="./index.css" />
9+
</head>
10+
<body>
11+
<div class="clock-container">
12+
<div class="clock">
13+
<div class="hand hour" id="hour"></div>
14+
<div class="hand minute" id="minute"></div>
15+
<div class="hand second" id="second"></div>
16+
<div class="center-point"></div>
17+
<span style="--num: 1"><p>1</p></span>
18+
<span style="--num: 2"><p>2</p></span>
19+
<span style="--num: 3"><p>3</p></span>
20+
<span style="--num: 4"><p>4</p></span>
21+
<span style="--num: 5"><p>5</p></span>
22+
<span style="--num: 6"><p>6</p></span>
23+
<span style="--num: 7"><p>7</p></span>
24+
<span style="--num: 8"><p>8</p></span>
25+
<span style="--num: 9"><p>9</p></span>
26+
<span style="--num: 10"><p>10</p></span>
27+
<span style="--num: 11"><p>11</p></span>
28+
<span style="--num: 12"><p>12</p></span>
29+
</div>
30+
31+
<div class="time" id="time"></div>
32+
<div class="date" id="date"></div>
33+
</div>
34+
35+
<button class="toggle" id="toggle">Dark Mode</button>
36+
</body>
37+
</html>
38+
39+
<script src="./index.js"></script>

‎Analog-Clock/index.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
let hourHand = document.getElementById("hour");
2+
let minuteHand = document.getElementById("minute");
3+
let secondHand = document.getElementById("second");
4+
let time = document.getElementById("time");
5+
let date = document.getElementById("date");
6+
let toggle = document.getElementById("toggle");
7+
8+
//Changing theme
9+
toggle.addEventListener("click", () => {
10+
let html = document.querySelector("html");
11+
if (html.classList.contains("dark")) {
12+
html.classList.remove("dark");
13+
toggle.innerText = "Dark Mode";
14+
} else {
15+
html.classList.add("dark");
16+
toggle.innerText = "Light Mode";
17+
}
18+
});
19+
20+
setInterval(() => {
21+
const newDate = new Date();
22+
23+
const currentDay = newDate.getDay();
24+
const currentDate = newDate.getDate();
25+
const currentMonth = newDate.getMonth();
26+
27+
const hour = newDate.getHours();
28+
const hourin12Format = hour % 12;
29+
console.log(hour);
30+
31+
const minute = newDate.getMinutes();
32+
const second = newDate.getSeconds();
33+
34+
const amPM = hour < 12 ? "AM" : "PM";
35+
36+
//console.log(currentDate, currentDay, currentMonth);
37+
/* Above methods will give result in Index-Based-Numbers so we need an days array and month array to iterate over according the result */
38+
39+
const days = [
40+
"Sunday",
41+
"Monday",
42+
"Tuesday",
43+
"Wednesday",
44+
"Thursday",
45+
"Friday",
46+
"Saturday",
47+
];
48+
49+
const months = [
50+
"Jan",
51+
"Feb",
52+
"March",
53+
"Apr",
54+
"May",
55+
"June",
56+
"July",
57+
"Aug",
58+
"Sept",
59+
"Oct",
60+
"Nov",
61+
"Dec",
62+
];
63+
64+
time.innerText = `${hour}:${minute < 10 ? `0${minute}` : minute} ${amPM} `;
65+
66+
date.innerText = `${days[currentDay]}, ${currentDate} ${months[currentMonth]}`;
67+
68+
hourHand.style.transform = `translate(-50%, -100%) rotate(${
69+
hour * 30 + minute / 2
70+
}deg)`;
71+
72+
minuteHand.style.transform = `translate(-50%, -100%) rotate(${
73+
minute * 6
74+
}deg)`;
75+
76+
secondHand.style.transform = `translate(-50%, -100%) rotate(${
77+
second * 6
78+
}deg)`;
79+
}, 1000);

0 commit comments

Comments
 (0)
0