Skip to content

Commit 9caf2e9

Browse files
NiranjanMeghwalNiranjanMeghwal
committed
added a simple clock app
1 parent 46f55ad commit 9caf2e9

File tree

5 files changed

+328
-0
lines changed

5 files changed

+328
-0
lines changed

‎Clock/NiranjanMeghwal/digital/index.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Digital Clock With Date</title>
6+
<link rel="stylesheet" href="style.css">
7+
<link href="https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200&display=swap" rel="stylesheet">
8+
</head>
9+
<body onload="initClock()">
10+
11+
<!-- Analog clock -->
12+
<button onclick="location.href='www.yoursite.com'" type="button" name="button" id="btn">Analog</button>
13+
<script type="text/javascript">
14+
document.getElementById("btn").onclick = function () {
15+
location.href = "../index.html";
16+
};
17+
</script>
18+
19+
<!--digital clock start-->
20+
<div class="datetime">
21+
<div class="date">
22+
<span id="dayname">Day</span>,
23+
<span id="month">Month</span>
24+
<span id="daynum">00</span>,
25+
<span id="year">Year</span>
26+
</div>
27+
<div class="time">
28+
<span id="hour">00</span>:
29+
<span id="minutes">00</span>:
30+
<span id="seconds">00</span>
31+
<span id="period">AM</span>
32+
</div>
33+
</div>
34+
<!--digital clock end-->
35+
36+
<script type="text/javascript">
37+
function updateClock(){
38+
var now = new Date();
39+
var dname = now.getDay(),
40+
mo = now.getMonth(),
41+
dnum = now.getDate(),
42+
yr = now.getFullYear(),
43+
hou = now.getHours(),
44+
min = now.getMinutes(),
45+
sec = now.getSeconds(),
46+
pe = "AM";
47+
48+
if(hou >= 12){
49+
pe = "PM";
50+
}
51+
if(hou == 0){
52+
hou = 12;
53+
}
54+
if(hou > 12){
55+
hou = hou - 12;
56+
}
57+
58+
Number.prototype.pad = function(digits){
59+
for(var n = this.toString(); n.length < digits; n = 0 + n);
60+
return n;
61+
}
62+
63+
var months = ["January", "February", "March", "April", "May", "June", "July", "Augest", "September", "October", "November", "December"];
64+
var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
65+
var ids = ["dayname", "month", "daynum", "year", "hour", "minutes", "seconds", "period"];
66+
var values = [week[dname], months[mo], dnum.pad(2), yr, hou.pad(2), min.pad(2), sec.pad(2), pe];
67+
for(var i = 0; i < ids.length; i++)
68+
document.getElementById(ids[i]).firstChild.nodeValue = values[i];
69+
}
70+
71+
function initClock(){
72+
updateClock();
73+
window.setInterval("updateClock()", 1);
74+
}
75+
</script>
76+
77+
</body>
78+
</html>

‎Clock/NiranjanMeghwal/digital/style.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body{
7+
height: 100vh;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
background: #10101E;
12+
}
13+
14+
#btn{
15+
position: absolute;
16+
text-align: center;
17+
font-family: Gemunu Libre;
18+
font-size: 2em;
19+
font-weight: bold;
20+
background-color: #64C4ED;
21+
height: 50px;
22+
width: 100px;
23+
top: 100px;
24+
right: 50px;
25+
}
26+
27+
.datetime{
28+
color: #fff;
29+
background: #10101E;
30+
font-family: "Segoe UI", sans-serif;
31+
width: 340px;
32+
padding: 15px 10px;
33+
border: 3px solid #2E94E3;
34+
border-radius: 5px;
35+
-webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1));
36+
transition: 0.5s;
37+
transition-property: background, box-shadow;
38+
}
39+
40+
.datetime:hover{
41+
background: #28FFBF;
42+
box-shadow: 0 0 30px #28FFBF;
43+
}
44+
45+
#period{
46+
background-color: #FC5404;
47+
}
48+
49+
.date{
50+
font-size: 20px;
51+
font-weight: 600;
52+
text-align: center;
53+
letter-spacing: 3px;
54+
}
55+
56+
.time{
57+
font-size: 60px;
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
}
62+
63+
.time span:not(:last-child){
64+
position: relative;
65+
margin: 0 6px;
66+
font-weight: 600;
67+
text-align: center;
68+
letter-spacing: 3px;
69+
}
70+
71+
.time span:last-child{
72+
background: #2E94E3;
73+
font-size: 30px;
74+
font-weight: 600;
75+
text-transform: uppercase;
76+
margin-top: 10px;
77+
padding: 0 5px;
78+
border-radius: 3px;
79+
}

‎Clock/NiranjanMeghwal/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link href="styles.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200&display=swap" rel="stylesheet">
9+
<script defer src="script.js"></script>
10+
<title>Clock</title>
11+
</head>
12+
<body>
13+
<!-- redirection to digital clock -->
14+
<button onclick="location.href='www.yoursite.com'" type="button" name="button" id="btn">Digital</button>
15+
<script type="text/javascript">
16+
document.getElementById("btn").onclick = function () {
17+
location.href = "digital/index.html";
18+
};
19+
</script>
20+
21+
<!-- clock structure -->
22+
<div class="shell">
23+
<div class="clock">
24+
<div class="hand hour" data-hour-hand></div>
25+
<div class="hand minute" data-minute-hand></div>
26+
<div class="hand second" data-second-hand></div>
27+
<div class="number number1">1</div>
28+
<div class="number number2">2</div>
29+
<div class="number number3">3</div>
30+
<div class="number number4">4</div>
31+
<div class="number number5">5</div>
32+
<div class="number number6">6</div>
33+
<div class="number number7">7</div>
34+
<div class="number number8">8</div>
35+
<div class="number number9">9</div>
36+
<div class="number number10">10</div>
37+
<div class="number number11">11</div>
38+
<div class="number number12">12</div>
39+
</div>
40+
</div>
41+
</body>
42+
</html>

‎Clock/NiranjanMeghwal/script.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
function setClock() {
8+
const currentDate = new Date()
9+
const secondsRatio = currentDate.getSeconds() / 60
10+
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
11+
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
12+
setRotation(secondHand, secondsRatio)
13+
setRotation(minuteHand, minutesRatio)
14+
setRotation(hourHand, hoursRatio)
15+
}
16+
17+
function setRotation(element, rotationRatio) {
18+
element.style.setProperty('--rotation', rotationRatio * 360)
19+
}
20+
21+
setClock()

‎Clock/NiranjanMeghwal/styles.css

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

0 commit comments

Comments
 (0)