JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span id="count"></span>
<span id="timer"></span>
<div id="splash" class="waiting"></div>

SCSS

html, body { margin: 0 }

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;
}

#splash {
    pointer-events: auto;
    position: absolute;
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    color: #000;
    &.waiting {
        background: #000;
        color: #fff;
        &:before {
            content: "Click to start";
        }
    }
}

JavaScript

var splash = document.getElementById("splash"),
    count = document.getElementById("count"),
    timer = document.getElementById("timer");

var limit = 25,
    clicks = 0,
    t = null,
    i = null;

function click() {
    if (!clicks++) {
        splash.classList.remove("waiting");
        timer.textContent = limit + " seconds";
        
        t = setTimeout(end, limit * 1000);
        i = setInterval(function() {
            timer.textContent = (--limit) + " seconds";;
        }, 1000);
    }
    
    count.textContent = clicks;
}

function end() {
    clearTimeout(t);
    clearInterval(i);
    t = i = null;
    timer.textContent = "Done";
    splash.removeEventListener("mousedown", click);
}

splash.addEventListener("mousedown", click);