JSFiddle - React, Tailwind, and code Playground

by ljdsoft

HTML

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:40px">* WARNING *</h1>
      <h2>This UI is deprecated and will be shut down by 
        <span style='color: blue;'>October 1, 2018.</span>
      </h2>
      <h2> Please use <a href='http://ifpoller.vip.fbinfra.net/'>ifpoller UI</a> instead. </h2>
      <h2> Countdown: <span id='countdown', style='color: yellow;'></span></h2>    
      <p>Having trouble migrating? Click <a href='https://fb.quip.com/dbXBAOfKEnHL#MLbACA57Oz3'>here</a> for some sample use cases.</p>
      <p>Questions and Concerns? Post in <a href='https://fb.facebook.com/groups/egress.monitoring/'>Ifpoller Users Group</a>. Thanks!</p>
  </div>
</div>

CSS

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


.hero-image {
  background-color: red;
  height: 50%;
  /* background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

JavaScript

const MINUTE_IN_SEC = 60;
const HOUR_IN_SEC = 60 * MINUTE_IN_SEC;
const DAY_IN_SEC = 24 * HOUR_IN_SEC;
// const DEADLINE = new Date("Oct 1, 2018");
const DEADLINE = new Date("Sep 27, 2018, 17:44");


function getCountDownText(secondsLeft) {
  var dayLeft = Math.floor(secondsLeft / DAY_IN_SEC);
  secondsLeft %= DAY_IN_SEC;
  var hoursLeft = Math.floor(secondsLeft / HOUR_IN_SEC);
  secondsLeft %= HOUR_IN_SEC;
  var minutesLeft = Math.floor(secondsLeft / MINUTE_IN_SEC);
  secondsLeft %= MINUTE_IN_SEC;

  var arr = [];
  if (dayLeft > 0) {
    arr.push(dayLeft + (dayLeft > 1 ? " days" : " day"));
  }
  if (hoursLeft > 0) {
    arr.push(hoursLeft + (hoursLeft > 1 ? " hours" : " hour"));
  }
  if (minutesLeft > 0) {
    arr.push(minutesLeft + (minutesLeft > 1 ? " minutes" : " minute"));
  }
  if (secondsLeft > 0) {
    arr.push(secondsLeft + (secondsLeft > 1 ? " seconds" : " second"));
  }
  return arr.join(", ");
}

window.setInterval(
	function() {
    var now = new Date();
    var secondsLeft = Math.floor((DEADLINE.getTime() - now.getTime()) / 1000);
    if (secondsLeft <= 0) {
      window.location.href = 'http://ifpoller.vip.fbinfra.net/basic';
      return;
    }
    document.getElementById('countdown').innerHTML = getCountDownText(secondsLeft);
  },
  1000, // 1 second
);