Adding embedded HTML into a post — a 2 minute countdown timer.

[Outerbridger]

Hello!

I am currently trying to embed HTML code onto one of my website's pages. The code is as follows:

<p><b> Alternative Uses Task Timer — <span class="js-timeout">2:00</span>.</p>

<button id="js-startTimer">Start Countdown</button>
<button id="js-resetTimer">Stop &amp; Reset</button>

The 2 minute countdown timer shows up on the webpage as it appears on https://codepen.io/TLJens/pen/azedap, but lacks functionality on my website.

Any idea where I am going wrong? 

Thanks so much in advance. 

Matthew 

[seicolegwr · Accepted solution]

@Outerbridger 

There are two problems with your code. First, you need to wrap the HTML in tags. So it should look like this:

<div>

<p>Session will end in <span class="js-timeout">2:00</span>.</p>

<button id="js-startTimer">Start Countdown</button>

<button id="js-resetTimer">Stop &amp; Reset</button>

</div>

Second, you'll need to add the Javascript code underneath the HTML to make the button actually work (not just display) and this also needs to be wrapped in tags. Like this:

<script>

var interval;

function countdown() {

  clearInterval(interval);

  interval = setInterval( function() {

      var timer = $('.js-timeout').html();

      timer = timer.split(':');

      var minutes = timer[0];

      var seconds = timer[1];

      seconds -= 1;

      if (minutes < 0) return;

      else if (seconds < 0 && minutes != 0) {

          minutes -= 1;

          seconds = 59;

      }

      else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;

      $('.js-timeout').html(minutes + ':' + seconds);

      if (minutes == 0 && seconds == 0) clearInterval(interval);

  }, 1000);

}

$('#js-startTimer').click(function () {

  $('.js-timeout').text("2:00");

  countdown();

});

$('#js-resetTimer').click(function () {

  $('.js-timeout').text("2:00");

  clearInterval(interval);

});

</script>

If you add all of this code to an Embed Code element and then publish your site your timer should work - NOTE: it won't work in the editor, only on the live site.

Hope this helps, Gary

[Outerbridger]

Amazing! That helps so much.

Thanks,