JavaScript Click Counter

Create a click counter in JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>Click Count</title>
</head>

<body>
    <span id="secondsScreen">5s</span>
    <span id="clicksCount">00</span>
    <button onclick="startClick()">Cliks</button>
    <div id="showTotalClick"></div>
</body>

</html>

javascript

let intervalId;
let countDown = 5;
let isRunning = false;
let stopCounter = false;
let clicks = 1;
let totalClick = 0;

const clicksCount = document.getElementById("clicksCount");
const secondsScreen = document.getElementById("secondsScreen");
const showTotalClick = document.getElementById("showTotalClick");

function startClick() {
    if (stopCounter) return;

    totalClick = clicksCount.innerText = String(clicks++).padStart(2, "0");
    stratCountDown();
}

function stratCountDown() {
    if (isRunning) return;

    clearInterval(intervalId);

    intervalId = setInterval(() => {
        if (countDown > 0) {
            countDown--;
            secondsScreen.innerText = countDown + "s";
        } else {
            clearInterval(intervalId);
            stopCounter = true;
            showTotalClick.innerHTML = `<span>Your total clicks was: ${totalClick}</span>`;
        }
    }, 1000);

    isRunning = true;
}