javascript - How can I make a button that is disabled for 1 minute when clicked?

Question

I am trying to make a button that will be disabled for 1 minute when you click on it. Only when the button is enabled and you click on it, 25 points should be added to a div (div starts at 0). After each click, the button will be disabled and the timer will start running.

Here are some pictures to make the whole thing a bit more understandable:

question from:https://stackoverflow.com/questions/65897359/how-can-i-make-a-button-that-is-disabled-for-1-minute-when-clicked

Answer 1

Here is your code

$('#btn').prop('disabled',true);
startCountDown();

function getCounter(){
  return  parseInt($('#counter').html());
}
function setCounter(count) {
  $('#counter').html(count);
}

$("#btn").click(function() {
  setCounter(getCounter()+25);
  $('#btn').prop('disabled',true);
  startCountDown();
});

function startCountDown() {
  var minutes = 0,
    seconds = 59;
  $("#countdown").html(minutes + ":" + seconds);
  var count = setInterval(function() {
    if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
      $("#countdown").html(minutes + ":" + seconds);
      clearInterval(count);
      $('#btn').prop('disabled',false);
    } else {
      $("#countdown").html(minutes + ":" + seconds);
      seconds--;
      if (seconds < 10) seconds = "0" + seconds;
    }
  }, 1000);
}

#counter{
  font-size: 25px;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">0</div>
<button id="btn">
<span id="countdown">0:00</span>
</button>