JSFiddle - React, Tailwind, and code Playground

by lun471k

JavaScript

var container = document.createElement('div');
container.style.position="absolute";
container.style.zIndex = 100000;
container.style.width="500px";
container.style.height="500px";
container.style.top = "20%";
container.style.left = "33%";
container.style.right = "auto";
container.style.textAlign="center";
container.style.fontSize="2em";
container.style.background = "url(https://upload.wikimedia.org/wikipedia/commons/c/cc/Cageauxsports1.jpg) 30% 30% no-repeat";
container.style.backgroundColor="#ddd";
container.style.border = "2px solid #000";
container.id="NHLCountdown";

var close = document.createElement('div');
close.innerHTML = "X";
close.style.width="50px";
close.style.height="50px";
close.style.top="0px";
close.style.right="1px";
close.style.color= "#FFF";
close.style.border="2px solid black";
close.style.cursor="pointer";
close.addEventListener('click',function(){document.body.removeChild(document.getElementById('NHLCountdown'))});
close.style.zIndex = 100001;
container.appendChild(close);
container.appendChild(document.createElement('span'));
document.body.appendChild(container);

setInterval(function(){
var d = new Date
      , a = Date.parse("December 22, 2016 12:00:00") - d
      , b = Math.floor(a / 864E5)
      , c = Math.floor(a / 36E5)
      , e = Math.floor(a / 6E4)
      , d = b
      , b = c - 24 * b
      , c = e - 60 * c
      , a = Math.floor(a / 1E3) - 60 * e;
    10 > d && (d = "0" + d);
    10 > b && (b = "0" + b);
    10 > c && (c = "0" + c);
    10 > a && (a = "0" + a);
container.getElementsByTagName('span')[0].innerHTML = '<span>'+b+'h '+c+'m '+a+'s'+'</span>';
if(typeof jQuery === "function"){
jQuery('#NHLCountdown span').css({backgroundColor:'#FFF',border:'3px solid black',boxShadow:'inset 0px 0px 75px #000',color:'#FFF'});
}},1000);