Skip to content

Commit d0df9a6

Browse files
khushi-purwarkhushi-purwar
committed
beautify the files
1 parent e651f66 commit d0df9a6

File tree

8 files changed

+211
-203
lines changed

8 files changed

+211
-203
lines changed

‎Clock/Analog Clock/index.html

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<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>
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>
910
</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>
2311

24-
<script src="script.js"></script>
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>
2525
</body>
26-
</html>
26+
27+
</html>

‎Clock/Analog Clock/script.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ const sc = document.querySelector("#sc");
44

55
const deg = 6;
66

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-
})
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: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
*{
1+
* {
22
margin: 0;
33
padding: 0;
44
box-sizing: border-box;
5-
}
6-
7-
body{
5+
}
6+
7+
body {
88
display: flex;
99
justify-content: center;
1010
align-items: center;
1111
min-height: 100vh;
12-
background-color: #091921 ;
13-
14-
}
15-
16-
.clock{
12+
background-color: #091921;
13+
}
14+
15+
.clock {
1716
width: 350px;
1817
height: 350px;
1918
background: url("clock.png");
@@ -23,76 +22,84 @@ body{
2322
align-items: center;
2423
border-radius: 50%;
2524
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: '';
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: "";
3432
position: absolute;
3533
width: 15px;
3634
height: 15px;
3735
background: #848484;
3836
border: 2px solid #fff;
3937
z-index: 10;
4038
border-radius: 50%;
41-
}
42-
43-
.hour, .min, .sec{
39+
}
40+
41+
.hour,
42+
.min,
43+
.sec {
4444
position: absolute;
45-
}
46-
47-
.hour, .hr{
45+
}
46+
47+
.hour,
48+
.hr {
4849
width: 160px;
4950
height: 160px;
50-
}
51-
52-
.min ,.mn{
51+
}
52+
53+
.min,
54+
.mn {
5355
width: 190px;
5456
height: 190px;
55-
}
56-
57-
.sec ,.sc{
57+
}
58+
59+
.sec,
60+
.sc {
5861
width: 230px;
5962
height: 230px;
60-
}
61-
62-
.hr, .mn ,.sc{
63+
}
64+
65+
.hr,
66+
.mn,
67+
.sc {
6368
display: flex;
6469
justify-content: center;
6570
/* align-items: center; */
6671
position: absolute;
6772
border-radius: 50%;
68-
}
69-
70-
.hr::before{
71-
content: '';
73+
}
74+
75+
.hr::before {
76+
content: "";
7277
position: absolute;
7378
width: 8px;
7479
height: 80px;
7580
background: #848484;
7681
z-index: 1;
7782
border-radius: 6px 6px 0 0;
78-
}
79-
80-
.mn::before{
81-
content: '';
83+
}
84+
85+
.mn::before {
86+
content: "";
8287
position: absolute;
8388
width: 4px;
8489
height: 90px;
8590
background: #d6d6d6;
8691
z-index: 2;
8792
border-radius: 6px 6px 0 0;
88-
}
89-
90-
.sc::before{
91-
content: '';
93+
}
94+
95+
.sc::before {
96+
content: "";
9297
position: absolute;
9398
width: 2px;
9499
height: 150px;
95100
background: #ff6767;
96101
z-index: 3;
97102
border-radius: 6px 6px 0 0;
98-
}
103+
}
104+
105+

‎Clock/Digital Clock/index.html

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<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>
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>
910
</head>
11+
1012
<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>
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>
2619
</body>
27-
</html>
20+
21+
</html>

‎Clock/Digital Clock/script.js

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
function updateClock() {
22

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;
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;
3737

3838
}
3939

4040
function intiClock() {
41-
updateClock();
42-
window.setInterval("updateClock()", 1);
43-
}
41+
updateClock();
42+
window.setInterval("updateClock()", 1);
43+
};

0 commit comments

Comments
 (0)