Skip to content

Commit ad598ab

Browse files
Anujit1Anujit1
committed
added clock project
1 parent efcff4a commit ad598ab

File tree

5 files changed

+137
-0
lines changed

5 files changed

+137
-0
lines changed

‎Clock/clock-logo.png‎

75.5 KB
Loading

‎Clock/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Ticker</title>
6+
7+
<!-- CSS -->
8+
<link rel="stylesheet" href="styles.css">
9+
10+
<!-- Fonts -->
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Sixtyfour+Convergence&display=swap" rel="stylesheet">
14+
</head>
15+
<body>
16+
<header class="navbar">
17+
<h1>Ticker</h1>
18+
</header>
19+
20+
<main class="canvas">
21+
<div id="clock">
22+
<div id="time">00:00:00 AM</div>
23+
<hr>
24+
<div class="date">
25+
<span id="weekday">Monday</span>
26+
<span id="divider">|</span>
27+
<span id="date">15/04/2025</span>
28+
</div>
29+
</div>
30+
</main>
31+
32+
<script src="script.js"></script>
33+
</body>
34+
</html>

‎Clock/script.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const timeEl = document.getElementById('time');
2+
const dateEl = document.getElementById('date');
3+
const weekdayEl = document.getElementById('weekday');
4+
5+
function updateClock() {
6+
const now = new Date();
7+
timeEl.innerHTML = now.toLocaleTimeString();
8+
dateEl.innerHTML = now.toLocaleDateString();
9+
weekdayEl.innerHTML = now.toLocaleDateString('en-US', { weekday: 'long' });
10+
}
11+
12+
setInterval(updateClock, 1000);
13+
updateClock();

‎Clock/styles.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #000;
9+
color: #f8edd9;
10+
font-family: "Sixtyfour Convergence", sans-serif;
11+
min-height: 100vh;
12+
display: flex;
13+
flex-direction: column;
14+
}
15+
16+
.navbar {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
padding: 10px;
21+
font-size: 1.3em;
22+
}
23+
24+
.canvas {
25+
flex: 1;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
}
30+
31+
#clock {
32+
text-align: center;
33+
font-size: 3.5em;
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
}
38+
39+
#time {
40+
margin-bottom: 10px;
41+
}
42+
43+
hr {
44+
width: 80%;
45+
border: 1px solid #f8edd9;
46+
margin-bottom: 10px;
47+
}
48+
49+
.date {
50+
font-size: 0.4em;
51+
display: flex;
52+
gap: 10px;
53+
align-items: center;
54+
justify-content: center;
55+
}
56+
57+
#divider {
58+
font-family: 'Courier New', Courier, monospace;
59+
font-weight: bolder;
60+
margin: 0 5px;
61+
}
62+
63+
/* Responsive */
64+
@media (max-width: 786px) {
65+
.navbar {
66+
font-size: 1.5em;
67+
}
68+
69+
#clock {
70+
font-size: 2.8em;
71+
}
72+
73+
.date {
74+
font-size: 0.45em;
75+
}
76+
}
77+
78+
@media (max-width: 600px) {
79+
.navbar {
80+
font-size: 1.2em;
81+
}
82+
83+
#clock {
84+
font-size: 2.5em;
85+
}
86+
87+
.date {
88+
font-size: 0.4em;
89+
}
90+
}

‎project_Snapshot/Ticker_clock.png‎

22 KB
Loading

0 commit comments

Comments
 (0)