How can I make a button clickable if countdown har reached 0?

Question

I have a countdown until marvel movies have their premier and would like to have a button "Book Tickets" that is unclickable when counting down, and then make it clickable when the countdown has reached 0. How do I do that?

I have tried to make if-statements, but something is wrong.

var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
  clockFace: 'DailyCounter',
  countdown: true
  });

You can see the countdown I currently have on: http://www.student.city.ac.uk/~aczc972/

The callback seems to work well with alerts, even though the alert comes at second 1 and not 0, although I just need to find a way of changing the behaviour of the button.

This is the new code

var clock = $('.clock3').FlipClock(new Date("April 10, 2019 12:27:00"), {
  clockFace: 'DailyCounter',
  countdown: true,
  callbacks: {
    stop: function() {
      alert("Hello! I am an alert box!!");
    }
  }
});

Answer 1

It's hard to figure what code to put in for your button since there isn't one available on your website. Here's a potential solution: http://jsfiddle.net/kdyzxLbt/

var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
  clockFace: 'DailyCounter',
  countdown: true
});

setTimeout(function(){ 
  checktime();
}, 1000);

function checktime(){
  t = clock.getTime();
  if(t<=0){
    $('#myBtn').removeAttr('disabled');
  }
  setTimeout(function(){ 
    checktime();
  }, 1000);
}

Basically it starts your clock and checks the time every second. If the time is less than or equal to 0 it enables your button.

Source: Countdown flipclock and reset after counting to zero