Countdown Timer for Virtual Meetings

See it live: https://thejoshdean.com/timer

I built this lightweight countdown timer as a clean, ad‑free “entry dashboard” for virtual meetings or conferences. When people join early, they immediately see a large timer over a subtle looping video background plus a short message about when we’ll start.

What it does

• Prompts for a start time (MM:SS) and an initial on‑screen message
• Renders a big, high‑contrast countdown using a monospace font for stable layout
• Lets you live‑edit the message with a single click (contenteditable)
• Runs in any modern browser—no installs, no extensions

How it’s built

• HTML/CSS/JS only; no framework required
• Video background (<video autoplay muted loop>) styled with opacity and object-fit: cover
• Layout with Bootstrap utility classes for simple centering
• Core logic: a one‑second setInterval, time math via Date, and padStart formatting
• Optional analytics snippet and a Google Font for the counter

Core timer logic

function timerPrompt() {
  const t = prompt("Enter countdown time (MM:SS)", "10:00");
  const minutes = t.replace(/(\d?\d):(\d\d)/, "$1");
  const seconds = t.replace(/(\d?\d):(\d\d)/, "$2");
  return minutes * 60 * 1000 + seconds * 1000;
}

const endTime = new Date(Date.now() + timerPrompt());
function tick() {
  const diff = endTime - Date.now();
  const m = Math.max(0, Math.floor(diff / 1000 / 60)).toString().padStart(2, "0");
  const s = Math.max(0, Math.floor((diff / 1000) % 60)).toString().padStart(2, "0");
  document.getElementById("countdown").textContent = `${m}:${s}`;
}
tick();
setInterval(tick, 1000);

Why it works well for screen‑sharing

• Big, centered numerals are easy to read at low resolutions
• The muted video background adds motion without distracting from the timer
• No ads, no clutter, and quick restarts with a refresh

Notes and potential improvements

• Replace prompt() with a modal for better keyboard flow
• Add a “+1 minute” button and a simple pause/resume
• Allow preset themes and backgrounds (solid color for high contrast, or static image for low CPU)