Advanced Search

Electrical Power Calculator jquery

/ Published in: jQuery
Save to your folder(s)
The code is meant to find out electrical dc power using formulas p=vi, P=v2/R, and P=i2*R.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  2. <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  3. <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  4. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  5.  
  6. <style type="text/css">
  7. #dc-power-button-vi,#dc-power-button-vr,#dc-power-button-ir{
  8. position:relative;
  9. float:right;
  10. margin-top:5px;
  11. }
  12. #tabs ul{
  13. background:#fa0;
  14. }
  15.  
  16. #dc-power{
  17. margin-bottom:5px;
  18. }
  19.  
  20. </style>
  21.  
  22.  
  23.  
  24. <script>
  25. $(document).ready(function(){
  26. $( "#tabs" ).tabs();
  27.  
  28. $("#dc-power-button-vi").click(function(){
  29.         $("#output-of-input").text($(".dc-i").val()*$(".dc-v").val() + "  Watts");
  30.    });
  31. $("#dc-power-button-vr").click(function(){
  32.         $("#output-of-input").text($(".dc-v-of-r").val()*$(".dc-v-of-r").val()/$(".dc-r").val() + "  Watts");
  33.    });
  34. $("#dc-power-button-ir").click(function(){
  35.         $("#output-of-input").text($(".dc-i-of-r").val()*$(".dc-i").val()*$(".dc-r-of-r").val() + "  Watts");
  36.    });
  37. });
  38. </script>
  39. <div id="tabs">
  40. <ul id="dc-p">
  41. <li><a href="#tabs-1">P=VI</a></li>
  42. <li><a href="#tabs-2">P=v<sup>2</sup>/R</a></li>
  43. <li><a href="#tabs-3">P=i<sup>2</sup>*R</a></li>
  44. </ul>
  45. <div id="tabs-1">
  46.  
  47. <div class="row" id="dc-power">
  48.   <div class="col-xs-6">
  49.     <input type="text" class="form-control dc-v" placeholder="Voltage value">
  50.   </div>
  51.   <div class="col-xs-6">
  52.     <input type="text" class="form-control dc-i" placeholder="Current value">
  53.   </div>
  54. <div class="col-xs-6"></div>
  55.   <div class="col-xs-6">
  56. <button type="button" id="dc-power-button-vi" class="btn btn-primary">Calculate</button>
  57. </div>
  58. </div>
  59.  
  60.  
  61. </div>
  62. <div id="tabs-2">
  63. <div class="row" id="dc-power">
  64.   <div class="col-xs-6">
  65.     <input type="text" class="form-control dc-v-of-r" placeholder="Voltage value">
  66.   </div>
  67.   <div class="col-xs-6">
  68.     <input type="text" class="form-control dc-r" placeholder="Resistance value">
  69.   </div>
  70. <div class="col-xs-6"></div>
  71.   <div class="col-xs-6">
  72. <button type="button" id="dc-power-button-vr" class="btn btn-primary">Calculate</button>
  73. </div>
  74. </div>
  75.  
  76. </div>
  77. <div id="tabs-3">
  78. <div class="row" id="dc-power">
  79.   <div class="col-xs-6">
  80.     <input type="text" class="form-control dc-i-of-r" placeholder="Current value">
  81.   </div>
  82.   <div class="col-xs-6">
  83.     <input type="text" class="form-control dc-r-of-r" placeholder="Resistance value">
  84.   </div>
  85. <div class="col-xs-6"></div>
  86.   <div class="col-xs-6">
  87. <button type="button" id="dc-power-button-ir" class="btn btn-primary">Calculate</button>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <div id="output-of-input">Output</div>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.