Tap tempo bookmarklet

tap-tempo.js

javascript: (function() {
    let counter;
    let tapTimes = [];

    function initialize() {
        const tapTempoElement = document.getElementById("tap-tempo-counter");
        if (tapTempoElement) {
            counter = tapTempoElement
        } else {
            counter = document.createElement("div");
            counter.setAttribute("id", "tap-tempo-counter");
            document.body.appendChild(counter);
        }
        
        counter.style.borderRadius = "5px";
        counter.style.textAlign = "center";
        counter.style.position = "fixed";
        counter.style.left = "8px";
        counter.style.bottom = "8px";
        counter.style.background = "#222";
        counter.style.padding = '8px 16px';
        counter.style.color = "#eee";
        counter.style.fontSize = "24px";
        counter.style.fontFamily = "Arial, sans-serif";
        counter.style.zIndex = "9999999";
        counter.innerText = "--"
    }

    function tap(e) {
        if (e.key === "Escape") {
            document.body.removeChild(counter);
            window.removeEventListener("keydown", tap);
        } else {
            tapTimes.push(performance.now());
            const n = tapTimes.length;
            if (n >= 2) {
                const x = n - 1;
                if (tapTimes[x] - tapTimes[x-1] > 2000) {
                    tapTimes = tapTimes.slice(x);
                    counter.innerText = "--";
                    return;
                }
                const y = tapTimes[x] - tapTimes[0];
                const tempo = 60000 * x / y;
                counter.innerText = tempo.toFixed(2) + " BPM";
            }
        }
    }

    initialize();

    window.addEventListener("keydown", tap);
})();