Disable a button for some hours with countdown in javascript [closed]

Question

I want the button to be disabled after clicking it for 1 hr with displaying the countdown for current logged in user, is it possible to store time in firebase? And retrieve it and i want the time to be continue even the client refreshes the site. Any ideas or suggestions

Answer 1

For your initial question (without Firebase), here is a quick example

const button = document.querySelector('#mybutton');
let sec = 5;
let countdown = null;

const updateButton = () => {
  button.innerHTML = `wait ${sec}s`;
  
  if (sec === 0) {
    clearInterval(countdown);
    sec = 5;
    button.innerHTML = 'Click me';
    button.disabled = false;
    return;
  }

  sec--;
}

button.onclick = () => {
  button.disabled = true;
  updateButton();
  countdown = setInterval(function() {
    updateButton();
  }, 1000);
}

<button id="mybutton">Click me</button>

I guess you could make calls to Firebase when you init the sec variable and when you update it, but you could just use local storage for that as you would not add any security using Firebase to prevent any request to be sent.

Answer 2

Store the timer inside the browser storage and create a setTimeout on click or on browser refresh by picking up the remaining milliseconds from the browser.