Flow

calucalate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="calculate.css"/>
    <title>Calculation Example</title>

    <script>
        function calculate(event) {
            event.preventDefault();

            const num1 = parseFloat(document.getElementById("number1").value);
            const num2 = parseFloat(document.getElementById("number2").value);

            const tod1 = ((num1 - num2) / 1000) * 3;
            const tod2 = tod1 * 1.852;

            document.getElementById("tod1").innerHTML = "TOD (nm) : " + tod1.toFixed(0);
            document.getElementById("tod2").innerHTML = "TOD (km) : " + tod2.toFixed(0);
        }
    </script>
</head>
<body>
<div class="box">
    <h1>Top of Descent</h1>
    <form id="calculationForm" onsubmit="calculate(event)">
        <label for="number1">Cruise Altitude:&nbsp;&nbsp;&nbsp; </label>
        <input type="text" id="number1" name="number1" style="width: 60px">
        <br>
        <label for="number2">Landing Altitude:</label>
        <input type="text" id="number2" name="number2" style="width: 60px">
        <br>
        <br>
        <button type="submit">Calculate</button>
        <p id="tod1"></p>
        <p id="tod2"></p>
    </form>
</div>
</body>
</html>

calculate.css:

.box{
    margin:6px;
    width:300px;
    padding:3px;
    background:#f9f9f9;
    border:2px solid #333;
    text-align: center;
}