horlah/counter.html

## counter.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>hallelujah</title>

        <style>
            body,
            html {
                padding: 0;
                margin: 0;
            }

            #container {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
                flex-direction: column;
            }

            #counter {
                font-size: 20rem;
            }

            button {
                margin-top: 40px;
                padding: 10px 20px;
                font-size: 16px;
                border: 1px solid rgb(162, 162, 162);
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="counter">0</div>
            <button disabled="true">Continue</button>
        </div>
    </body>

    <script>
        const urlSearchParams = new URLSearchParams(window.location.search);
        const params = Object.fromEntries(urlSearchParams.entries());

        let hallelujahs = 0;
        let pause = false;

        const continueButton = document.querySelector("button");
        continueButton.addEventListener("click", () => (pause = false));

        let { totalCount, interval } = params;
        const intervalForUpdates = params.interval;

        const _wordIntervalTimer = setInterval(() => {
            if (!pause) {
                hallelujahs = hallelujahs + 1;
                document.querySelector("#counter").textContent = hallelujahs;

                if (hallelujahs == parseInt(interval)) {
                    pause = true;
                    interval = parseInt(interval) + parseInt(intervalForUpdates);
                    continueButton.disabled = false;
                    if (hallelujahs == totalCount) continueButton.style.display = "none";
                } else {
                    continueButton.disabled = true;
                }
            }
        }, 2000);
    </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>hallelujah</title>

	<style>
	body,
	html {
	padding: 0;
	margin: 0;
	}

	#container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	flex-direction: column;
	}

	#counter {
	font-size: 20rem;
	}

	button {
	margin-top: 40px;
	padding: 10px 20px;
	font-size: 16px;
	border: 1px solid rgb(162, 162, 162);
	border-radius: 10px;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="counter">0</div>
	<button disabled="true">Continue</button>
	</div>
	</body>

	<script>
	const urlSearchParams = new URLSearchParams(window.location.search);
	const params = Object.fromEntries(urlSearchParams.entries());

	let hallelujahs = 0;
	let pause = false;

	const continueButton = document.querySelector("button");
	continueButton.addEventListener("click", () => (pause = false));

	let { totalCount, interval } = params;
	const intervalForUpdates = params.interval;

	const _wordIntervalTimer = setInterval(() => {
	if (!pause) {
	hallelujahs = hallelujahs + 1;
	document.querySelector("#counter").textContent = hallelujahs;

	if (hallelujahs == parseInt(interval)) {
	pause = true;
	interval = parseInt(interval) + parseInt(intervalForUpdates);
	continueButton.disabled = false;
	if (hallelujahs == totalCount) continueButton.style.display = "none";
	} else {
	continueButton.disabled = true;
	}
	}
	}, 2000);
	</script>
	</html>
No results found