From 2102b40a881b6e884b103783f1715a43815091fa Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sun, 29 Oct 2023 23:24:20 +0100 Subject: [PATCH] feat: Add text input --- dist/index.html | 38 ++++++++++++++++++++++++------ dist/main.css | 25 ++++++++++++++++++++ src/index.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 116 insertions(+), 8 deletions(-) create mode 100644 dist/main.css diff --git a/dist/index.html b/dist/index.html index 516ddf7..4f6e2b6 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,9 +1,33 @@ - - " - - - Hello World - - + + + Glitch Countdown + + + + + +
+

Glitch Countdown

+
+ +
+
+
+ +
+
+ : +
+
+ : +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/dist/main.css b/dist/main.css new file mode 100644 index 0000000..bb57877 --- /dev/null +++ b/dist/main.css @@ -0,0 +1,25 @@ +body { + background-color: black; +} + +#countdown { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50vw; + height: 8vw; + background-color: grey; +} + +#countdown div { + display: inline-block; +} + +#countdown * { + font-size: 3vw; +} + +#countdown input { + width: 6vw; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index accefce..97624df 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,60 @@ -console.log("Hello World"); +(function() { + const parts = { + "days": { + "next": null, + "prev": "hours", + "maxValue": 999, + "element": null, + "input": null, + }, + "hours": { + "next": "days", + "prev": "minutes", + "maxValue": 24, + "element": null, + "input": null, + }, + "minutes": { + "next": "hours", + "prev": "seconds", + "maxValue": 60, + "element": null, + "input": null, + }, + "seconds": { + "next": "minutes", + "prev": null, + "maxValue": 60, + "element": null, + "input": null, + }, + } + + window.addEventListener("load", function() { + Array.from(document.getElementById("countdown").getElementsByClassName("part")).forEach(element => { + const part = parts[element.id]; + part.element = element; + part.input = element.getElementsByTagName("input")[0]; + + part.input.addEventListener("input", function(event) { + part.input.value = part.input.value.replace(/[^0-9]/, ""); + }); + part.input.addEventListener("blur", function(event) { + const value = parseInt(part.input.value); + if (value >= part.maxValue) { + if (part.next) { + part.input.value = value % part.maxValue; + parts[part.next].input.value = Math.floor(value / part.maxValue); + parts[part.next].input.dispatchEvent(new FocusEvent("blur")); + } else { + part.input.value = part.maxValue; + } + } else if (value < 0) { + part.input.value = 0; + } else { + part.input.value = value; + } + }); + }); + }); +})(); \ No newline at end of file