## 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