JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="button1">Click me</button>
<button id="button2">Clear</button>
<div id="demo"></div>
<div id="day1"></div>
<br>
<div id="day2"></div>
<br>
<div id="diff"></div>

JavaScript

$(document).ready(function(){
  
  function reload(){
    
    $("#demo").html("");
    
    var time1 = new Date();
    time1.setMilliseconds(0);
    time1.setSeconds(0);
    time1.setMinutes(30);
    time1.setHours(8);
    
    var time2 = new Date();
    time2.setMilliseconds(0);
    time2.setSeconds(0);
    time2.setMinutes(30);
    time2.setHours(23);
    
    $('#day1').html(time1.toString('dddd, d MMMM yyyy at HH:mm:ss'));
    $('#day2').html(time2.toString('dddd, d MMMM yyyy at HH:mm:ss'));
    $('#diff').html(minBetween(time1,time2));
  }
  
  function myFunction() {
  	$("#day1").html("");
    $("#day2").html("");
    $("#diff").html("");
    $("#demo").html("Cleared");
  }
  
  function minBetween(time1,time2){
    var diffMs = (time2 - time1); // milliseconds between time1 & time2
    var diffMins = Math.round(diffMs / 60000); // total minutes
    return diffMins;
  
  }
  $('#button1').click(reload);
  $('#button2').click(myFunction);
});