JSFiddle - React, Tailwind, and code Playground

by deepakthakur07

HTML

<html>
<head>
</head>
<body>
	<form id="frm1" name="frm1" method="post">
		<table style="margin: 0 auto;" width="80%" border="0" cellspacing="2" cellpadding="2">
			<tr>
				<td colspan="2" id="display-msg" style="display: none; text-align: center;font-weight: bold;"></td>
			</tr>
			<tr>
				<td style="text-align: right;"><span class='redStar'>*</span>Amount:&nbsp;</td>
				<td style="text-align: left;">
					<input type="text" name="amount" id="amount" maxlength="10" onblur="applyInterest();" />
					<input style="width:60px" type="text" name="interest" id="interest" maxlength="6" placeholder="Interest" onkeyup="applyInterest();" />&nbsp;%
				</td>
			</tr>
			<tr>
				<td style="text-align: right;"><span class='redStar'>*</span>Total Amount:&nbsp;</td>
				<td style="text-align: left;">
					<input type="text" name="total_amount" id="total-amount" maxlength="10" readonly />
				</td>
			</tr>
		</table>
	</form>
	<script>
		function applyInterest()
		{
			var amount = parseFloat(document.getElementById('amount').value);
			var interest = parseFloat(document.getElementById('interest').value);
			var int_amount = Math.round((interest/100)*amount);
			document.getElementById('total-amount').value = (amount + int_amount);
		}
	</script>
</body>
</html>