JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div class="calculatorWrapper">
	<div class="formField"> 
		<span id="fromSpan">Min:</span>
		<input type="text" id="ValTimeField" placeholder=" Insert time" value="10075" size="15">
	</div>
	
	<div class="formField"> 
		<button id="swapBtn" data-current-unit="minutes">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==='hoursTominutes'){
			$('#resultInput').val(((parseFloat(ValTime)*60).toFixed(10)*1/1));
			return;
		}
		if(conversionType==='minutesTohours'){
			$('#resultInput').val(((parseFloat(ValTime)/60).toFixed(10)*1/1));
		}
	}
	function swapUnits(){
		if($(this).data('currentUnit')==='hours'){
			$(this).data('currentUnit','minutes:');
			$('#fromSpan').text('Min:');
			$('#toSpan').text('\u00A0'+'Hrs:');
			conversionType='minutesTohours';
		}else{
			$(this).data('currentUnit','hours');
			conversionType='hoursTominutes';
			$('#fromSpan').text('\u00A0'+'Hrs:');
			$('#toSpan').text('Min:');
		}
		convertUnitTime();
	}
	conversionType='minutesTohours';
	$('#ValTimeField').on('keyup blur',convertUnitTime);
	$('#swapBtn').on('click',swapUnits);
	jQuery(document).ready(function($){
		convertUnitTime();
	})