Skip to content

Commit d1f36ea

Browse files
dumartinssumn2u
dumartins
authored and
sumn2u
committed
added Live Digital Clock example
1 parent fbf02e4 commit d1f36ea

4 files changed

Lines changed: 284 additions & 0 deletions

File tree

‎examples/Live-Digital-Clock/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Live Digital Clock
2+
3+
A responsive, beginner-friendly digital clock built with HTML, CSS, and JavaScript. It shows the current time in hours, minutes, and seconds, updates every second, and lets you toggle between 12-hour (AM/PM) and 24-hour formats.
4+
5+
## How it works
6+
7+
- Uses the JavaScript `Date` object to read the current time.
8+
- `setInterval()` runs every 1000ms to refresh the display so the clock stays accurate.
9+
- Time values are padded with leading zeros for consistent formatting.
10+
- A toggle button flips between 12-hour and 24-hour modes; the AM/PM badge switches to `24H` in 24-hour mode.
11+
- DOM elements (`hours`, `minutes`, `seconds`, `ampm`) are updated on each tick, with an initial render before the interval starts.
12+
13+
## Run it
14+
15+
No dependencies or API keys are needed. Just open `index.html` in your browser:
16+
17+
```bash
18+
cd examples/Live-Digital-Clock
19+
open index.html
20+
# or double-click index.html in your file explorer
21+
```
22+
23+
## Files
24+
25+
- `index.html` – Markup for the clock layout and controls.
26+
- `styles.css` – Gradient background and responsive card-style UI.
27+
- `script.js` – Reads time with `Date`, updates the DOM, and handles the format toggle.

‎examples/Live-Digital-Clock/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
<title>Live Digital Clock</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="styles.css">
11+
</head>
12+
<body>
13+
<main class="page">
14+
<div class="clock-card">
15+
<header class="clock-header">
16+
<h1>Digital Clock</h1>
17+
<p class="subtitle">Shows the current time with a 12/24-hour toggle using the JavaScript Date object.</p>
18+
</header>
19+
20+
<section class="clock-face" role="timer" aria-live="polite">
21+
<div class="time-row">
22+
<div class="time-block">
23+
<span class="label">Hours</span>
24+
<span class="value" id="hours">00</span>
25+
</div>
26+
<span class="colon">:</span>
27+
<div class="time-block">
28+
<span class="label">Minutes</span>
29+
<span class="value" id="minutes">00</span>
30+
</div>
31+
<span class="colon">:</span>
32+
<div class="time-block">
33+
<span class="label">Seconds</span>
34+
<span class="value" id="seconds">00</span>
35+
</div>
36+
<div class="ampm" id="ampm">AM</div>
37+
</div>
38+
</section>
39+
40+
<div class="controls">
41+
<button type="button" id="formatToggle" aria-pressed="false">Switch to 24-hour</button>
42+
</div>
43+
</div>
44+
</main>
45+
46+
<script src="script.js"></script>
47+
</body>
48+
</html>

‎examples/Live-Digital-Clock/script.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const hoursEl = document.getElementById("hours");
2+
const minutesEl = document.getElementById("minutes");
3+
const secondsEl = document.getElementById("seconds");
4+
const ampmEl = document.getElementById("ampm");
5+
const toggleBtn = document.getElementById("formatToggle");
6+
7+
let use24HourFormat = false;
8+
9+
const pad = (value) => String(value).padStart(2, "0");
10+
11+
const updateControls = () => {
12+
toggleBtn.textContent = use24HourFormat ? "Switch to AM-PM format" : "Switch to 24-hour format";
13+
toggleBtn.setAttribute("aria-pressed", String(use24HourFormat));
14+
};
15+
16+
const renderClock = () => {
17+
const now = new Date();
18+
const hours24 = now.getHours();
19+
const minutes = pad(now.getMinutes());
20+
const seconds = pad(now.getSeconds());
21+
22+
let displayHours = hours24;
23+
let ampm = hours24 >= 12 ? "PM" : "AM";
24+
25+
if (!use24HourFormat) {
26+
displayHours = hours24 % 12 || 12;
27+
} else {
28+
ampm = "24H";
29+
}
30+
31+
hoursEl.textContent = pad(displayHours);
32+
minutesEl.textContent = minutes;
33+
secondsEl.textContent = seconds;
34+
ampmEl.textContent = ampm;
35+
};
36+
37+
toggleBtn.addEventListener("click", () => {
38+
use24HourFormat = !use24HourFormat;
39+
updateControls();
40+
renderClock();
41+
});
42+
43+
updateControls();
44+
renderClock();
45+
setInterval(renderClock, 1000);

‎examples/Live-Digital-Clock/styles.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
min-height: 100vh;
11+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
12+
background: #f5f6fa;
13+
color: #1f2a44;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
padding: 24px 16px;
18+
}
19+
20+
.page {
21+
width: min(960px, 100%);
22+
display: flex;
23+
justify-content: center;
24+
}
25+
26+
.clock-card {
27+
width: 100%;
28+
background: #ffffff;
29+
border: 1px solid #e4e7ee;
30+
border-radius: 14px;
31+
padding: 28px 22px;
32+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
33+
}
34+
35+
.clock-header {
36+
text-align: center;
37+
margin-bottom: 22px;
38+
}
39+
40+
41+
.clock-header h1 {
42+
font-size: clamp(1.8rem, 3vw, 2.4rem);
43+
font-weight: 700;
44+
margin-bottom: 4px;
45+
}
46+
47+
.subtitle {
48+
color: #6b7280;
49+
font-size: 0.93rem;
50+
line-height: 1.5;
51+
}
52+
53+
.clock-face {
54+
background: #f4f6fb;
55+
border-radius: 12px;
56+
padding: 20px;
57+
border: 1px solid #e4e7ee;
58+
}
59+
60+
.time-row {
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
gap: 12px;
65+
flex-wrap: wrap;
66+
}
67+
68+
.time-block {
69+
text-align: center;
70+
background: #ffffff;
71+
border-radius: 10px;
72+
padding: 12px 10px;
73+
border: 1px solid #e4e7ee;
74+
min-width: 110px;
75+
}
76+
77+
.label {
78+
display: block;
79+
color: #6b7280;
80+
font-size: 0.85rem;
81+
margin-bottom: 4px;
82+
}
83+
84+
.value {
85+
display: inline-block;
86+
font-size: clamp(2.4rem, 4vw, 3.2rem);
87+
font-weight: 700;
88+
letter-spacing: 0.04em;
89+
}
90+
91+
.colon {
92+
text-align: center;
93+
font-size: clamp(2.4rem, 4vw, 3.2rem);
94+
font-weight: 700;
95+
color: #2563eb;
96+
padding: 0 4px;
97+
}
98+
99+
.ampm {
100+
justify-self: end;
101+
padding: 10px 12px;
102+
border-radius: 10px;
103+
background: #e8f1ff;
104+
color: #1d4ed8;
105+
font-weight: 600;
106+
border: 1px solid #d6e5ff;
107+
letter-spacing: 0.05em;
108+
}
109+
110+
.controls {
111+
margin-top: 24px;
112+
display: flex;
113+
align-items: center;
114+
gap: 16px;
115+
flex-wrap: wrap;
116+
justify-content: center;
117+
text-align: center;
118+
}
119+
120+
.controls button {
121+
background: #2563eb;
122+
color: #ffffff;
123+
border: none;
124+
border-radius: 10px;
125+
padding: 12px 16px;
126+
font-weight: 600;
127+
cursor: pointer;
128+
transition: transform 0.15s ease, box-shadow 0.15s ease;
129+
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
130+
}
131+
132+
.controls button:hover {
133+
transform: translateY(-1px);
134+
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
135+
}
136+
137+
.controls button:active {
138+
transform: translateY(0);
139+
}
140+
141+
/* Responsive Design */
142+
@media (max-width: 680px) {
143+
body {
144+
padding: 16px;
145+
}
146+
147+
.clock-card {
148+
padding: 22px 16px;
149+
}
150+
151+
.time-row {
152+
flex-direction: column;
153+
gap: 10px;
154+
}
155+
156+
.colon {
157+
display: none;
158+
}
159+
160+
.ampm {
161+
width: 100%;
162+
text-align: center;
163+
}
164+
}

0 commit comments

Comments
 (0)