JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<form name="test" id="test">
    <label for="height">Height in (mm)</label>
    <select name="height" id="height">
        <option label="Please Select"></option>
        <option value="525">525 or less</option>
        <option value="645">645 or less</option>
        <option value="1265">up to 1265</option>
        <option value="1270">more than 1265</option>
    </select>
    <label for="width">Width in (mm)</label>
    <select name="width" id="width">
        <option label="Please Select"></option>
        <option value="134">134 or less</option>
        <option value="190">190 or less</option>
        <option value="290">290 or less</option>
        <option value="328">328 or less</option>
        <option value="420">420 or more</option>
    </select>
    <Br>
    <br>
    <label for="depth">Depth in (mm)</label>
    <select name="depth" id="depth">
        <option label="Please Select"></option>
        <option value="134">134 or less</option>
        <option value="190">190 or less</option>
        <option value="290">290 or less</option>
        <option value="328">328 or less</option>
        <option value="420">420 or more</option>
    </select>
    <br>
    <br>
     <h2>Or select by load</h2>

    <label for="load">Load in (kN)</label>
    <select name="load" id="load">
        <option label="Please Select"></option>
        <option value="2.5">2.5 or less</option>
        <option value="5">5 or less</option>
        <option value="10">10 or less</option>
        <option value="25">25 or less</option>
        <option value="50">50 or more</option>
    </select>
    <br>
    <p>
        <input type="button" onclick="calculate();" value="Find your Datasheet"
        />
        <input type="button" onclick="formReset()" value="Reset form" />
    </p>
</form>
<div id="result"></div>

JavaScript

function calculate() {
    var h = document.getElementById('height'),
        w = document.getElementById('width'),
        d = document.getElementById('depth'),
        load = document.getElementById('load'),
        result = document.getElementById('result'),
        arr = [
        h,
        w,
        d],
        error = "Please select your sample's ";

    for (var i = 0; i < arr.length; i++) {
        var t = arr[i].id;
        if (arr[i].value == "") {
            result.innerHTML = error + t;
            return false;
        }
    }

    var dataSheet = {
        "height": [{
            "value": 525,
                "width": [{
                "value": 134,
                    "depth": [{
                    "value": 134,
                        "link": "525_134_134",
                        "name": "DataSheet 525_134_134"
                }, {
                    "value": 190,
                        "link": "525_134_190",
                        "name": "DataSheet 525_134_190"
                }, {
                    "value": 290,
                        "link": "525_134_290",
                        "name": "DataSheet 525_134_290"
                }, {
                    "value": 328,
                        "link": "525_134_328",
                        "name": "DataSheet 525_134_328"
                }, {
                    "value": 420,
                        "link": "525_134_420",
                        "name": "DataSheet 525_134_420"
                }]
            }, {
                "value": 190,
                    "depth": [{
                    "value": 134,
                        "link": "525_190_134",
                        "name": "DataSheet 525_190_134"
                }, {
                    "value": 190,
                        "link": "525_190_190",
                        "name": "DataSheet 525_190_190"
                }, {
                    "value": 290,
                        "link": "525_190_290",
                       ...