Build a Physics Electricity Energy and Power Calculator in Browser Using Javascript Full Project For Beginners

Build a Physics Electricity Energy and Power Calculator in Browser Using Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a physics electricity energy and power calculator in browser using javascript. All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>Energy Conversion</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
    <style>
      input{width:100%; outline:none;}
      input[type=number]::-webkit-inner-spin-button, 
      input[type=number]::-webkit-outer-spin-button
        {-webkit-appearance: none; margin: 0; 
        }
    </style>
  </head>
  <body>
    <nav class="w3-sidenav w3-blue w3-card-4 w3-animate-left" style="display:none; z-index:4" id="mySidenav">
      <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-large w3-right-align w3-margin-right w3-hover-none w3-xxlarge" style="cursor:default"> <span style="cursor:pointer;" class="w3-hover-text-grey">×</span></a>
      <a class="w3-hover-light-blue w3-large" href="acceleration.html">Acceleration</a>
      <a class="w3-hover-light-blue w3-large" href="area.html">Area</a>
      <a class="w3-hover-light-blue w3-large" href="currency.html">Currency</a>
      <a class="w3-hover-light-blue w3-large w3-amber" href="energy.html">Energy</a>
      <a class="w3-hover-light-blue w3-large" href="force.html">Force</a>
      <a class="w3-hover-light-blue w3-large" href="fuel_consumption.html">Fuel Consumption</a>
      <a class="w3-hover-light-blue w3-large" href="length.html">Length</a>
      <a class="w3-hover-light-blue w3-large" href="mass.html">Mass</a>
      <a class="w3-hover-light-blue w3-large" href="power.html">Power</a>
      <a class="w3-hover-light-blue w3-large" href="pressure.html">Pressure</a>
      <a class="w3-hover-light-blue w3-large" href="speed.html">Speed</a>
      <a class="w3-hover-light-blue w3-large" href="temperature.html">Temperature</a>
      <a class="w3-hover-light-blue w3-large" href="torque.html">Torque</a>
      <a class="w3-hover-light-blue w3-large" href="volume.html">Volume</a>
      <a class="w3-hover-light-blue w3-large" href="volumetric_flow.html">Volumetric Flow</a>
    </nav>    
    
    <!-- Overlay -->
    <div id="myOverlay" class="w3-overlay" onclick="w3_close()" style="cursor:pointer"></div>

    
    <div id="main">
      <header>
        <div class="w3-container w3-red w3-padding">
          <span class="w3-opennav w3-xxlarge" onclick="w3_open()" id="openNav">☰</span>
          <h1 class="w3-jumbo w3-center w3-padding-24"><b>Energy Conversion</b></h1></div>
      </header>
      <div class="container w3-margin-top">
        <div class="w3-container">
          <button class="w3-btn w3-right w3-blue w3-ripple" onclick="clear_all_values()"><b>Clear</b></button>
        </div>
    
        <div class="w3-row-padding">
          
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-left">
              <label><b>Megajoule : </b><input type="number" class="w3-border-0 w3-border-bottom" id="megajoule" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="mj_to_others(this.value)" placeholder="megajoule (MJ)" min="0"/>
              </label>
            </div>
          </div>

          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-right">
              <label><b>Kilojoule : </b><input type="number" class="w3-border-0 w3-border-bottom" id="kilojoule" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="kj_to_others(this.value)" placeholder="kilojoule (kJ)" min="0"/>
              </label>
            </div>
          </div>

          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-left">
              <label><b>Joule : </b><input type="number" class="w3-border-0 w3-border-bottom" id="joule" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="joule_to_others(this.value)" placeholder="joule (J)" min="0"/>
              </label>
            </div>
          </div>
          
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-right">
              <label><b>Ergs : </b><input type="number" class="w3-border-0 w3-border-bottom" id="ergs" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="ergs_to_others(this.value)" placeholder="ergs" min="0"/>
              </label>
            </div>
          </div>
    
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-left">
              <label><b> Electronvolt : </b><input type="number" class="w3-border-0 w3-border-bottom w3-animate-left" id="electronvolt" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="ev_to_others(this.value)" placeholder="electronvolt (eV)" min="0"/>
              </label>
            </div>
          </div>
      
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-right">
              <label><b>Kilocalorie : </b><input type="number" class="w3-border-0 w3-border-bottom" id="kilocalorie" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="kcal_to_others(this.value)" placeholder="kcal" min="0"/>
              </label>
            </div>
          </div> 
          
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-left">
              <label><b>Calorie : </b><input type="number" class="w3-border-0 w3-border-bottom" id="calorie" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="calorie_to_others(this.value)" placeholder="cal" min="0"/>
              </label>
            </div>
          </div>
    
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-right">
              <label><b>Foot-Pound : </b><input type="number" class="w3-border-0 w3-border-bottom" id="footpound" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="ftlb_to_others(this.value)" placeholder="ft-lb" min="0"/>
              </label>
            </div>
          </div>  
    
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-left">
              <label><b>Inch-Pound : </b><input type="number" class="w3-border-0 w3-border-bottom" id="inchpound" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="inlb_to_others(this.value)" placeholder="in-lb" min="0"/>
              </label>
            </div>
          </div> 

          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-right">
              <label><b>Kilowatt-Hour : </b><input type="number" class="w3-border-0 w3-border-bottom" id="kilowatthour" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="kwh_to_others(this.value)" placeholder="kilowatt-hour (kWh)" min="0"/>
              </label>
            </div>
          </div> 

          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-left">
              <label><b>Watt-Hour : </b><input type="number" class="w3-border-0 w3-border-bottom" id="watthour" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="wh_to_others(this.value)" placeholder="watt-hour (Wh)" min="0"/>
              </label>
            </div>
          </div> 
          
          <div class="w3-panel w3-col m6 l6">
            <div class="w3-card-2 w3-padding w3-margin-bottom w3-animate-right">
              <label><b>British Thermal Unit : </b><input type="number" class="w3-border-0 w3-border-bottom" id="btu" onfocus="increasecardsize(this.parentElement)" onblur="deccardsize(this.parentElement)" oninput="btu_to_others(this.value)" placeholder="btu" min="0"/>
              </label>
            </div>
          </div>
      
        </div>
      </div>
    </div>

    <script type="text/javascript" src="assets/js/main.js"></script>
    <script type="text/javascript" src="assets/js/energy.js"></script>
  </body>
</html>

 

See also  Node.js Express Youtube Video URL Timestamp Link Generator in Javascript Full Project 2020

 

Now make a script.js file and copy paste the following code

 

script.js

 

/* opening nav bar */
function w3_open() {
  document.getElementById("mySidenav").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

/* closing nav bar */
function w3_close() {
   document.getElementById("mySidenav").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}

/* increasing card shadow on input focus */
function increasecardsize(x){
  x.parentElement.className = x.parentElement.className.replace("w3-card-2", "w3-card-12");
  x.lastElementChild.className += " w3-border-blue";
}

/* decreasing card shadow on input blur */
function deccardsize(x){
  x.parentElement.className = x.parentElement.className.replace("w3-card-12", "w3-card-2");
  x.lastElementChild.className = x.lastElementChild.className.replace("w3-border-blue", "");
}

function clear_all_values(){
  var x = document.getElementsByTagName("input");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].value = "";
  }
}


/* Functions for energy conversion*/
/* mega joule to others */ 
function mj_to_others(x){
  document.getElementById("kilojoule").value = (x*1000);
  document.getElementById("joule").value = (x*1000000);
  document.getElementById("ergs").value = x*10000000000000;
  document.getElementById("electronvolt").value = x*6241509000000000000000000;
  document.getElementById("kilocalorie").value = (x*239.0057);
  document.getElementById("calorie").value = (x*239005.7);
  document.getElementById("footpound").value = x*737562.1;
  document.getElementById("inchpound").value = (x*8850746);
  document.getElementById("kilowatthour").value = (x*0.2777778); 
  document.getElementById("watthour").value = (x*277.7778); 
  document.getElementById("btu").value = (x*947.8171); 
}

/* kilo joule to others */ 
function kj_to_others(x){
  document.getElementById("megajoule").value = (x*0.001);
  document.getElementById("joule").value = (x*1000);
  document.getElementById("ergs").value = x*10000000000;
  document.getElementById("electronvolt").value = x*6241509000000000000000;
  document.getElementById("kilocalorie").value = (x*0.2390057);
  document.getElementById("calorie").value = (x*239.0057);
  document.getElementById("footpound").value = x*737.5621;
  document.getElementById("inchpound").value = (x*8850.746);
  document.getElementById("kilowatthour").value = (x*0.0002777778); 
  document.getElementById("watthour").value = (x*0.2777778); 
  document.getElementById("btu").value = (x*0.9478171); 
}

/* joule to others */ 
function joule_to_others(x){
  document.getElementById("megajoule").value = (x*0.000001);
  document.getElementById("kilojoule").value = (x*0.001);
  document.getElementById("ergs").value = x*10000000;
  document.getElementById("electronvolt").value = x*6241509000000000000;
  document.getElementById("kilocalorie").value = (x*0.2390057);
  document.getElementById("calorie").value = (x*0.0002390057);
  document.getElementById("footpound").value = x*0.7375621;
  document.getElementById("inchpound").value = (x*8.850746);
  document.getElementById("kilowatthour").value = (x*0.0000002777778); 
  document.getElementById("watthour").value = (x*0.0002777778); 
  document.getElementById("btu").value = (x*0.0009478171); 
}

/* ergs to others */ 
function ergs_to_others(x){
  document.getElementById("megajoule").value = (x*0.0000000000001);
  document.getElementById("kilojoule").value = (x*0.0000000001);
  document.getElementById("joule").value = x*0.0000001;
  document.getElementById("electronvolt").value = x*624150900000;
  document.getElementById("kilocalorie").value = (x*0.00000000002390057);
  document.getElementById("calorie").value = (x*0.00000002390057);
  document.getElementById("footpound").value = x*0.00000007375621;
  document.getElementById("inchpound").value = (x*0.0000008850746);
  document.getElementById("kilowatthour").value = (x*0.00000000000002777778); 
  document.getElementById("watthour").value = (x*0.00000000002777778); 
  document.getElementById("btu").value = (x*0.00000000009478171); 
}

/* electron volt to others */ 
function ev_to_others(x){
  document.getElementById("megajoule").value = (x*0.0000000000000000000000001602177);
  document.getElementById("kilojoule").value = (x*0.0000000000000000000001602177);
  document.getElementById("joule").value = x*0.0000000000000000001602177;
  document.getElementById("ergs").value = x*0.000000000001602177;
  document.getElementById("kilocalorie").value = (x*0.00000000000000000000003829294);
  document.getElementById("calorie").value = (x*0.00000000000000000003829294);
  document.getElementById("footpound").value = x*0.0000000000000000001181705;
  document.getElementById("inchpound").value = (x*0.000000000000000001418046);
  document.getElementById("kilowatthour").value = (x*0.0000000000000000000000000445049); 
  document.getElementById("watthour").value = (x*0.0000000000000000000000445049); 
  document.getElementById("btu").value = (x*0.000000000000000000000181857); 
}

/* kilo calorie to others */ 
function kcal_to_others(x){
  document.getElementById("megajoule").value = (x*0.004184);
  document.getElementById("kilojoule").value = (x*4.184);
  document.getElementById("joule").value = x*4184;
  document.getElementById("ergs").value = x*41840000000;
  document.getElementById("electronvolt").value = (x*26114480000000000000000);
  document.getElementById("calorie").value = (x*1000);
  document.getElementById("footpound").value = x*3085.96;
  document.getElementById("inchpound").value = (x*37031.52);
  document.getElementById("kilowatthour").value = (x*0.001162222); 
  document.getElementById("watthour").value = (x*1.162222); 
  document.getElementById("btu").value = (x*3.965667); 
}

/* calorie to others */ 
function calorie_to_others(x){
  document.getElementById("megajoule").value = (x*0.000004184);
  document.getElementById("kilojoule").value = (x*0.004184);
  document.getElementById("joule").value = x*4.184;
  document.getElementById("ergs").value = x*41840000;
  document.getElementById("electronvolt").value = (x*26114480000000000000);
  document.getElementById("kilocalorie").value = (x*0.001);
  document.getElementById("footpound").value = x*3.08596;
  document.getElementById("inchpound").value = (x*37.03152);
  document.getElementById("kilowatthour").value = (x*0.000001162222); 
  document.getElementById("watthour").value = (x*0.001162222); 
  document.getElementById("btu").value = (x*0.003965667); 
}

/* foot pound to others */ 
function ftlb_to_others(x){
  document.getElementById("megajoule").value = (x*0.000001355818);
  document.getElementById("kilojoule").value = (x*0.001355818);
  document.getElementById("joule").value = x*1.355818;
  document.getElementById("ergs").value = x*13558180;
  document.getElementById("electronvolt").value = (x*8462350000000000000);
  document.getElementById("kilocalorie").value = (x*0.0003240483);
  document.getElementById("calorie").value = x*0.3240483;
  document.getElementById("inchpound").value = (x*12);
  document.getElementById("kilowatthour").value = (x*0.0000003766161); 
  document.getElementById("watthour").value = (x*0.0003766161); 
  document.getElementById("btu").value = (x*0.001285067); 
}

/* inch pound to others */ 
function inlb_to_others(x){
  document.getElementById("megajoule").value = (x*0.0000001129848);
  document.getElementById("kilojoule").value = (x*0.0001129848);
  document.getElementById("joule").value = x*0.1129848;
  document.getElementById("ergs").value = x*1129848;
  document.getElementById("electronvolt").value = (x*705195900000000000);
  document.getElementById("kilocalorie").value = (x*0.00002700402);
  document.getElementById("calorie").value = x*0.02700402;
  document.getElementById("footpound").value = (x*0.08333333);
  document.getElementById("kilowatthour").value = (x*0.00000003138467); 
  document.getElementById("watthour").value = (x*0.00003138467); 
  document.getElementById("btu").value = (x*0.000107089); 
}

/* kilowatt hour to others */ 
function kwh_to_others(x){
  document.getElementById("megajoule").value = (x*3.6);
  document.getElementById("kilojoule").value = (x*3600);
  document.getElementById("joule").value = x*3600000;
  document.getElementById("ergs").value = x*36000000000000;
  document.getElementById("electronvolt").value = (x*22469430000000000000000000);
  document.getElementById("kilocalorie").value = (x*860.4207);
  document.getElementById("calorie").value = x*860420.7;
  document.getElementById("footpound").value = (x*2655224);
  document.getElementById("inchpound").value = (x*31862680); 
  document.getElementById("watthour").value = (x*1000); 
  document.getElementById("btu").value = (x*3412.142); 
}

/* watt hour to others */ 
function wh_to_others(x){
  document.getElementById("megajoule").value = (x*0.0036);
  document.getElementById("kilojoule").value = (x*3.6);
  document.getElementById("joule").value = x*3600;
  document.getElementById("ergs").value = x*36000000000;
  document.getElementById("electronvolt").value = (x*22469430000000000000000);
  document.getElementById("kilocalorie").value = (x*0.8604207);
  document.getElementById("calorie").value = x*860.4207;
  document.getElementById("footpound").value = (x*2655.224);
  document.getElementById("inchpound").value = (x*31862.68); 
  document.getElementById("kilowatthour").value = (x*0.001); 
  document.getElementById("btu").value = (x*3.412142); 
}

/* btu to others */ 
function btu_to_others(x){
  document.getElementById("megajoule").value = (x*0.001055056);
  document.getElementById("kilojoule").value = (x*1.055056);
  document.getElementById("joule").value = x*1055.056;
  document.getElementById("ergs").value = x*10550560000;
  document.getElementById("electronvolt").value = (x*6585141000000000000000);
  document.getElementById("kilocalorie").value = (x*0.2521644);
  document.getElementById("calorie").value = x*252.1644;
  document.getElementById("footpound").value = (x*778.1693);
  document.getElementById("inchpound").value = (x*9338.031); 
  document.getElementById("kilowatthour").value = (x*0.0002930711); 
  document.getElementById("watthour").value = (x*0.2930711); 
}

 

See also  jQuery Project to Lazy Load Youtube Videos on Page Load to Increase Speed of Website in HTML5 & Javascript Full

 

Now if you open the index.html file inside the browser you will see the below output

 

Leave a Reply