javascriptcountercountdownflip

How do i edit the codepen FlipDown.js Countdown?

I found this countdown clock in CodePen, but I need to edit it, I need to set the final date to May 30, 2024. ¿Does anybody know how to set up the final date?

document.addEventListener('DOMContentLoaded', () => {

  // Unix timestamp (in seconds) to count down to
  var twoDaysFromNow = (new Date().getTime() / 1000) + (86400 * 2) + 1;

  // Set up FlipDown
  var flipdown = new FlipDown(twoDaysFromNow)

    // Start the countdown
    .start()

    // Do something when the countdown ends
    .ifEnded(() => {
      console.log('The countdown has ended!');
    });

  // Toggle theme
  var interval = setInterval(() => {
    let body = document.body;
    body.classList.toggle('light-theme');
    body.querySelector('#flipdown').classList.toggle('flipdown__theme-dark');
    body.querySelector('#flipdown').classList.toggle('flipdown__theme-light');
  }, 5000);
  
  var ver = document.getElementById('ver');
  ver.innerHTML = flipdown.version;
});

Or anybody can tell me where ¿I can find a flip countdown easy to set up?

THANKS

Solution

  • Get the timestamp with milliseconds of May 30, 2024, then turn it to seconds by dividing by 1000, and pass it to the FlipDown constructor

    const finalDate = new Date('2024-05-30T00:00:00Z').getTime() / 1000;

  // Set up FlipDown
const flipdown = new FlipDown(finalDate)

    // Start the countdown
    .start()

    // Do something when the countdown ends
    .ifEnded(() => {
      console.log('The countdown has ended!');
    });