JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="swim_split_grid">

<div for="split1_min" class="box"><span>Split 1</span><input value="5" id="laps1" class="laps" onchange="split_calc1()"><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split1_min" class="split" name="split1_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split1_sec" class="split" name="split1_sec" step="1" value="0" onchange="split_calc1()"><br>Ave: <input class="split_laps" id="split1">
</div>
<!---  SPLIT #2  --->
<div for="split2_min" class="box"><span>Split 2</span><input value="5" id="laps2" class="laps" onchange="split_calc1()"><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split2_min" class="split" name="split2_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split2_sec" class="split" name="split2_sec" step="1" value="0" onchange="split_calc2()"><br>Ave: <input class="split_laps" id="split2">
</div>
<!---  SPLIT #3  --->
<div for="split3_min" class="box"><span>Split 3</span><input value="5" id="laps3" class="laps" onchange="split_calc3()"><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split3_min" class="split" name="split3_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split3_sec" class="split" name="split3_sec" step="1" value="0" onchange="split_calc3()"><br>Ave: <input class="split_laps" id="split3">
</div>
<!---  SPLIT #4  --->
<div for="split4_min" class="box"><span>Split 4</span><input value="5" id="laps4" class="laps" onchange="split_calc4()"><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split4_min" class="split" name="split4_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split4_sec" class="split" name="split4_sec" step="1" value="0" onchange="split_calc4()"><br>Ave: <input class="split_laps" id="split4">
</div>
<!---  SPLIT #5  --->
<div...

CSS

#swim_split_grid {
    display: grid;
    grid-template-columns: repeat(2, 120px);
    grid-template-rows: 1fr;
    grid-column-gap: 2px;
    grid-row-gap: 0px;
    position: relative;
    right: 5px;
    bottom: -7px;
}
input {width: 40px;}
.box span:nth-child(1) {float: left;}
.split_laps{width: 40px; float: right; margin-right: 19px;}
.laps {width: 10px; margin-left: 55px; border-radius: 10px; text-align: center; border: unset; font-size: 12px;}

JavaScript

split_calc1 = function() {
 var split = (document.getElementById("split1_min").value*60) + (document.getElementById("split1_sec").value*1);
 var laps = document.getElementById("laps1").value;

 document.getElementById('split1').value = result;
}
split_calc2 = function() {
  var split = (document.getElementById("split2_min").value*60) + (document.getElementById("split2_sec").value*1);
 document.getElementById('split2').value = split2;
}