From 65d8e38b4e0dc48868cd76414fcc5227f32782f2 Mon Sep 17 00:00:00 2001 From: dumartins Date: Fri, 28 Nov 2025 15:39:30 -0500 Subject: [PATCH 1/6] added Live Digital Clock example --- examples/Live-Digital-Clock/README.md | 27 ++++ examples/Live-Digital-Clock/index.html | 48 ++++++++ examples/Live-Digital-Clock/script.js | 45 +++++++ examples/Live-Digital-Clock/styles.css | 164 +++++++++++++++++++++++++ 4 files changed, 284 insertions(+) create mode 100644 examples/Live-Digital-Clock/README.md create mode 100644 examples/Live-Digital-Clock/index.html create mode 100644 examples/Live-Digital-Clock/script.js create mode 100644 examples/Live-Digital-Clock/styles.css diff --git a/examples/Live-Digital-Clock/README.md b/examples/Live-Digital-Clock/README.md new file mode 100644 index 00000000..b6810108 --- /dev/null +++ b/examples/Live-Digital-Clock/README.md @@ -0,0 +1,27 @@ +# 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 +``` + +## Files + +- `index.html` – Markup for the clock layout and controls. +- `styles.css` – Gradient background and responsive card-style UI. +- `script.js` – Reads time with `Date`, updates the DOM, and handles the format toggle. diff --git a/examples/Live-Digital-Clock/index.html b/examples/Live-Digital-Clock/index.html new file mode 100644 index 00000000..993d4f82 --- /dev/null +++ b/examples/Live-Digital-Clock/index.html @@ -0,0 +1,48 @@ + + + + + + Live Digital Clock + + + + + + +
+
+
+

Digital Clock

+

Shows the current time with a 12/24-hour toggle using the JavaScript Date object.

+
+ +
+
+
+ Hours + 00 +
+ : +
+ Minutes + 00 +
+ : +
+ Seconds + 00 +
+
AM
+
+
+ +
+ +
+
+
+ + + + diff --git a/examples/Live-Digital-Clock/script.js b/examples/Live-Digital-Clock/script.js new file mode 100644 index 00000000..3da67c9a --- /dev/null +++ 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 new file mode 100644 index 00000000..0b3204b6 --- /dev/null +++ b/examples/Live-Digital-Clock/styles.css @@ -0,0 +1,164 @@ +@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: #f5f6fa; + 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: #ffffff; + 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(1.8rem, 3vw, 2.4rem); + font-weight: 700; + margin-bottom: 4px; +} + +.subtitle { + color: #6b7280; + font-size: 0.93rem; + line-height: 1.5; +} + +.clock-face { + background: #f4f6fb; + border-radius: 12px; + padding: 20px; + border: 1px solid #e4e7ee; +} + +.time-row { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + flex-wrap: wrap; +} + +.time-block { + text-align: center; + background: #ffffff; + border-radius: 10px; + padding: 12px 10px; + border: 1px solid #e4e7ee; + min-width: 110px; +} + +.label { + display: block; + color: #6b7280; + font-size: 0.85rem; + margin-bottom: 4px; +} + +.value { + display: inline-block; + font-size: clamp(2.4rem, 4vw, 3.2rem); + font-weight: 700; + letter-spacing: 0.04em; +} + +.colon { + text-align: center; + font-size: clamp(2.4rem, 4vw, 3.2rem); + font-weight: 700; + color: #2563eb; + padding: 0 4px; +} + +.ampm { + justify-self: end; + padding: 10px 12px; + border-radius: 10px; + background: #e8f1ff; + color: #1d4ed8; + font-weight: 600; + border: 1px solid #d6e5ff; + letter-spacing: 0.05em; +} + +.controls { + margin-top: 24px; + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; + justify-content: center; + text-align: center; +} + +.controls button { + background: #2563eb; + color: #ffffff; + border: none; + border-radius: 10px; + padding: 12px 16px; + font-weight: 600; + 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-direction: column; + gap: 10px; + } + + .colon { + display: none; + } + + .ampm { + width: 100%; + text-align: center; + } +} From 0a52fe0926fea235f5a0b6f1065eeff509cda076 Mon Sep 17 00:00:00 2001 From: dumartins Date: Fri, 28 Nov 2025 15:51:15 -0500 Subject: [PATCH 2/6] fixed responsiveness issue --- examples/Live-Digital-Clock/styles.css | 48 ++++++++++++++++---------- 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/examples/Live-Digital-Clock/styles.css b/examples/Live-Digital-Clock/styles.css index 0b3204b6..01853826 100644 --- a/examples/Live-Digital-Clock/styles.css +++ b/examples/Live-Digital-Clock/styles.css @@ -45,33 +45,30 @@ body { } .subtitle { + margin-top: 20px; + margin-bottom: 30px; color: #6b7280; font-size: 0.93rem; line-height: 1.5; } -.clock-face { - background: #f4f6fb; - border-radius: 12px; - padding: 20px; - border: 1px solid #e4e7ee; -} - .time-row { display: flex; align-items: center; justify-content: center; - gap: 12px; - flex-wrap: wrap; + gap: 10px; + flex-wrap: nowrap; + width: 100%; } .time-block { text-align: center; background: #ffffff; border-radius: 10px; - padding: 12px 10px; + padding: 10px 8px; border: 1px solid #e4e7ee; - min-width: 110px; + flex: 1 1 0; + min-width: 0; } .label { @@ -83,17 +80,17 @@ body { .value { display: inline-block; - font-size: clamp(2.4rem, 4vw, 3.2rem); + font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: 0.04em; } .colon { text-align: center; - font-size: clamp(2.4rem, 4vw, 3.2rem); + font-size: clamp(2rem, 5vw, 2.4rem); font-weight: 700; color: #2563eb; - padding: 0 4px; + padding: 0 3px; } .ampm { @@ -105,6 +102,7 @@ body { font-weight: 600; border: 1px solid #d6e5ff; letter-spacing: 0.05em; + flex: 0 1 auto; } .controls { @@ -149,16 +147,30 @@ body { } .time-row { - flex-direction: column; - gap: 10px; + 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 { - display: none; + font-size: clamp(1.6rem, 8vw, 2.1rem); + padding: 0 2px; } .ampm { - width: 100%; + width: auto; text-align: center; + align-self: center; + padding: 8px 10px; + font-size: 0.85rem; } } From 0691e83cb6ee354a508be3cee546b18ad91527ec Mon Sep 17 00:00:00 2001 From: dumartins Date: Fri, 28 Nov 2025 16:10:47 -0500 Subject: [PATCH 3/6] enhanced styling --- examples/Live-Digital-Clock/styles.css | 31 ++++++++++++++------------ 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/examples/Live-Digital-Clock/styles.css b/examples/Live-Digital-Clock/styles.css index 01853826..946e6fea 100644 --- a/examples/Live-Digital-Clock/styles.css +++ b/examples/Live-Digital-Clock/styles.css @@ -9,7 +9,7 @@ body { min-height: 100vh; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: #f5f6fa; + background: edf2fb; color: #1f2a44; display: flex; align-items: center; @@ -25,7 +25,7 @@ body { .clock-card { width: 100%; - background: #ffffff; + background-color: rgba(202, 240, 248, 0.3); border: 1px solid #e4e7ee; border-radius: 14px; padding: 28px 22px; @@ -39,16 +39,17 @@ body { .clock-header h1 { - font-size: clamp(1.8rem, 3vw, 2.4rem); + font-size: clamp(2.4rem, 4vw, 3rem); + color: #034078; font-weight: 700; margin-bottom: 4px; } .subtitle { - margin-top: 20px; - margin-bottom: 30px; - color: #6b7280; - font-size: 0.93rem; + margin-top: 15px; + margin-bottom: 25px; + color: #034078; + font-size: 1rem; line-height: 1.5; } @@ -63,7 +64,8 @@ body { .time-block { text-align: center; - background: #ffffff; + color: #1282a2; + background-color: #ffffff; border-radius: 10px; padding: 10px 8px; border: 1px solid #e4e7ee; @@ -73,8 +75,9 @@ body { .label { display: block; - color: #6b7280; + color: #034078; font-size: 0.85rem; + font-weight: 500; margin-bottom: 4px; } @@ -89,7 +92,7 @@ body { text-align: center; font-size: clamp(2rem, 5vw, 2.4rem); font-weight: 700; - color: #2563eb; + color: #81c3d7; padding: 0 3px; } @@ -97,8 +100,8 @@ body { justify-self: end; padding: 10px 12px; border-radius: 10px; - background: #e8f1ff; - color: #1d4ed8; + background: #34a0a4; + color: #ffffff; font-weight: 600; border: 1px solid #d6e5ff; letter-spacing: 0.05em; @@ -116,12 +119,12 @@ body { } .controls button { - background: #2563eb; + background: #34a0a4; color: #ffffff; border: none; border-radius: 10px; padding: 12px 16px; - font-weight: 600; + 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); From 09b14e79f3b9a4ad6355a4eaba05f3075cf80e82 Mon Sep 17 00:00:00 2001 From: dumartins Date: Fri, 28 Nov 2025 20:10:58 -0500 Subject: [PATCH 4/6] updated README --- examples/Live-Digital-Clock/README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/examples/Live-Digital-Clock/README.md b/examples/Live-Digital-Clock/README.md index b6810108..abbf95ca 100644 --- a/examples/Live-Digital-Clock/README.md +++ b/examples/Live-Digital-Clock/README.md @@ -19,9 +19,3 @@ cd examples/Live-Digital-Clock open index.html # or double-click index.html in your file explorer ``` - -## Files - -- `index.html` – Markup for the clock layout and controls. -- `styles.css` – Gradient background and responsive card-style UI. -- `script.js` – Reads time with `Date`, updates the DOM, and handles the format toggle. From a4ef1e2f69b1643beb07190f8d84b471ec0b5258 Mon Sep 17 00:00:00 2001 From: Eduardo Martins <62680864+dumartins@users.noreply.github.com> Date: Fri, 28 Nov 2025 21:41:05 -0500 Subject: [PATCH 5/6] made button text initialization consistent Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- examples/Live-Digital-Clock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/Live-Digital-Clock/index.html b/examples/Live-Digital-Clock/index.html index 993d4f82..583deb9b 100644 --- a/examples/Live-Digital-Clock/index.html +++ b/examples/Live-Digital-Clock/index.html @@ -38,7 +38,7 @@

Digital Clock

- +
From 461e77ebdba745f9ec90a1c4ee4ae27ab4c7394d Mon Sep 17 00:00:00 2001 From: Eduardo Martins <62680864+dumartins@users.noreply.github.com> Date: Fri, 28 Nov 2025 21:41:38 -0500 Subject: [PATCH 6/6] fixed body background color Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- examples/Live-Digital-Clock/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/Live-Digital-Clock/styles.css b/examples/Live-Digital-Clock/styles.css index 946e6fea..90b4d7b7 100644 --- a/examples/Live-Digital-Clock/styles.css +++ b/examples/Live-Digital-Clock/styles.css @@ -9,7 +9,7 @@ body { min-height: 100vh; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: edf2fb; + background: #edf2fb; color: #1f2a44; display: flex; align-items: center;