JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div class="calculatorWrapper">
	<div class="formField"> 
		<span id="fromSpan">Sec:</span>
		<input type="text" id="ValTimeField" placeholder=" Insert time" value="1800" size="15">
	</div>
	
	<div class="formField"> 
		<button id="swapBtn" data-current-unit="seconds">Swap Units</button>
	</div>
	
	<div class="formField"> 
		<span id="toSpan">&nbsp;Hrs:</span> 
		<input type="text" placeholder="The result is..." id="resultInput" readonly="" size="15">
	</div>
</div>

JavaScript

var conversionType;
function convertUnitTime(){
	var ValTime=$('#ValTimeField').val();
  if(conversionType==='hoursToseconds'){
  	$('#resultInput').val(((parseFloat(ValTime)*3600).toFixed(10)*1/1));
    return;
   }
   if(conversionType==='secondsTohours'){
   	$('#resultInput').val(((parseFloat(ValTime)/3600).toFixed(10)*1/1));
   }
}
function swapUnits(){
	if($(this).data('currentUnit')==='hours'){
		$(this).data('currentUnit','seconds:');
    $('#fromSpan').text('Sec:');
  	$('#toSpan').text('\u00A0'+'Hrs:');
  	conversionType='secondsTohours';
  }else{
  	$(this).data('currentUnit','hours');
    conversionType='hoursToseconds';
    $('#fromSpan').text('\u00A0'+'Hrs:');
    $('#toSpan').text('Sec:');
  }
    
    convertUnitTime();
}
conversionType='secondsTohours';
$('#ValTimeField').on('keyup blur',convertUnitTime);
$('#swapBtn').on('click',swapUnits);
jQuery(document).ready(function($){
	convertUnitTime();
})