Including a simple countdown timer?

[alesssia]

Hello,

I was wondering if there was a way to include a very simple countdown timer in slides, as one would do in RMarkdown using the {countdown} package (https://github.com/gadenbuie/countdown)?

Thanks!

[yhatt]

Markdown can put any HTML if enabled HTML in your Marp tools, so you can feel free to put the HTML snippet or Web Component for the timer.

The following is the example to put a simple countdown timer button within Markdown. (Note: Generate by GPT)

# Timer

<style>
  #countdown {
    padding: 10px 20px;
    font-size: 20px;
    color: white;
    background-color: gray;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  #countdown.running {
    background-color: green;
  }
  #countdown.finished {
    background-color: red;
  }
</style>

<button id="countdown"></button>

<script>
<!--
const countDown = document.getElementById("countdown");
const seconds = 15; // Seconds
let timeLeft = seconds;
let timerInterval = null;

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
}

function updateButton() {
  countDown.textContent = formatTime(timeLeft);
}

function startTimer() {
  if (timerInterval === null) {
    countDown.classList.add('running');
    countDown.classList.remove('finished');
    timerInterval = setInterval(() => {
      if (timeLeft > 0) {
        timeLeft--;
        updateButton();
      } else {
        clearInterval(timerInterval);
        timerInterval = null;
        countDown.classList.remove('running');
        countDown.classList.add('finished');
        countDown.textContent = "Time's up!";
      }
    }, 1000);
  } else {
    pauseTimer();
  }
}

function pauseTimer() {
  clearInterval(timerInterval);
  timerInterval = null;
  countDown.classList.remove('running');
}

function resetTimer() {
  timeLeft = seconds;
  updateButton();
  countDown.classList.remove('finished');
  countDown.classList.remove('running');
  timerInterval = null;
}

countDown.addEventListener("click", () => {
  if (countDown.classList.contains('finished')) {
    resetTimer();
  } else {
    startTimer();
  }
});

updateButton();
-->
</script>

Click the button to start the timer.

The snippet should become simpler if there is a simple Web Component for the countdown timer, but I could not find a published component like that.

Or if interested you can create a Marp plugin to integrate the timer with simpler syntax.

[alesssia]

Apologies for the dumb questions, but my knowledge of HTML/js is close to zero.

I managed to have the code above working for one slide, but when I try to create a second timer on another slide, nothing is happening. Any idea of why/what should I do to have it working?

Additionally, if someone could create a Marp plugin, it would be highly appreciated!

Thanks!