sigmasternchen/glitch-countdown
1
0
Fork 0
mirror of https://github.com/sigmasternchen/glitch-countdown synced 2025-03-15 10:38:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add buttons for time selection

Browse source
This commit is contained in:
overflowerror 2023-10-29 23:58:26 +01:00
parent 2102b40a88
commit d33dc68b6f
3 changed files with 67 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
dist/index.html vendored
View file

@ -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"> :
</div>
<div id="minutes" class="part">
<input type="text" value="0"> :
</div>
<div id="seconds" class="part">
<span class="up">&Lang;</span>
<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>

23
dist/main.css vendored
View file

@ -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);
}

34
src/index.js
View file

@ -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"));
});
});
});