Make "working hours calculator" to calculate minutes

Question

I have an HTML table that calculates working hours that the user enters.

The problem I am having is figuring out how to make the calculator consider the minutes when it's calculating the total working hours.

For example, the user enters their Standby Start time in a 24-hour format. Let's say they type in 00:30 and in the Standby End Time, they would type in 4:20, the result would display 3:50 in the Hours in total text field. Now it just displays 4 hours in total.

Here's the code:

var numRows = 2,
  ti = 5;
var tableCount = 1;
var index = 1;

window.standBy = function() {
  var sum = 0;
  $(".Standby").each(function(index, stand) {
    sum += parseFloat($(stand).val());
  })

  $(".grandtotal").val(sum)
}

function calculate() {
  var tr = $(this).closest('tr'),
    startTime = $('.Time1').val(),
    endTime = $('.Time2').val();

  if (startTime === '' || endTime === '') {
    return;
  }

  var hours = parseInt(endTime.split(':')[0], 10) - parseInt(startTime.split(':')[0], 10);
  if (hours < 0) hours = 24 + hours;
  $(".Hours", tr).val(hours);

  if (hours >= 4) $(".Standby", tr).val("1");
  if (hours <= 4) $(".Standby", tr).val("0.5");
  //if (hours==4 && hours<8) $(".Standby").val("1");

  if (hours >= 8 && hours <= 12) $(".Standby", tr).val("1.5");

  if (hours > 12) $(".Standby", tr).val("1.5");



}
$('#table').on('input', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')


window.addTime = function() {
  tableCount++;
  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
  $('#timeTable' + tableCount).find("input").val("");
  index++;
  $('#timeTable' + tableCount + ' .aa').html(tableCount);

};


$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  if (tableCount < 1) {
    tableCount = 1;
  }
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>
  Time format is in 24h
</h1>

<div id="table">
  <table id="timeTable" class="tg">
    <tr>
      <th class="tg-yw41"></th>
      <th class="tg-yw41"></th>
      <th class="tg-yw4l">Start time</th>
      <th class="tg-yw4l">End time</th>
      <th class="tg-yw4l">Hours in total</th>
      <th class="tg-yw4l">Standby hours</th>
    </tr>
    <tr>
      <td class="aa">1</td>
      <td class="tg-yw4l"><button class="removeTime">Remove Time</button></td>

      <td class="tg-yw4l">
        <input class="Time1" value="" placeholder="Enter your start time" />
      </td>
      <td class="tg-yw4l">
        <input class="Time2" value="" placeholder="Enter your end time" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Hours" value="0" readonly="" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Standby" value="0" readonly="" />
      </td>
    </tr>
  </table>
</div>


<caption>Total standby hours</caption>&nbsp;
<input class="grandtotal" value="" readonly="" />
<br>
<button onclick="addTime();">Add Time</button>
<br>
<button onclick="standBy();">Calculate total Standby hours</button>

Answer 1

Convert from 12-hour format to 24-hour format.

In a 12-hour format, you need a to know the period: AM ("Ante Meridiem" = "before noon") and PM ("Post Meridiem" = "after noon").

The following function converts a 12-hour format time to 24-hour format time:

myTime = ['2:20', 'AM'];
myTime2 = ['8:10', 'PM'];

let timeConverter = function(time) {

  if (time[1] == 'PM') {

    let hourAndMinute = time[0].split(':');
    let newHour = parseInt(hourAndMinute[0]) + 12;
    return String(newHour) + ':' + hourAndMinute[1];

  } return time[0]

}

console.log(timeConverter(myTime))
console.log(timeConverter(myTime2))