JSFiddle - React, Tailwind, and code Playground

by jrenfree

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<form name="form" action="">

<table border="2" cellpadding="8" width="800">
    <tr>
        <td colspan="2" align="center">
            <table border="0" cellpadding="0" width="500">
                <tr>
                    <td>
                        <a href="http://swfsc.noaa.gov/textblock.aspx?Division=FRD&id=1105&ParentMenuId=294">
                        <img src="http://swfsc.noaa.gov/uploadedImages/Operating_units/FRD/Survey_Technology/AST_COLOR_F.png" width="200" alt="AST Logo" border="0">
                        </a>
                    </td>
                    <td align="center" style="font-size:20px;">
                        <h1>KRM Model</h1>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td align="left" valign="top" width="400"  rowspan="2">            
            <center><h3>Fish Parameters</h3></center>
            Fish type:&nbsp;
            <select id="type" name="type" size="1" onChange="checktype()">
                <option value="Sardine">Sardine
                <option value="Cod">Cod
            </select><br>
            Fish length:&nbsp;<input size="5" type="text" id="L" value="210" style="text-align: right">&nbsp;mm<br>
            Body density:&nbsp;<input size="5" type="text" id="p_b" value="1070" style="text-align: right">&nbsp;kg/m<sup>3</sup><br>
            Body soundspeed:&nbsp;<input size="5" type="text" id="c_b" value="1570" style="text-align: right">&nbsp;m/s<br>
            Swimbladder density:&nbsp;<input size="5" type="text" id="p_c" value="1.24" style="text-align: right">&nbsp;kg/m<sup>3</sup><br>
            Swimbladder soundspeed:&nbsp;<input size="5" type="text" id="c_c" value="345" style="text-align: right">&nbsp;m/s<br>
            <br>
            <hr>
            
            <center><h3>Water Parameters</h3></center>
            Soundspeed:&nbsp;<input size="5" type="text"...

JavaScript

function start_calc() {
    document.getElementById('calc').value = "Processing...";
    setTimeout( "calculate()", 1);
}

// Function to enable the frequency range option if selected
function freq_range() {
    document.getElementById('fmin').disabled = false;
    document.getElementById('fmax').disabled = false;
    document.getElementById('fmean').disabled = true;
    document.getElementById('fstd').disabled = true;
}

// Function to enable the frequency distribution option if selected
function freq_dist() {
    document.getElementById('fmin').disabled = true;
    document.getElementById('fmax').disabled = true;
    document.getElementById('fmean').disabled = false;
    document.getElementById('fstd').disabled = false;
}

// Function to enable the incidence angle option if selected
function phi_range() {
    document.getElementById('phimin').disabled = false;
    document.getElementById('phimax').disabled = false;
    document.getElementById('phimean').disabled = true;
    document.getElementById('phistd').disabled = true;
}

// Function to enable the incidence angle distribution option if selected
function phi_dist() {
    document.getElementById('phimin').disabled = true;
    document.getElementById('phimax').disabled = true;
    document.getElementById('phimean').disabled = false;
    document.getElementById('phistd').disabled = false;
}

// Function to open window if help link is selected
function openwindow() {
    window.open("aboutcalc.html","mywindow","menubar=0,resizable=1,scrollbars=1,width=500,height=250");
}

// Function to change parameter values depending on fish type selected
function checktype() {
    if (document.getElementById('type').value == 'Sardine') {
        document.getElementById('L').value = 210;
        document.getElementById('p_b').value = 1070;
        document.getElementById('c_b').value = 1570;
        document.getElementById('p_c').value = 1.24;
        document.getElementById('c_c').value = 345;
       ...