JSFiddle - React, Tailwind, and code Playground

by mLuby

HTML

<body>
    <h1>Flight Plan</h1>
    <button id="launch">Launch</button>
    <label id="launch_dV">0 m/s</label>
    <br />
    <button id="transfer">Transfer</button> to 
    <select id="orbit">
        <option value="low">LEO</option>
        <option value="sync">Geosync</option>
    </select>
    <label id="transfer_dV">0 m/s</label>
    <br />
    <button id="escape">Escape</button> to 
    <select id="planet">
        <option value="mars" selected>Mars</option>
        <option value="moon">Moon</option>
        <option value="venus" >Venus</option>
    </select>
    <label id="escape_dV">0 m/s</label>
    <br />
    <button id="capture">Capture</button> to 
    <select id="orbit2">
        <option value="low" selected>low orbit</option> or
        <option value="sync">sync orbit</option>
    </select>
    <label id="capture_dV">0 m/s</label>
    <br />
    <label>Total delta V: </label><label id="total_dV">0 m/s</label>
</body>

CSS

.selected{
    background-color: green;
}

JavaScript

$(document).ready(function(){
    $("#launch").click(function(){
        var deltaV = launch();
        $("#launch_dV").text(Math.round(deltaV,0)+" m/s");
    });
    $("#transfer").click(function(){
        var deltaV = hohemann(100e3, planet.earth[$("#orbit").val()], planet.earth);
        $("#transfer_dV").text(Math.round(deltaV,0)+" m/s");
    });
    $("#escape").click(function(){
        var deltaV = escapeTo(planet.earth, planet[$("#planet").val()], planet.earth[$("#orbit").val()]);
        $("#escape_dV").text(Math.round(deltaV,0)+" m/s");
    });
    $("#capture").click(function(){
        var deltaV = capture();
        $("#capture_dV").text(Math.round(deltaV,0)+" m/s");
    });
    
    $("button").click(function(){
        // if button deselected, zero out associated delta v.
        $(this).toggleClass("selected");
        var total_dV = parseInt($("#launch_dV").text())
                        +parseInt($("#transfer_dV").text())
                        +parseInt($("#escape_dV").text()) 
                        +parseInt($("#capture_dV").text());
        $("#total_dV").text(total_dV+" m/s");
    });
});

var g = 6.67e-11;
var planet = { // low and sync orbits are altitudes, not radii.
    earth: {mass: 5.97219e24, radius: 6.3781e6, low: 340e3, sync: 3.5786e7, transferDeltaV: 0},
    mars: {mass: 6.4185e23, radius: 3.3895e6, low: 444e3, sync: 1.36105e7, transferDeltaV: 3e3},
    moon: {mass: 0, radius: 0, low: 0, sync: 0, transferDeltaV: 0},
    venus: {mass: 0, radius: 0, low: 0, sync: 0, transferDeltaV: 0}
};

function launch(){
    var deltaV = 7.8e3; //launch deltaV
    return deltaV;            
}

function capture(){
    var deltaV = 0;
    return deltaV;            
}

function hohemann(orbit_i, orbit_f, planet){
    // i=initial t=transfer p=periapsis a=apoapsis f=final            
    // orbit_i and f are altitudes, not radii.
    r_i = orbit_i + planet.radius;
    r_f = orbit_f + planet.radius;

    var mu = g*planet.mass;
    
    var a_i =...