JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<div id="main">
    <a href="#"><h3>Battery Charge Calculator</h3></a>
    <div class="slide">
        <form id="batteryForm" action="">
            <p>
                Battery Capacity (mah):
            </p>
            <p>
                <input name="capacity"/>
            </p>
            <p>
                Charge Rate (mA):
            </p>
            <p>
                <input name="rate"/>
            </p>
            <p>
                <input type="submit" value="Submit"/>
            </p>
            <br/>
            <p id="time"/>
        </form>
    </div>
    <a href="#"><h3>Energy Calculator</h3></a>
    <div class="slide">
        <form id="energyForm" action="">
            <p>
                Mass of BB (grammes):
            </p>
            <p>
                <input name="mass"/>
            </p>
            <p>
                Power of weapon (FPS):
            </p>
            <p>
                <input name="velocity"/>
            </p>
            <p>
                <input type="submit" value="Submit"/>
            </p>
            <br/>
            <p id="energy"/>
        </form>
    </div>
</div>

CSS

h1 {
    border-bottom: 1px dotted #3399ff;
    padding-bottom: 20px;
}

a {
    color: black;
    text-decoration: none;
}

a:active, a:hover {
    color: #3399ff;
    text-decoration: none;
}

h3 {
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    border-bottom: 1px dotted #3399ff;
    padding-bottom: 20px;
}

input {
    border: 1px solid gray;
    text-align: center;
    background-color: transparent;
}

input:active, input:hover, input:focus {
    border: 1px solid #3399ff;
}

#main {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 5px solid gray;
    font-family: Arial;
    text-align: center;
}

div.slide {
    display: none;
    border-bottom: 1px dotted #3399ff;
}

JavaScript

$(function() {
    $('#main > a > h3').click(function() {
        $(this).closest('a').next('div.slide').animate({
            height: 'toggle'
        }, 750);
    });
    
    function batteryCalc() {
        var capacity = this.capacity.value,
            rate = this.rate.value,
            time = capacity / (rate / 1.2),
            chargeTime = (Math.round(10 * time) / 10).toFixed(1),
            message = 'You must enter values in both fields!';
        
        if (capacity && rate) {
            message = 'Required time on charge: ' + chargeTime + ' hours';
        }
        
        $('#time').html(message);
        return false;
    }
    
    function energyCalc() {
        var mass = this.mass.value,
            finalMass = mass * 1000,
            velocity = this.velocity.value,
            finalVelocity = velocity * 0.3048,
            energy = (0.5 * (finalMass * (finalVelocity * finalVelocity))).toFixed(1),
            message = 'You must enter values in both fields!';

        if (mass && velocity) {
            message = 'Energy of weapon: ' + energy + ' Joules';
        }

        $('#energy').html(message);
        return false;
    }
    
    
    $('#batteryForm').submit(batteryCalc);
    $('#energyForm').submit(energyCalc);
});