JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<div id="Timer5min"></div>
    <div class="loader">
        <div class="message phrase1 helvetica">late one christmas morn'...</div>
        <div class="message phrase2 helvetica">all of the fragorian children were sleeping...</div>
        <div class="message phrase3 helvetica">but there was one little hero who could not wait...</div>
        <div class="message phrase4 helvetica" style="visibility: inherit; opacity: 0;"></div>
    </div>

JavaScript

var timer = 301; // 5 minutes worth of seconds + 1 for the first call    
function countDown() {
    if (--timer) {
        var minutes = timer % 60;
        if (!minutes) {
            minutes = '00';
        }
        $('#Timer5min').text(Math.floor(timer / 60) + ':' + minutes);
    } else {
        window.location = 'http://google.com';
    }
}
$(document).ready(function () {
    var interval = setInterval(function () {           
        if($('.phrase4').css('opacity') == 0) {    
            countDown();    
        }
    }, 1000);
});