JSFiddle - React, Tailwind, and code Playground

by helpinspireme

HTML

<button id="attempt-btn">
Attempts <span id="attempt-count">0</span>
</button>

<p id="hint" style="display: none;">
Hint Here
</p>

JavaScript

var attemptsCount = 0;
var seconds = 3;

document.getElementById("attempt-btn").onclick = function(){
	attemptsCount++;
    document.getElementById("attempt-count").innerHTML = attemptsCount;
    document.getElementById("hint").style.display = 'block';
    
    if (attemptsCount <= 3) {
    	document.getElementById("attempt-btn").disabled = true;
        setTimeout(hideTimer, seconds * 1000);
    }
}

function hideTimer() {
    document.getElementById("hint").style.display = 'none';
    document.getElementById("attempt-btn").disabled = false;
}



/* Works with timeout
var attemptsCount = 0;

document.getElementById("attempt-btn").onclick = function(){
	attemptsCount++;
    document.getElementById("attempt-count").innerHTML = attemptsCount;
    document.getElementById("hint").style.display = 'block';
    
    if (attemptsCount <= 3) {
    	document.getElementById("attempt-btn").disabled = true;
        setTimeout(hideTimer, 3000);
    }
}

function hideTimer() {
    document.getElementById("hint").style.display = 'none';
    document.getElementById("attempt-btn").disabled = false;
}
*/




/* var attemptsCount = 0;
var interval = null;

document.getElementById("attempt-btn").onclick = function(){
    attemptsCount++;
    document.getElementById("attempt-count").innerHTML = attemptsCount;
    document.getElementById("hint").style.display = 'block';
    
    if (attemptsCount <= 2) {
        interval = setInterval(hideTimer, 1000);
    }
}

function hideTimer() {
    document.getElementById("hint").style.display = 'none';
    clearInterval(interval);
} */