<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<style type="text/css">
#dc-power-button-vi,#dc-power-button-vr,#dc-power-button-ir{
position:relative;
float:right;
margin-top:5px;
}
#tabs ul{
background:#fa0;
}

#dc-power{
margin-bottom:5px;
}

</style>



<script>
$(document).ready(function(){
$( "#tabs" ).tabs();

$("#dc-power-button-vi").click(function(){
        $("#output-of-input").text($(".dc-i").val()*$(".dc-v").val() + "  Watts");
   });
$("#dc-power-button-vr").click(function(){
        $("#output-of-input").text($(".dc-v-of-r").val()*$(".dc-v-of-r").val()/$(".dc-r").val() + "  Watts");
   });
$("#dc-power-button-ir").click(function(){
        $("#output-of-input").text($(".dc-i-of-r").val()*$(".dc-i").val()*$(".dc-r-of-r").val() + "  Watts");
   });
});
</script>
<div id="tabs">
<ul id="dc-p">
<li><a href="#tabs-1">P=VI</a></li>
<li><a href="#tabs-2">P=v<sup>2</sup>/R</a></li>
<li><a href="#tabs-3">P=i<sup>2</sup>*R</a></li>
</ul>
<div id="tabs-1">

<div class="row" id="dc-power">
  <div class="col-xs-6">
    <input type="text" class="form-control dc-v" placeholder="Voltage value">
  </div>
  <div class="col-xs-6">
    <input type="text" class="form-control dc-i" placeholder="Current value">
  </div>
<div class="col-xs-6"></div>
  <div class="col-xs-6">
<button type="button" id="dc-power-button-vi" class="btn btn-primary">Calculate</button>
</div>
</div>


</div>
<div id="tabs-2">
<div class="row" id="dc-power">
  <div class="col-xs-6">
    <input type="text" class="form-control dc-v-of-r" placeholder="Voltage value">
  </div>
  <div class="col-xs-6">
    <input type="text" class="form-control dc-r" placeholder="Resistance value">
  </div>
<div class="col-xs-6"></div>
  <div class="col-xs-6">
<button type="button" id="dc-power-button-vr" class="btn btn-primary">Calculate</button>
</div>
</div>

</div>
<div id="tabs-3">
<div class="row" id="dc-power">
  <div class="col-xs-6">
    <input type="text" class="form-control dc-i-of-r" placeholder="Current value">
  </div>
  <div class="col-xs-6">
    <input type="text" class="form-control dc-r-of-r" placeholder="Resistance value">
  </div>
<div class="col-xs-6"></div>
  <div class="col-xs-6">
<button type="button" id="dc-power-button-ir" class="btn btn-primary">Calculate</button>
</div>
</div>
</div>
</div>
<div id="output-of-input">Output</div>

http://topgravity.com/dc-power-calculator/

The code is meant to find out electrical dc power using formulas p=vi, P=v<sup>2</sup>/R, and P=i<sup>2</sup>*R.

Electrical Power Calculator jquery

code

jQuery