Skip to content

Commit e651f66

Browse files
khushi-purwarkhushi-purwar
committed
added clock
1 parent ad71849 commit e651f66

File tree

11 files changed

+334
-0
lines changed

11 files changed

+334
-0
lines changed

‎Clock/Analog Clock/clock.png

5.88 KB
Loading

‎Clock/Analog Clock/index.html

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

‎Clock/Digital 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+
<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+
<link rel="stylesheet" href="style.css">
8+
<title>Digital Clock</title>
9+
</head>
10+
<body onload="intiClock()">
11+
<div class="datetime">
12+
<div class="date">
13+
<span id="dayname">Day</span>,
14+
<span id="month">Month</span>
15+
<span id="daynum">00</span>,
16+
<span id="year">Year</span>
17+
</div>
18+
<div class="time">
19+
<span id="hour">00</span>:
20+
<spn id="minutes">00</spn>:
21+
<span id="seconds">00</span>
22+
<span id="period">AM</span>
23+
</div>
24+
</div>
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

‎Clock/Digital Clock/script.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
}

‎Clock/Digital Clock/style.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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 linear-gradient(transparent, rgba(255,255,255,0.1)) ;
23+
transition: 0.5s;
24+
}
25+
26+
.datetime:hover{
27+
background-color: #2E94E3;
28+
box-shadow: 0 0 30px #2E94E3;
29+
}
30+
31+
.date{
32+
font-size: 20px;
33+
font-weight: 600;
34+
text-align: center;
35+
letter-spacing: 3px;
36+
}
37+
38+
.time{
39+
font-size: 60px;
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
}
44+
45+
.time span:not(:last-child){
46+
position: relative;
47+
margin: 0 6px;
48+
font-weight: 600;
49+
text-align: center;
50+
letter-spacing: 3px;
51+
}
52+
53+
.time span:last-child{
54+
background: #2E94E3;
55+
font-size: 30px;
56+
font-weight: 600;
57+
text-transform: uppercase;
58+
margin-top: 10px;
59+
padding: 0 7px;
60+
border-radius: 3px;
61+
}

‎Clock/img1.png

98.4 KB
Loading

‎Clock/img2.png

33.5 KB
Loading

‎Clock/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
<link rel="stylesheet" href="style.css">
8+
<title>Clock</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="analog">
13+
<a href="./Analog Clock/index.html" title="View Analog Clock"><img src="./img1.png" alt=""></a>
14+
15+
<h1>Analog Clock</h1>
16+
</div>
17+
<div class="digital">
18+
<a href="./Digital Clock/index.html" title="View Digital Clock"><img src="./img2.png" alt=""></a>
19+
<h1>Digital Clock</h1>
20+
21+
</div>
22+
</div>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)