JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<input id="time1" value="1:45" size="5">Time 1
<br>
<input id="time2" value="1:30" size="5">Time 2
<br>
<input id="time2" value="1:32" size="5">Time 3
<br>
<input id="time2" value="5:30" size="5">Time 4
<br><button id="addTimes">Add times</button>
<br><br>Result<span id="timeSum">00:00</span>

<br>

CSS

input, #timeSum {
  margin: 10px;
}

JavaScript

Number.prototype.padDigit = function () {
        return (this < 10) ? '0' + this : this;
    }

 $("#addTimes").on('click', function () {
      var t1 = "00:00";
      var mins = 0;
      var hrs = 0;
        $('input').each(function () {
            t1 = t1.split(':');
            var t2 = $(this).val().split(':');
            console.log(Number(t1[1]) + Number(t2[1]))
            mins = Number(t1[1]) + Number(t2[1]);
            minhrs = Math.floor(parseInt(mins / 60));
            hrs = Number(t1[0]) + Number(t2[0]) + minhrs;
            mins = mins % 60;
            t1 = hrs.padDigit() + ':' + mins.padDigit()
            console.log(t1)
        });
        $('#timeSum').text(t1);
    });