JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="swim_row_one">
    <div class="span2"><span>Swim date:</span><input type="date" id="swim_date" name="swim_date" value=""></div>
    <div class="span2"><span>Laps: <small><input name="m_or_y" type="checkbox" id="m_or_y" checked="checked" >&nbsp;(meters)</small></span><input pattern="[0-9]*" inputmode="decimal" type="number" id="laps" step="1" name="laps" ></div>
    
    <div class="span2">Meters: <input name="meters" id="swim_distance_m"></div>
    <div class="span2">Yards: <input name="yards" id="swim_distance_y"></div>
    
    <div class="time_text">Time:</div>
    <div id="swim_row_1b">
    <div id="swim_time_inputs">
    <select pattern="[0-9]*" type="number" id="swim_hour" name="swim_hour">
    <option>00</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    </select><span class="colon">:</span><select pattern="[0-9]*" type="number" id="swim_min" name="swim_min" onchange="s_calc()">
    <option>00</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
    <option>32</option>
    <option>33</option>
    <option>34</option>
    <option>35</option>
    <option>36</option>
    <option>37</option>
    <option>38</option>
    <option>39</option>
    <option>40</option>
    <option>41</option>
    <option>42</option>
   ...

JavaScript

jQuery(document).ready(function($) {

$(function () {

  var $input = $('#laps');
  var $yards = $('#swim_distance_y');
  var $meters = $('#swim_distance_m');
	
$input.on('change', function(event) {
		var value = $input.val();
if (document.getElementById('m_or_y').checked) { 
    var yards = value*50*1.0936;
    var meters = value*50;
    var round = Math.ceil(yards)
    $yards.val(round);
    $meters.val(meters)
    } else if (document.getElementById('m_or_y').checked == false) {
    var yards = value*50;
    var meters = (value*50)/1.0936;
    var round = Math.ceil(meters)
		$yards.val(yards);
    $meters.val(round)
    }
$('#m_or_y').change(function() {
if (document.getElementById('m_or_y').checked) { 
    var yards = value*50*1.0936;
    var meters = value*50;
    var round = Math.ceil(yards)
    $yards.val(round);
    $meters.val(meters)
    } else if (document.getElementById('m_or_y').checked == false) {
    var yards = value*50;
    var meters = (value*50)/1.0936;
    var round = Math.ceil(meters)
		$yards.val(yards);
    $meters.val(round)
    }
  });
 });
});

});



s_calc = function(){	

  var laps = document.getElementById("laps").value;
  var hour = document.getElementById("swim_hour").value*3600;
  var min = (document.getElementById("swim_min").value)*60;
  var sec = document.getElementById("swim_sec").value/1;
  var time = (min+sec)+hour;
  var ave = time/laps;
//round to whole number  
  var ave_round = (Math.round(ave * 100) / 100).toFixed(0);
// take ave and output as min:sec
  var minutes = parseInt(ave_round / 60) % 60;
  var seconds = ave_round % 60;
  var result = (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
// take time and output as min:sec
  var t_minutes = parseInt(time / 60) % 60;
  var t_seconds = time % 60;
  var t_result = (t_minutes < 10 ? "0" + t_minutes : t_minutes) + ":" + (t_seconds < 10 ? "0" + t_seconds : t_seconds);	

  document.getElementById('ave').value = result;
 ...