JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<h4>In this example, only tonne to other unit conversion is considered. Fill the table for other values using https://tinyurl.com/2p87mpw9 </h4>

<div class="inline-block">
<div>
  <input type="text" id="valsa">
</div>
<div>
  <select name="" id="unitsa">
  <option value="tonne">tonne</option>
<option value="Kilogram">Kilogram</option>
<option value="Gram">Gram</option>
<option value="Milligram">Milligram</option>
<option value="Microgram">Microgram</option>
<option value="Imperial ton">Imperial ton</option>
<option value="US ton">US ton</option>
<option value="Stone">Stone</option>
<option value="Pound">Pound</option>
<option value="Ounce">Ounce</option>
</select>
</div>
</div>
<div class="inline-block">
<div><input type="text" id="valsb"></div>
<div>
  <select name="" id="unitsb">
   <option value="tonne">tonne</option>
<option value="Kilogram">Kilogram</option>
<option value="Gram">Gram</option>
<option value="Milligram">Milligram</option>
<option value="Microgram">Microgram</option>
<option value="Imperial ton">Imperial ton</option>
<option value="US ton">US ton</option>
<option value="Stone">Stone</option>
<option value="Pound">Pound</option>
<option value="Ounce">Ounce</option>
</select>
</div>
</div>
<div class="result-wrapper">
	<button id="calculate" onclick="capture()">Calculate</button>
	<div class="result">The Result is = <span></span></div>
</div>
<div>
	<table id="conversionTable">
	<thead>
		<tr>
		<th></th>
			<th>tonne</th>
<th>Kilogram</th>
<th>Gram</th>
<th>Milligram</th>
<th>Microgram</th>
<th>Imperial ton</th>
<th>US...

CSS

.inline-block{
  display:inline-block;
}
table{
width: 100%;
border-collapse: collapse;
}
table th,table td{
border:1px solid black;
}
.result-wrapper{
margin-top: 10px;
margin-bottom: 10px;

}
.result{
display:none;
}

JavaScript

console.clear();

const result = document.querySelector('.result'); // get result element to display result

const unitsa = document.getElementById("unitsa");
const unitsb = document.getElementById("unitsb");
const valsa = document.getElementById("valsa");
const valsb = document.getElementById("valsb");
const conversionTable = document.getElementById("conversionTable")
const conversionTableThead = conversionTable.querySelector('thead');
const conversionTableTheadTr = conversionTable.querySelector('tr');
const conversionTableTbody = conversionTable.querySelector('tbody');
const conversionTableTbodyTrs = conversionTable.querySelectorAll('tr');


function capture(){ // capture the values
result.style.display = "none"; // hide the result element
const args = {
 unita : unitsa.value,
 unitb : unitsb.value,
 vala : valsa.value,
 valb : valsb.value,
}
if((!args.vala && !args.valb) || (args.vala && args.valb)){
alert("Fill either first input or second input");
return;
}
args.from = args.vala? args.unita:args.unitb;
args.to = args.vala? args.unitb:args.unita;
findInTable(args);

}

function findInTable(args){
	let columnIndex = -1;	
	let rowIndex = -1;
	let multiplier = 0;

	const columns = conversionTableTheadTr.querySelectorAll('th');
	columns.forEach(function(ele, index){
	if(ele.innerText === args.to){
	   columnIndex = index-1; // -1 because the first header is empty
	}
	});
	
	conversionTableTbodyTrs.forEach(function(row, index){
		const th = row.querySelector('th');
		if(th.innerText == args.from){
		rowIndex = index;
		const tds = row.querySelectorAll('td');
		tds.forEach(function(td, tdindex){
		 if(tdindex === columnIndex){
		 multiplier = td.innerText?td.innerText:0;
		 }
		})
		}
	
	});
		
	console.log(args);
	console.log(rowIndex);
	console.log(columnIndex);
	console.log(multiplier)
	if(args.vala){
	  valsb.value = parseFloat(args.vala) * parseFloat(multiplier);
	}
	if(args.valb){
		  valsa.value = parseFloat(args.valb) *...