feat: add title and end params for countdown
This commit is contained in:
commit
dd2a962264
GPG key ID:
111C00916C1641E5
6 changed files with 128 additions and 0 deletions
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2024 sup39
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
5
README.md
Normal file
5
README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Countdown
|
||||||
|
Countdown web page for sup39
|
||||||
|
|
||||||
|
## Example
|
||||||
|
https://app.sup39.dev/countdown/?title=TITLE&end=2024-12-31%2012:07
|
||||||
44
index.html
Normal file
44
index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Countdown | sup39</title>
|
||||||
|
<meta name="description" content="Countdown web page for sup39">
|
||||||
|
<meta name="author" content="sup39">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://res.sup39.dev/index.css">
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
#title {
|
||||||
|
margin-inline-end: 0em;
|
||||||
|
}
|
||||||
|
#ct-root {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
#ct-root span[id] {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #2ee5b8;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div id="title"></div>
|
||||||
|
<div id="ct-root">
|
||||||
|
<span id="ct-sign"></span>
|
||||||
|
<span id="ct-d">0</span>
|
||||||
|
<span>d</span>
|
||||||
|
<span id="ct-h">00</span>
|
||||||
|
<span>h</span>
|
||||||
|
<span id="ct-m">00</span>
|
||||||
|
<span>m</span>
|
||||||
|
<span id="ct-s">00</span>
|
||||||
|
<span>s</span>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>Source code: <a href="https://forgejo.sup39.dev/sup39/countdown">supGit/sup39/countdown</a></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
index.js
Normal file
43
index.js
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
// Copyright (c) 2024 sup39
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const end = +new Date(params.get('end') ?? +new Date());
|
||||||
|
console.log(params.get('end'));
|
||||||
|
|
||||||
|
/** @param {string} selector */
|
||||||
|
const queryKnownSelector = selector =>
|
||||||
|
/**@type{HTMLElement}*/(document.querySelector(selector));
|
||||||
|
|
||||||
|
const title = params.get('title');
|
||||||
|
if (title != null) {
|
||||||
|
queryKnownSelector('#title').textContent = title;
|
||||||
|
}
|
||||||
|
|
||||||
|
const units = [
|
||||||
|
{max: 60, digit: 2, element: queryKnownSelector('#ct-s')},
|
||||||
|
{max: 60, digit: 2, element: queryKnownSelector('#ct-m')},
|
||||||
|
{max: 24, digit: 2, element: queryKnownSelector('#ct-h')},
|
||||||
|
{max: Infinity, digit: 0, element: queryKnownSelector('#ct-d')},
|
||||||
|
];
|
||||||
|
const elmSign = queryKnownSelector('#ct-sign');
|
||||||
|
let t0 = 0;
|
||||||
|
function render() {
|
||||||
|
const t = (end - +new Date()) / 1000 | 0;
|
||||||
|
if (t !== t0) {
|
||||||
|
let val = t;
|
||||||
|
const isMinus = val < 0;
|
||||||
|
if (isMinus) val = -val;
|
||||||
|
elmSign.textContent = isMinus ? '-' : '';
|
||||||
|
for (const {max, digit, element} of units) {
|
||||||
|
element.textContent = String(val % max).padStart(digit, '0');
|
||||||
|
val = val / max | 0;
|
||||||
|
}
|
||||||
|
// next
|
||||||
|
t0 = t;
|
||||||
|
}
|
||||||
|
requestAnimationFrame(render);
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
});
|
||||||
7
jsconfig.json
Normal file
7
jsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["dom", "es2017"],
|
||||||
|
"checkJs": true,
|
||||||
|
"strict": true
|
||||||
|
}
|
||||||
|
}
|
||||||
8
package.json
Normal file
8
package.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"name": "@sup39/countdown",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Countdown web page for sup39",
|
||||||
|
"author": "sup39 <dev@sup39.dev>",
|
||||||
|
"license": "MIT",
|
||||||
|
"private": true
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue