diff options
| author | zlg <zlg@zlg.space> | 2024-08-16 07:24:17 -0700 |
|---|---|---|
| committer | zlg <zlg@zlg.space> | 2024-08-17 01:46:52 -0700 |
| commit | 0f06c4ac974a388320da4a014a77ef26566b27f0 (patch) | |
| tree | 30d63829be75c6a393a8fcf3f73e4ce25e681fee | |
| parent | Update footer (diff) | |
| download | zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.gz zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.bz2 zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.xz zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.zip | |
Add progress bar countdown style
| -rw-r--r-- | make_timer.html | 9 | ||||
| -rw-r--r-- | timer.css | 12 | ||||
| -rw-r--r-- | timer.html | 5 | ||||
| -rw-r--r-- | timer.js | 36 |
4 files changed, 55 insertions, 7 deletions
diff --git a/make_timer.html b/make_timer.html index d625767..3a6e178 100644 --- a/make_timer.html +++ b/make_timer.html @@ -18,6 +18,11 @@ <article class="timer_maker"> <form action="./timer.html" method="get"> <section> + <label for="cdstyle">Countdown Style</label> + <input type="radio" id="cdstyle" name="cdstyle" value="standard">Standard Countdown</input> + <input type="radio" id="cdstyle" name="cdstyle" value="bar">Progress Bar</input> + </section> + <section> <label for="duration">Countdown Duration, in seconds</label> <input name="duration" type="number" id="duration" min="10" value="60" required> </section> @@ -33,6 +38,10 @@ <label for="f_color">Font Color</label> <input name="f_color" type="color" id="f_color"> </section> + <section> + <label for="b_color">Bar Color</label> + <input name="b_color" type="color" id="b_color"> + </section> <section class="bottom"> <input type="submit" value="Make My Timer"> <input type="reset" value="Reset to Defaults"> @@ -9,7 +9,7 @@ body { } #page { - font-size: 85vh; + font-size: 30vh; /* other font sizes, depending on CEF support */ /* font-size: min(30vmin, max(90vh, calc(100vw * 0.40))); */ /* font-size: clamp(10vmin, 90vh, calc(100vw * 0.40)); */ @@ -28,3 +28,13 @@ body { height: 100%; margin: 0 auto; } + +#bar { + height: 20vh; +} + +#progress { + background: #000; + width: 0%; + height: inherit; +} @@ -21,11 +21,6 @@ body elements. --> <body onload="setupCountdown();"> <div id="page"> - <div id="countdown"> - <div id="minutes">00</div> - <div id="separator">:</div> - <div id="seconds">00</div> - </div> </div> <script src="./timer.js" type="text/javascript"></script> </body> @@ -1,7 +1,9 @@ let params; let cur_seconds = null; let timer_id; -const cd = document.getElementById("countdown"); +let cd; + +const page = document.getElementById("page"); function setupCountdown() { params = new URLSearchParams(document.location.search); @@ -9,12 +11,37 @@ function setupCountdown() { console.log(`${key}: ${value}`); } + switch (params.get("cdstyle")) { + case "standard": + page.innerHTML = ` + <div id="countdown"> + <div id="minutes">00</div> + <div id="separator">:</div> + <div id="seconds">00</div> + </div> + `; + break; + case "bar": + page.innerHTML = ` + <div id="bar"><div id="progress"></div> + <div id="countdown"> + <div id="minutes">00</div> + <div id="separator">:</div> + <div id="seconds">00</div> + </div> + `; + break; + } + cd = document.getElementById("countdown"); cur_seconds = parseInt(params.get("duration")); if (params.get("f_family") !== "") { cd.style.fontFamily = params.get("f_family"); } cd.style.color = params.get("f_color"); + if (params.get("cdstyle") == "bar") { + document.getElementById("progress").style.backgroundColor = params.get("b_color"); + } draw(); timer_id = window.setInterval(tick, 1000); @@ -33,6 +60,9 @@ function tick() { } cur_seconds--; draw(); + if (params.get("cdstyle") == "bar") { + draw_bar(); + } } function draw() { @@ -40,6 +70,10 @@ function draw() { document.getElementById("seconds").textContent = zero_pad((cur_seconds % 60)); } +function draw_bar() { + document.getElementById("progress").style.width = (((params.get("duration") - cur_seconds) / params.get("duration")) * 100) + "vw"; +} + function zero_pad(num) { if (num < 10) { return "0"+num; |