JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Investment Calculator</title>
<script type="text/javascript">

function doFV(){
var p = parseFloat(document.getElementById('principal').value);
var ar = parseFloat(document.getElementById('annualRate').value);
var y = parseFloat(document.getElementById('years').value);
var ppy = parseFloat(document.getElementById('periods').value);
var fv = computeFutureValue(p, ar, y, ppy);
document.getElementById('fvOutput').value = fv.toFixed(02);
}
function computeFutureValue(principal, annualRate, years,periodsPerYear){
var a = principal;
var r = annualRate / periodsPerYear;
var n = years * periodsPerYear;
var f = a * (1 + r)**n;
return f;
}

function resetFunction() {
document.getElementById('myForm').reset();
}
</script>
</head>
<body>
<h1>Investment Calculator</h1>
<form id="myForm">
<h5>Amount invested (principal) $</h5> 
<input type="text" id="principal" size="10"><br>

<h5>Annual rate (example: .08)</h5> 
<input type="text" id="annualRate" size="6"><br>

<p>Number of years</p> 
<input type="text" id="years" size="4"><br>

<h5>Periods per year</h5> 
<input type="text" id="periods" size="4"><br>

<button type="button" onclick="doFV()">Compute future value</button>
<h5>$</h5><input type=text" id="fvOutput" size="8"><br><br>

<button type="button" onclick="resetFunction()">Reset</button>
</form>
</body>
</html>