JSFiddle - React, Tailwind, and code Playground

by Subigya Panta

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<button id="clockdiv" class="btn btn-secondary" disabled></button>
<a href="https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/"> tut </a>

<form id='formone'>
  Huh: <input name="huh" />
  Tuh: <input name="tuh" />
</form>

<button type="button" data-toggle="modal" data-target="#times-up-modal">Launch</button>
<div class="modal fade" id="times-up-modal" tabindex="-1" role="dialog" aria-labelledby="CenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLongTitle">Time's Up</h3>
      </div>
      <div class="modal-body">
        Your progress is saved. You'll be taken to results page shortly.
      </div>
    </div>
  </div>
</div>

JavaScript

(function($){
  $(document).ready(function(){
    function getTimeRemaining(endtime){
      var t = Date.parse(endtime) - Date.parse(new Date());
      var seconds = Math.floor( (t/1000) % 60 );
      var minutes = Math.floor( (t/1000/60) % 60 );
      var hours = Math.floor( (t/(1000*60*60)) % 24 );
      var days = Math.floor( t/(1000*60*60*24) );
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }
    function initializeClock(id, endtime){
      var clock = document.getElementById(id);
      var timeinterval = setInterval(function(){
        var t = getTimeRemaining(endtime);
        //clock.innerHTML = 'days: ' + t.days + '<br>' +
        //                  'hours: '+ t.hours + '<br>' +
        //                  'minutes: ' + t.minutes + '<br>' +
        //                  'seconds: ' + t.seconds;
        hour = t.hours < 10 ? '0'+t.hours : t.hours.toString()
        mins = t.minutes < 10 ? '0'+t.minutes : t.minutes.toString()
        secs = t.seconds < 10 ? '0'+t.seconds : t.seconds.toString()
        clock.innerHTML = hour + ':' + mins + ':' + secs;
        if(t.total<=0){
          timesUp(timeinterval);
        }
      },1000);
    }
    function timesUp(timer){
      clearInterval(timer);
      $('#times-up-modal').modal({
        backdrop: 'static',
        keyboard: false
      });
      //formone = document.getElementById('formone')
      //formone.submit()
    }
    function stuffToDoAterTimesUpModelIsDisplayed(){
    	alert('after model is up')
    }
    var deadline = 'August 16 2019 23:21:05';
    initializeClock('clockdiv', deadline)
    $('#times-up-modal').on('shown.bs.modal', function (e) {
      setTimeout(stuffToDoAterTimesUpModelIsDisplayed, 2500);
    });
    
  })
})(jQuery);