Search code examples
jquerybuttoncookiestimerdisabled-input

Create a cookie for a button and disable it after 10 minutes


So I am having this page where I have a main button that takes you to an other page within the website.
So we have "/" and "/game". Once you are in /game there's an other button with id #quest1. Once someone clicks that button, a timer is set for the main button (a.PlayNow) to turn red for 10 minutes.
The problem is my code never changes.
I made this work, but the button doesn't turn back to it's normal form even after 10 minutes have passed. Any help would be appreciated. Here's the code:

$(function() {
  var last = my_getcookie('lastClicked');
  var current = Math.round(Date.now() / 1000);

  $('#quest1').click(function(){
    my_setcookie('lastClicked', current ,1,0);
  });

  if( last + 600 < current ) {
    // 10 minutes over
    $('a.PlayNow').attr('href','/game').css({'background':'#a7822f','cursor':'pointer'});
    $('a.PlayNow').text('Play Crossroadz!');
  } else {
    // 10 minutes not over
    $('a.PlayNow').removeAttr('href').css({'background':'#b34c4c','cursor':'not-allowed'});
    $('a.PlayNow').text('Time not passed!');
  }
});

Solution

  • I would solve that by using a timer... Just call buttonPressed() when someone clicked your button.

    var timer;
    
    function buttonPressed()
    {
        // make button red
    
        timer = setInterval(restoreButton, 1000 * 60 * 10);
    }
    
    function restoreButton()
    {
        // make button normal again
        clearInterval(timer);
    }