diff --git a/examples/Live-Digital-Clock/README.md b/examples/Live-Digital-Clock/README.md new file mode 100644 index 00000000..abbf95ca --- /dev/null +++ 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 new file mode 100644 index 00000000..583deb9b --- /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..90b4d7b7 --- /dev/null +++ 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; + } +}