JSFiddle - React, Tailwind, and code Playground

by agileapricot

HTML

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../embed-style.css">
<meta name="robots" content="noindex,nofollow,noarchive,nosnippet,nocache" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
</head>
<body>
<noscript>Please enable JavaScript to see this session</noscript>
<div id="countdown"></div>
<div id="playsession"></div>
<script>
            var releaseDate = new Date('05/29/2021 9:00 UTC+1');
            var expiryDate = new Date('10/11/2021 01:00AM UTC+1');

            var cdNotice = 'This session will appear automatically when the countdown finishes';
            var trDay   = ' Days';
            var trHours = ' Hours';
            var trMin   = ' Minutes';
            var trSec   = ' Seconds';
            var media   = "<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\"><div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\"><iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/eiwj630vxa?videoFoam=true\" title=\"June 19 &amp; 20 ~ Refresh &amp; Revive ~ Gen Rabten ~ 1 Video\" allow=\"autoplay; fullscreen\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" class=\"wistia_embed\" name=\"wistia_embed\" allowfullscreen msallowfullscreen width=\"100%\" height=\"100%\"><\/iframe><\/div><\/div>\r\n<script src=\"https:\/\/fast.wistia.net\/assets\/external\/E-v1.js\" async><\/script>";      
        </script>

</body>
</html>

JavaScript

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;


function showRemaining() {
    var now = new Date();
    var distance = releaseDate - now;
    var gone = expiryDate - now;
            if (distance < 0 && gone > 0) {

        clearInterval(timer);

        document.getElementById('countdown').innerHTML = "";
        document.getElementById('playsession').innerHTML = media;

        return;
    }
            if (gone < 0) {

        clearInterval(timer);
        document.getElementById('playsession').innerHTML = '<p>This video has now expired</p>';

        return;
    }        
    
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = '<p>' + cdNotice + '</p>';
    document.getElementById('countdown').innerHTML += '<p>';
    if (days > 0) {
        document.getElementById('countdown').innerHTML += '<b>' + days + trDay + '</b>&nbsp;&nbsp;';
    }
    if (hours > 0) {
        document.getElementById('countdown').innerHTML += '<b>' + hours + trHours + '</b>&nbsp;&nbsp;';
    }
    if (minutes > 0) {
        document.getElementById('countdown').innerHTML += '<b>' + minutes + trMin + '</b>&nbsp;&nbsp;';
     }
    document.getElementById('countdown').innerHTML += '<b>' + seconds + trSec +'</b>';
    document.getElementById('countdown').innerHTML += '</p>';    
}

timer = setInterval(showRemaining, 1000);