web/webtools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add editable countdown timer with deadline-based timing

Browse source 
Co-authored-by: Shelley <shelley@exe.dev>
This commit is contained in:
Leon Mika 2026-10-10 06:45:15 +00:00
parent d3ed55847a
commit 9c993beda8
6 changed files with 440 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

38
site/countdown/index.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Countdown Timer - Tools</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="style.css">
<script type="module" src="main.js"></script>
</head>
<body class="container">
<header>
<hgroup>
<h1>Countdown Timer</h1>
<p>Set a time and count down</p>
</hgroup>
</header>
<main>
<section class="timer" aria-label="Countdown timer">
<div class="counter" role="group" aria-label="Time remaining">
<input id="minutes" type="text" inputmode="numeric" pattern="[0-9]*"
value="0" aria-label="Minutes" autocomplete="off" spellcheck="false"
title="Up/Down: change by 1. Shift+Up/Down: change by 10.">
<span aria-hidden="true">:</span>
<input id="seconds" type="text" inputmode="numeric" pattern="[0-9]*"
value="00" aria-label="Seconds" autocomplete="off" spellcheck="false"
title="Up/Down: change by 1. Shift+Up/Down: change by 10.">
</div>
<div class="controls">
<button id="start-stop" type="button">Start</button>
<button id="reset" class="secondary" type="button">Reset</button>
</div>
<span id="status" class="visually-hidden" role="status">Idle</span>
</section>
</main>
</body>
</html>