Bootstrap Snippet current calculator using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>Battery life calculator</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Awake (mS)</th>
                    <th>Times (No/h)</th>
                    <th>Current (mA)</th>
                    <th>Current per hour (mA)</th>
                    <th>Current per year (mA)</th>
                    <th>Battery use (%)</th>
                </tr>
            </thead>
            <tbody>
                 <tr>
                    <td class="vert-align">Force all</td>
                    <td></td>
                    <td><input type="text" class="form-control" id="t_all" value=""></td>
                    <td></td>
                    <td class="vert-align"></td>
                    <td class="vert-align"></td>
                    <td class="vert-align"></td>
                </tr>
                <tr>
                    <td class="vert-align">Transmit</td>
                    <td><input type="text" class="form-control" id="mS_1" value="70"></td>
                    <td><input type="text" class="form-control t_force" id="t_1" value="12"></td>
                    <td><input type="text" class="form-control" id="mA_1" value="38"></td>
                    <td class="vert-align" id="mAh_1">1234</td>
                    <td class="vert-align may" id="mAy_1">12345</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
.table tbody>tr>td.vert-align{
    vertical-align: middle;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function sumYears(){
    var mAySum=0;
    var mayMax=0;
    var mayMaxRow="";
    $('.may').each(function( index ){
        mAySum+=parseFloat($(this).html());
    });
    $('.may').each(function( index ){
        var row=$(this).attr('id').split('_')[1];
        var may=parseFloat($("#mAy_"+row).html());
        if (may>mayMax){
            mayMax=may;
            mayMaxRow=row;
        }
        $("#per_"+row).closest("tr").removeClass("danger");
        $("#per_"+row).html((may/mAySum*100).toFixed(0)+"%");
    });
    $("#per_"+mayMaxRow).closest("tr").addClass("danger");
    
    $("#sum_mAy").html(mAySum.toFixed(0));
    var batt=parseInt($("#battery").val(),10);
    $("#years").html((batt/mAySum).toFixed(2)); 
    return mAySum;
}
function calcmAh(row){
    var ms=parseInt($("#mS_"+row).val(),10);
    var no=parseInt($("#t_"+row).val(),10);
    var ma=parseFloat($("#mA_"+row).val());
    var mah=(ma/1000*no)*(ms/3600);
    var may=mah*24*365;
    $("#mAh_"+row).html(mah.toFixed(4));
    $("#mAy_"+row).html(may.toFixed(2));
    var sum=sumYears();
}
 //console.log("ch");
        //console.log($("#mS_1").val());
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"current calculator"
Bootstrap 3.3.0 Snippet by PeterElsys

Related: See More

Questions / Comments:

"current calculator" Bootstrap 3.3.0 Snippet by PeterElsys

Related: See More

Questions / Comments:

"current calculator"
Bootstrap 3.3.0 Snippet by PeterElsys