ROA_Calc/index.html

52 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="roacalc.js"></script>
<link rel="stylesheet" href="roacalc.css" />
<title>ROA Calculator</title>
</head>
<body>
<div class="content">
<div class="header">
<p id="vanity">Taylor Courage's</p>
<h1>ROA Calculator</h1>
<p>Use this tool to calculate reduction of area</p>
</div>
<div class="body" id="body">
<label for="startSize">Start size:</label>
<input autocomplete="off" id="startSize" type="text" value="0.0" size="4" />
<input type="radio" name="units" id="metric" value="mm" checked tabindex=-1 />
<label for="metric">mm</label>
<input type="radio" name="units" id="inches" value="in" tabindex=-1 />
<label for="inches">in</label>
<br />
<label for="finishSize">Final size:</label>
<input autocomplete="off" id="finalSize" type="text" value=".000" size="4" />
<br />
<input type="submit" id="submitButton" value="Calculate" onclick="getROA()" />
<script>
// This script is used to process the enter key input
var input = document.getElementById("body");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("submitButton").click();
}
});
</script>
&nbsp;
<br />
</div>
<div class="results" align="center">
<h4>Result:</h4>
<h1 id="result">--.--%</h1>
</div>
</div>
<div class="footer" align="center">
<p>&nbsp;</p>
<p>&copy; 2024 <a href="http://git.taylorcourage.net/Taylor">Taylor Courage</a></p>
</div>
</body>
</html>