Rule Of Three Example

This is a simple example of Rule of Three with Bootstrap & Javascript

Calculator Form

=>


=>

?





How To Use ?

HTML

<div class="row">
    <div class="col-xs-5">
        <input type="text" class="form-control" id="input1" value="">
    </div>

    <div class="col-xs-2 text-center">
        =>
    </div>

    <div class="col-xs-5">
        <input type="text" class="form-control" id="input2" value="">
    </div>

    <br><br>

    <div class="col-xs-5">
        <input type="text" class="form-control" id="input3" value="">
    </div>

    <div class="col-xs-2 text-center">
        =>
    </div>

    <div class="col-xs-5">
        <h3 class="text-center"><span class="label label-primary" id="totalcalcul">?</span></h3>
    </div>

    <br><br><br><br>

    <p class="text-right">
        <button type="submit" class="btn btn-lg btn-success" id="calculate">Calculate</button>
    </p>
</div>

Javascript

<script type="text/javascript">
    var go = document.getElementById("calculate");

    go.onclick = function() {
        var input2 = parseFloat(document.getElementById("input2").value);
        var input3 = parseFloat(document.getElementById("input3").value);
        var input1 = parseFloat(document.getElementById("input1").value);
        var resultat = parseFloat((input2 * input3) / input1).toFixed(2);
        document.getElementById("totalcalcul").innerHTML = resultat;
    };
</script>