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

feat: Add text input

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

38
dist/index.html vendored
View file

@ -1,9 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>"
</head>
<body>
Hello World
</body>
</html>
<head>
<title>Glitch Countdown</title>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Glitch Countdown</h1>
</header>
<nav></nav>
<section>
<div id="countdown">
<div id="days" class="part">
<input type="text" value="0">
</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">
<input type="text" value="0">
</div>
</div>
</section>
</body>
</html>

25
dist/main.css vendored Normal file
View file

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

61
src/index.js
View file

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