Skip to content

Commit 5234266

Browse files
harshita2216harshita2216
authored
Merge pull request #359 from khushi-purwar/lgm21
Added Clock
2 parents c98d885 + ec6c0f3 commit 5234266

File tree

17 files changed

+392
-0
lines changed

17 files changed

+392
-0
lines changed

‎Clock/Analog Clock/clock.png

5.88 KB
Loading

‎Clock/Analog Clock/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Analog Clock</title>
10+
</head>
11+
12+
<body>
13+
<div class="clock">
14+
<div class="hour">
15+
<div class="hr" id="hr"></div>
16+
</div>
17+
<div class="min">
18+
<div class="mn" id="mn"></div>
19+
</div>
20+
<div class="sec">
21+
<div class="sc" id="sc"></div>
22+
</div>
23+
</div>
24+
<script src="script.js"></script>
25+
</body>
26+
27+
</html>

‎Clock/Analog Clock/script.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const hr = document.querySelector("#hr");
2+
const mn = document.querySelector("#mn");
3+
const sc = document.querySelector("#sc");
4+
5+
const deg = 6;
6+
7+
setInterval(() => {
8+
let day = new Date();
9+
let hh = day.getHours() * 30;
10+
let mm = day.getMinutes() * deg;
11+
let ss = day.getSeconds() * deg;
12+
console.log(hh);
13+
console.log(mm);
14+
console.log(ss);
15+
hr.style.transform = `rotate(${hh+(mm/12)}deg)`;
16+
mn.style.transform = `rotate(${mm}deg)`;
17+
sc.style.transform = `rotate(${ss}deg)`;
18+
});

‎Clock/Analog Clock/style.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background-color: #091921;
13+
}
14+
15+
.clock {
16+
width: 350px;
17+
height: 350px;
18+
background: url("clock.png");
19+
background-size: cover;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
border-radius: 50%;
24+
border: 4px solid #091921;
25+
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.25),
26+
inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
27+
inset 0 15px 15px rgba(0, 0, 0, 0.3);
28+
}
29+
30+
.clock::before {
31+
content: "";
32+
position: absolute;
33+
width: 15px;
34+
height: 15px;
35+
background: #848484;
36+
border: 2px solid #fff;
37+
z-index: 10;
38+
border-radius: 50%;
39+
}
40+
41+
.hour,
42+
.min,
43+
.sec {
44+
position: absolute;
45+
}
46+
47+
.hour,
48+
.hr {
49+
width: 160px;
50+
height: 160px;
51+
}
52+
53+
.min,
54+
.mn {
55+
width: 190px;
56+
height: 190px;
57+
}
58+
59+
.sec,
60+
.sc {
61+
width: 230px;
62+
height: 230px;
63+
}
64+
65+
.hr,
66+
.mn,
67+
.sc {
68+
display: flex;
69+
justify-content: center;
70+
/* align-items: center; */
71+
position: absolute;
72+
border-radius: 50%;
73+
}
74+
75+
.hr::before {
76+
content: "";
77+
position: absolute;
78+
width: 8px;
79+
height: 80px;
80+
background: #848484;
81+
z-index: 1;
82+
border-radius: 6px 6px 0 0;
83+
}
84+
85+
.mn::before {
86+
content: "";
87+
position: absolute;
88+
width: 4px;
89+
height: 90px;
90+
background: #d6d6d6;
91+
z-index: 2;
92+
border-radius: 6px 6px 0 0;
93+
}
94+
95+
.sc::before {
96+
content: "";
97+
position: absolute;
98+
width: 2px;
99+
height: 150px;
100+
background: #ff6767;
101+
z-index: 3;
102+
border-radius: 6px 6px 0 0;
103+
}
104+
105+

‎Clock/Digital Clock/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Digital Clock</title>
10+
</head>
11+
12+
<body onload="intiClock()">
13+
<div class="datetime">
14+
<div class="date"> <span id="dayname">Day</span>, <span id="month">Month</span> <span id="daynum">00</span>, <span id="year">Year</span> </div>
15+
<div class="time"> <span id="hour">00</span>:
16+
<spn id="minutes">00</spn>: <span id="seconds">00</span> <span id="period">AM</span> </div>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
21+
</html>

‎Clock/Digital Clock/script.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
function updateClock() {
2+
3+
var now = new Date();
4+
var dayname = now.getDay(),
5+
month = now.getMonth(),
6+
date = now.getDate(),
7+
year = now.getFullYear(),
8+
hours = now.getHours(),
9+
min = now.getMinutes(),
10+
sec = now.getSeconds(),
11+
period = "AM";
12+
13+
var months = ["Janaury", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
14+
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"]
15+
16+
if (hours == 0)
17+
hours = 12;
18+
19+
if (hours > 12) {
20+
// hours = hours -12;
21+
period = "PM";
22+
}
23+
24+
// add 0 in the beginning of number if less than 10
25+
hours = (hours < 10) ? "0" + hours : hours;
26+
min = (min < 10) ? "0" + min : min;
27+
sec = (sec < 10) ? '0' + sec : sec;
28+
29+
document.querySelector("#dayname").innerHTML = days[dayname];
30+
document.querySelector("#month").innerHTML = months[month];
31+
document.querySelector("#daynum").innerHTML = date;
32+
document.querySelector("#year").innerHTML = year;
33+
document.querySelector("#hour").innerHTML = hours;
34+
document.querySelector("#minutes").innerHTML = min;
35+
document.querySelector("#seconds").innerHTML = sec;
36+
document.querySelector("#period").innerHTML = period;
37+
38+
}
39+
40+
function intiClock() {
41+
updateClock();
42+
window.setInterval("updateClock()", 1);
43+
}
44+
45+
intiClock();

‎Clock/Digital Clock/style.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background: #10101e;
13+
}
14+
15+
.datetime {
16+
color: #fff;
17+
background: #10101e;
18+
width: 340px;
19+
padding: 15px 10px;
20+
border: 3px solid #2e94e3;
21+
border-radius: 5px;
22+
-webkit-box-reflect: below 1px
23+
linear-gradient(transparent, rgba(255, 255, 255, 0.1));
24+
transition: 0.5s;
25+
}
26+
27+
.datetime:hover {
28+
background-color: #2e94e3;
29+
box-shadow: 0 0 30px #2e94e3;
30+
}
31+
32+
.date {
33+
font-size: 20px;
34+
font-weight: 600;
35+
text-align: center;
36+
letter-spacing: 3px;
37+
}
38+
39+
.time {
40+
font-size: 60px;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
46+
.time span:not(:last-child) {
47+
position: relative;
48+
margin: 0 6px;
49+
font-weight: 600;
50+
text-align: center;
51+
letter-spacing: 3px;
52+
}
53+
54+
.time span:last-child {
55+
background: #2e94e3;
56+
font-size: 30px;
57+
font-weight: 600;
58+
text-transform: uppercase;
59+
margin-top: 10px;
60+
padding: 0 7px;
61+
border-radius: 3px;
62+
}
63+
64+

‎Clock/Screenshots/demo.gif

6.94 MB
Loading

‎Clock/Screenshots/ss1.png

101 KB
Loading

‎Clock/Screenshots/ss2.png

34.6 KB
Loading

0 commit comments

Comments
 (0)