How do I add this countdown timer to my site? (Personal Plan)

Is there any way to add this codepen.io countdown timer to my website? I have the personal plan. I tried copying the code into a code block with the "CSS" option but that didn't seem to work. 

5 hours ago, imdanielduncan said:

Is there any way to add this codepen.io countdown timer to my website? I have the personal plan. I tried copying the code into a code block with the "CSS" option but that didn't seem to work. 

I don't think you can since you can't add custom code, but this site works with the personal plan and an embed block.

https://www.tickcounter.com

There's also this site but I haven't tested it yet.

https://logwork.com/countdown-timer

Edit Page where you want to use Countdown > Add a Code Block with this code

<div class="countdown-timer">
  <div class="days">0</div>
  <div class="hours">0</div>
  <div class="minutes">0</div>
  <div class="seconds">0</div>
</div>
<style>
  .countdown-timer {
  padding: 1rem;
  font-size: 1.5rem;
}

.countdown-timer > div {
  display: inline-block;
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
}

.countdown-timer > div:after {
  color: #A4A4A4;
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
}

.countdown-timer > .days:after {
  content: 'days';
}

.countdown-timer > .hours:after {
  content: 'hours';
}

.countdown-timer > .minutes:after {
  content: 'minutes';
}

.countdown-timer > .seconds:after {
  content: 'seconds';
}
</style>

Add a Markdown Block under Code Block with this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  let nextMonth = new Date(new Date().getFullYear(),
                         (new Date().getMonth() + 1) % 12);

if (nextMonth.getMonth() == 0) {
  nextMonth.setFullYear(nextMonth.getFullYear() + 1);
}

let nextMonthString = nextMonth.toISOString();
window.setInterval(() => {
  const timeRemaining = getTimeRemaining(nextMonth);
  $('.days').text(('0' + timeRemaining.days).slice(-2));
  $('.hours').text(('0' + timeRemaining.hours).slice(-2));
  $('.minutes').text(('0' + timeRemaining.minutes).slice(-2));
  $('.seconds').text(('0' + timeRemaining.seconds).slice(-2));
}, 1000);

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
</script>