JSFiddle - React, Tailwind, and code Playground

by alexgrenn

HTML

<input type="text" id="inp1">
<input type="text" class ="time" id = "inp2"  >
<input type="text" id="inp3" >
<input type="text" class = "time" id = "inp4">
<input type="text" class="time">

JavaScript

$(function(){
    $("#inp1").keyup(function(event){
        $("#inp2").val($("#inp1").val());                
    });
	    $("#inp3").keyup(function(event){
        $("#inp4").val($("#inp3").val());                
    });
});




    function cost(run, end) {
    var lunch = [(new Date()).setHours(12, 0, 0, 0),(new Date()).setHours(12, 45, 0, 0)]
    run =  (new Date()).setHours(run[0], run[1],0,0);
    end =  (new Date()).setHours(end[0], end[1],0,0);
    run > lunch[0] && (lunch[0]=run);
    end < lunch[1] && (lunch[1]=end);
    if(run > lunch[1]||end < lunch[0]||run > end) return 0;
    return (lunch[1] - lunch[0])/60000 ;
};
    document.addEventListener("input", function(event) {
    var el = event.target;
    if (el.classList.contains('time')) {
      var inp =  document.querySelectorAll('.time');
      if (inp[0].value.length !=5  || inp[1].value.length != 5) return ;
         var run =  inp[0].value.split(':'),
          end =  inp[1].value.split(':');
          inp[2].value = cost(run, end)
 
    }
});