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" onchange="s_laps()" >&nbsp;(meters)</small></span><input pattern="[0-9]*"  inputmode="decimal" type="number" id="laps" step="1" name="laps" onchange="s_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"...

CSS

#laps {position: fixed;}

JavaScript

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

$(function () {

  var $input = $('#laps');
  var $yards = $('#swim_distance_y');
  var $meters = $('#swim_distance_m');
	
$input. ('input 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;
 ...