After timer countdown reach 0 button will appeared & when registered user click on the button, it should disappeared or hide for that specific user. Even on page reload or refresh button shouldn't appeared before 2 hours counted from the click event time.
When registered user click on the claim button it should hide & countdown timer should be counting continuously with loop system.
var clicks = 0;
var interval = -1;
function showTimer(selector, seconds)
{
var startTime = Date.now();
function showRemaining()
{
var delta = Date.now() - startTime; // milliseconds
var deltaSeconds = delta / (1000);
if (deltaSeconds < seconds) {
// display minutes remaining
$(selector).text(Math.round(seconds - deltaSeconds));
} else {
$(selector).text(0);
clearInterval(interval);
$("#proceed").show(); // Look at here
}
}
if( interval > -1 ) clearInterval(interval);
interval = setInterval(showRemaining, 1000);
showRemaining();
}
$(function() {
showTimer("#countdown", 10);
});
//when click button
function onClick() {
$("#proceed").hide();
alert("Successfully Added Your Points Into Your Wallet");
$("#clicks").text(++clicks);
showTimer("#countdown", 10);
};.container {
margin: 0 auto;
padding: 20px;
width: 30%;
text-align: center;
border-radius: 20px;
background: coral;
overflow: hidden;
}
#countdown {
font-family: montserrat;
font-size: 50px;
font-weight: bolder;
color: #fff;
}
#proceed {
border: 1px solid #fff;
border-radius: 20px;
padding: 15px;
background: transparent;
}
#btn {
font-family: montserrat;
font-size: 20px;
font-weight: bolder;
color: #fff;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span id="countdown"></span>
<br>
<br>
<button type="button" id="proceed" onclick="onClick()"><a href="#" id="btn" class="btn btn-1">Claim Your Points</a></button><br>
</div>