JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.j"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<link rel="stylesheet" href="https://use.fontawesome.com/f7a386584d.css">
<div id=osman>
</div>

CSS

.countdown-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  padding-top: 0;
  width: auto;
  max-width: 890px;
  min-height: 670px;
  margin: 20px auto;
  background: url(https://cdn2.hubspot.net/hubfs/1151181/Assets_August_2017/popup-bg.svg) no-repeat;
  background-position: top center;
  background-size: cover;
}

.countdown-popup .header-red {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 90px;
  border-radius: 0px;
  background-color: #FF2E63;
  display: table;
}

.countdown-popup .header-red span {
  color: #FFFFFF;
  font-family: "Futura PT";
  font-size: 35px;
  font-weight: 900;
  line-height: 39px;
  text-align: center;
  display: table-cell;
  margin: 0 auto;
  vertical-align: middle;
}

.countdown-popup .popup-content {
  text-align: center;
  position: relative;
  top: 145px;
}

.countdown-popup .popup-content h2 {
  color: #000000;
  font-family: "Futura PT";
  font-size: 27px;
  font-weight: 300;
  line-height: 39px;
  text-align: center;
}

.countdown-popup .popup-content h1 {
  width: 512px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 27px;
  font-weight: 900;
  line-height: 39px;
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
}

.countdown-popup .popup-content #demo {
  color: #000000;
  font-family: "Futura PT";
  font-size: 56px;
  font-weight: 300;
  line-height: 56px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 25px;
}

.countdown-popup .popup-content span {
  opacity: 0.5;
  color: #000000;
  font-family: "Futura PT";
  font-size: 14.4px;
  font-weight: 300;
  line-height: 18px;
  text-align: center;
  padding: 15px;
}

.countdown-popup .popup-content .icon {
  margin-top: 26px;
  padding-bottom: 10px;
}

.countdown-popup .popup-content .sub-headers {
  margin-bottom: 25px;
}

.countdown-popup .popup-content .sub-headers p {
  color: #000000;
  font-family: "Futura PT";
  font-size: 22px;
  font-weight: 300;
  line-height: 34px;
  text-align: center;
 ...

JavaScript

var parent = $("#osman");
parent.append( '<div class="countdown-popup"><div class="popup-content"><h2>Want Credit Repair Cloud  <u>FREE</u> for 6 months?</h2><h1>Join our free online training to learn how</h1><p id="demo"></p><span>MINUTES</span><span>SECONDS</span><div class="sub-headers"><p>How to Quickly Start a Profitable</p><p>Credit Repair Business</p></div><div><a href="www.w.creditrepaircloud.com/free-training"><i class="fa fa-arrow-right" aria-hidden="true"></i> RESERVE MY SPOT NOW! </a></div></div></div>');    
    

function startCountDown() {
  // Set the date we're counting down to
  var countDownDate = new Date().getTime() + (60000 * 25);

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    if (seconds < 10)
      seconds = "0" + seconds;
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = minutes + " : " + seconds;

    // If the count down is over, write some text 
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
    }
  }, 500);

}

function tick() {
  //get the mins of the current time
  var mins = new Date().getMinutes();
  console.log("mins : " + mins);
  if (mins == "00") {
    //alert('Do stuff');
  } else {
    console.log("StartCountDown");
    startCountDown();
    clearInterval(checkNewHour);
  }
  console.log('Tick ' + mins);
}
var checkNewHour = setInterval(function() {
  tick();
}, 1000);