Skip to content

Instantly share code, notes, and snippets.

@itsmemattchung

itsmemattchung/tap_counter.html

Created May 17, 2022 02:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save itsmemattchung/24c8105b5fd353963c350eac7fa1d05c to your computer and use it in GitHub Desktop.
Save itsmemattchung/24c8105b5fd353963c350eac7fa1d05c to your computer and use it in GitHub Desktop.
Download ZIP
tap counter v2.01
Raw
tap_counter.html
<!DOCTYPE html>
<head>
<script>
var isCountingDown = false;
var counter = 20;
function countdown() {
var timer = document.getElementById("countdownTimer");
}
function incrementCounter() {
if (!isCountingDown) {
isCountingDown = true;
setInterval(function() {
var counterElement = document.getElementById("counter");
counterValue = parseInt(counterElement.innerText);
if (counterValue >= 100) {
return;
}
var timerElement = document.getElementById("timer");
timerValue = parseInt(timerElement.innerText) + 1;
timerElement.innerText = timerValue;
}, 1000);
}
var counterElement = document.getElementById("counter");
counterValue = parseInt(counterElement.innerText) + 1;
counterElement.innerText = counterValue;
if (counterValue == 20) {
counterElement.style.color = "blue";
}
if (counterValue == 80) {
counterElement.style.color = "red";
}
if (counterValue == 100) {
counterElement.style.color = "green";
}
}
</script>
</head>
<body>
<main>
<h1>Welcome to Tap Counter!</h1>
<h2 id="counter">0</h2>
<h3>Timer: <span id="timer">0</span><span> seconds</span></h3>
<div>
<button style="width: 50%; height: 100px" onclick="incrementCounter()">+</button>
</div>
</main>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment