sumn2u · sumn2u · Nov 29, 2025 · Nov 28, 2025 · Nov 28, 2025 · Nov 28, 2025
diff --git a/examples/Live-Digital-Clock/README.md b/examples/Live-Digital-Clock/README.md
@@ -0,0 +1,21 @@
+# Live Digital Clock
+
+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.
+
+## How it works
+
+- Uses the JavaScript `Date` object to read the current time.
+- `setInterval()` runs every 1000ms to refresh the display so the clock stays accurate.
+- Time values are padded with leading zeros for consistent formatting.
+- A toggle button flips between 12-hour and 24-hour modes; the AM/PM badge switches to `24H` in 24-hour mode.
+- DOM elements (`hours`, `minutes`, `seconds`, `ampm`) are updated on each tick, with an initial render before the interval starts.
+
+## Run it
+
+No dependencies or API keys are needed. Just open `index.html` in your browser:
+
+```bash
+cd examples/Live-Digital-Clock
+open index.html
+# or double-click index.html in your file explorer
+```
diff --git a/examples/Live-Digital-Clock/index.html b/examples/Live-Digital-Clock/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Digital Clock</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <main class="page">
+        <div class="clock-card">
+            <header class="clock-header">
+                <h1>Digital Clock</h1>
+                <p class="subtitle">Shows the current time with a 12/24-hour toggle using the JavaScript Date object.</p>
+            </header>
+
+            <section class="clock-face" role="timer" aria-live="polite">
+                <div class="time-row">
+                    <div class="time-block">
+                        <span class="label">Hours</span>
+                        <span class="value" id="hours">00</span>
+                    </div>
+                    <span class="colon">:</span>
+                    <div class="time-block">
+                        <span class="label">Minutes</span>
+                        <span class="value" id="minutes">00</span>
+                    </div>
+                    <span class="colon">:</span>
+                    <div class="time-block">
+                        <span class="label">Seconds</span>
+                        <span class="value" id="seconds">00</span>
+                    </div>
+                    <div class="ampm" id="ampm">AM</div>
+                </div>
+            </section>
+
+            <div class="controls">
+                <button type="button" id="formatToggle" aria-pressed="false">Switch to 24-hour format</button>
+            </div>
+        </div>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/examples/Live-Digital-Clock/script.js b/examples/Live-Digital-Clock/script.js
@@ -0,0 +1,45 @@
+const hoursEl = document.getElementById("hours");
+const minutesEl = document.getElementById("minutes");
+const secondsEl = document.getElementById("seconds");
+const ampmEl = document.getElementById("ampm");
+const toggleBtn = document.getElementById("formatToggle");
+
+let use24HourFormat = false;
+
+const pad = (value) => String(value).padStart(2, "0");
+
+const updateControls = () => {
+	toggleBtn.textContent = use24HourFormat ? "Switch to AM-PM format" : "Switch to 24-hour format";
+	toggleBtn.setAttribute("aria-pressed", String(use24HourFormat));
+};
+
+const renderClock = () => {
+	const now = new Date();
+	const hours24 = now.getHours();
+	const minutes = pad(now.getMinutes());
+	const seconds = pad(now.getSeconds());
+
+	let displayHours = hours24;
+	let ampm = hours24 >= 12 ? "PM" : "AM";
+
+	if (!use24HourFormat) {
+		displayHours = hours24 % 12 || 12;
+	} else {
+		ampm = "24H";
+	}
+
+	hoursEl.textContent = pad(displayHours);
+	minutesEl.textContent = minutes;
+	secondsEl.textContent = seconds;
+	ampmEl.textContent = ampm;
+};
+
+toggleBtn.addEventListener("click", () => {
+	use24HourFormat = !use24HourFormat;
+	updateControls();
+	renderClock();
+});
+
+updateControls();
+renderClock();
+setInterval(renderClock, 1000);
diff --git a/examples/Live-Digital-Clock/styles.css b/examples/Live-Digital-Clock/styles.css
@@ -0,0 +1,179 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    min-height: 100vh;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: #edf2fb;
+    color: #1f2a44;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px 16px;
+}
+
+.page {
+    width: min(960px, 100%);
+    display: flex;
+    justify-content: center;
+}
+
+.clock-card {
+    width: 100%;
+    background-color: rgba(202, 240, 248, 0.3);
+    border: 1px solid #e4e7ee;
+    border-radius: 14px;
+    padding: 28px 22px;
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
+}
+
+.clock-header {
+    text-align: center;
+    margin-bottom: 22px;
+}
+
+
+.clock-header h1 {
+    font-size: clamp(2.4rem, 4vw, 3rem);
+    color: #034078;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.subtitle {
+    margin-top: 15px;
+    margin-bottom: 25px;
+    color: #034078;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.time-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+
+.time-block {
+    text-align: center;
+    color: #1282a2;
+    background-color: #ffffff;
+    border-radius: 10px;
+    padding: 10px 8px;
+    border: 1px solid #e4e7ee;
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.label {
+    display: block;
+    color: #034078;
+    font-size: 0.85rem;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.value {
+    display: inline-block;
+    font-size: clamp(2rem, 5vw, 2.6rem);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+}
+
+.colon {
+    text-align: center;
+    font-size: clamp(2rem, 5vw, 2.4rem);
+    font-weight: 700;
+    color: #81c3d7;
+    padding: 0 3px;
+}
+
+.ampm {
+    justify-self: end;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: #34a0a4;
+    color: #ffffff;
+    font-weight: 600;
+    border: 1px solid #d6e5ff;
+    letter-spacing: 0.05em;
+    flex: 0 1 auto;
+}
+
+.controls {
+    margin-top: 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+}
+
+.controls button {
+    background: #34a0a4;
+    color: #ffffff;
+    border: none;
+    border-radius: 10px;
+    padding: 12px 16px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
+}
+
+.controls button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
+}
+
+.controls button:active {
+    transform: translateY(0);
+}
+
+/* Responsive Design */
+@media (max-width: 680px) {
+    body {
+        padding: 16px;
+    }
+
+    .clock-card {
+        padding: 22px 16px;
+    }
+
+    .time-row {
+        flex-wrap: nowrap;
+        gap: 6px;
+    }
+
+    .time-block {
+        min-width: 0;
+        padding: 8px 6px;
+        flex: 1 1 0;
+    }
+
+    .value {
+        font-size: clamp(1.6rem, 8vw, 2.1rem);
+    }
+
+    .colon {
+        font-size: clamp(1.6rem, 8vw, 2.1rem);
+        padding: 0 2px;
+    }
+
+    .ampm {
+        width: auto;
+        text-align: center;
+        align-self: center;
+        padding: 8px 10px;
+        font-size: 0.85rem;
+    }
+}