feat: Add buttons for time selection

dist/index.html

@@ -15,16 +15,24 @@
 	<section>
 		<div id="countdown">
 			<div id="days" class="part">
+				<span class="up">&Lang;</span>
 				<input type="text" value="0">
+				<span class="down">&Rang;</span>
 			</div>
 			<div id="hours" class="part">
-				<input type="text" value="0"> : 
+				<span class="up">&Lang;</span>
-			</div>
-			<div id="minutes" class="part">
-				<input type="text" value="0"> : 
-			</div>
-			<div id="seconds" class="part">
 				<input type="text" value="0">
+				<span class="down">&Rang;</span>
+			</div> :
+			<div id="minutes" class="part">
+				<span class="up">&Lang;</span>
+				<input type="text" value="0">
+				<span class="down">&Rang;</span>
+			</div> :
+			<div id="seconds" class="part">
+				<span class="up">&Lang;</span>
+				<input type="text" value="0">
+				<span class="down">&Rang;</span>
 			</div>
 		</div>
 	</section>

dist/main.css

@@ -12,8 +12,10 @@ body {
     background-color: grey;
 }
 
-#countdown div {
+#countdown .part {
     display: inline-block;
+    position: relative;
+    padding-top: 1vw;
 }
 
 #countdown * {
@@ -22,4 +24,23 @@ body {
 
 #countdown input {
     width: 6vw;
+    height: 3.3vw;
+}
+
+#countdown .up, #countdown .down {
+    position: absolute;
+    line-height: 3vw;
+    width: 1vw;
+    text-align: center;
+    left: calc(50% - 0.5vw);
+    transform: rotate(90deg);
+    cursor: pointer;
+}
+
+#countdown .up {
+    top: calc(-1vw - 0.2vw);
+}
+
+#countdown .down {
+    top: calc(3.3vw + 0.2vw);
 }

src/index.js

@@ -1,8 +1,11 @@
 (function() {
+    var counting = false;
+
     const parts = {
         "days": {
             "next": null,
             "prev": "hours",
+            "value": 0,
             "maxValue": 999,
             "element": null,
             "input": null,
@@ -10,6 +13,7 @@
         "hours": {
             "next": "days",
             "prev": "minutes",
+            "value": 0,
             "maxValue": 24,
             "element": null,
             "input": null,
@@ -17,6 +21,7 @@
         "minutes": {
             "next": "hours",
             "prev": "seconds",
+            "value": 0,
             "maxValue": 60,
             "element": null,
             "input": null,
@@ -24,6 +29,7 @@
         "seconds": {
             "next": "minutes",
             "prev": null,
+            "value": 0,
             "maxValue": 60,
             "element": null,
             "input": null,
@@ -44,16 +50,38 @@
                 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.value = parseInt(parts[part.next].input.value) + Math.floor(value / part.maxValue);
+                        parts[part.next].input.dispatchEvent(new FocusEvent("blur"));
+                    } else {
+                        // ugly hack to only reset to 0 if the blur event was caused by cascading changes
+                        if (Math.abs(value - part.value) == 1) {
+                            part.input.value = 0;
+                        } else {
+                            part.input.value = part.maxValue;
+                        }
+                    }
+                } else if (value < 0) {
+                    if (part.next) {
+                        part.input.value = value + part.maxValue * Math.ceil(-value / part.maxValue);
+                        parts[part.next].input.value = parseInt(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;
                 }
+                part.value = parseInt(part.input.value);
+            });
+
+            element.getElementsByClassName("up")[0].addEventListener("click", function(event) {
+                part.input.value = parseInt(part.input.value) + 1;
+                part.input.dispatchEvent(new FocusEvent("blur"));
+            });
+
+            element.getElementsByClassName("down")[0].addEventListener("click", function(event) {
+                part.input.value = parseInt(part.input.value) - 1;
+                part.input.dispatchEvent(new FocusEvent("blur"));
             });
         });
     });