conversionTools/Energy/energy.html

<!-- 
    Contributor Details:
    Name: Mostafa Abdelsalam
    mail:abdelslam.mostafa@gmail.com
    GitHub profile link : https://github.com/MostHegz
 -->
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
         <meta name="theme-color" content="#6610f2" />
         <link rel="icon" type="image/ico" href="../../favicon.ico" />
         <title>Energy Converter</title>
 
         <!--  Styles  -->
         <link
           rel="stylesheet"
           href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
         />
         <link
           rel="stylesheet"
           href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
         />
         <link rel="stylesheet" href="energy.css" />
     </head>
     <body onload="calculateUnit1()">
              <!--  Navbar  -->
    <nav class="site-header sticky-top py-1 text-light">
      <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center" id="uNavbar">
          <a class="py-2 text-light" href="../../index.html">
              <i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
          </a>

          <!--    Dynamic Navbar Elements        -->

          <div class="btn-group d-none d-md-block py-2">
              <button type="button" class="btn btn-link text-light text-decoration-none"><a href="https://backgroundgradients.com/" class="text-light">Background Gradients</a> </button>
          </div>

      </div>
  </nav>
  <!--  Navbar End  -->
         <!-- Hero Section Starts -->
         <section
       class="hero-section overflow-hidden py-5 mb-5 text-center text-md-left text-light"
     >
       <div class="container-xl">
         <div class="row">
           <div class="d-none d-md-block col-5 align-self-center">
             <div class="hero-section__graphic position-relative m-auto">
               <svg
                 class="hero-section__icon"
                 height="569pt"
                 viewBox="0 0 569 569.54905"
                 width="569pt"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
                   d="m1.527344 52.246094 37.984375 66.46875c1.28125 2.246094 3.425781 3.871094 5.933593 4.5l35.4375 8.859375 121.542969 121.542969 13.429688-13.425782-123.445313-123.441406c-1.214844-1.21875-2.738281-2.082031-4.40625-2.5l-34.050781-8.542969-32.339844-56.625 27.726563-27.726562 56.648437 32.371093 8.546875 34.050782c.414063 1.671875 1.28125 3.199218 2.496094 4.414062l123.445312 123.445313 13.425782-13.429688-121.542969-121.542969-8.859375-35.417968c-.628906-2.511719-2.253906-4.660156-4.5-5.945313l-66.472656-37.980469c-3.707032-2.109374-8.371094-1.484374-11.394532 1.527344l-37.980468 37.984375c-3.0546878 3.003907-3.71875 7.675781-1.625 11.414063zm0 0"
                 />
                 <path
                   d="m396.3125 187.144531-208.902344 208.90625-13.429687-13.429687 208.90625-208.902344zm0 0"
                 />
                 <path
                   d="m150.847656 403.441406c-1.71875-2.859375-4.804687-4.605468-8.140625-4.605468h-56.972656c-3.332031 0-6.421875 1.746093-8.136719 4.605468l-28.488281 47.476563c-1.808594 3.007812-1.808594 6.769531 0 9.78125l28.488281 47.476562c1.714844 2.855469 4.804688 4.605469 8.136719 4.605469h56.972656c3.335938 0 6.421875-1.75 8.140625-4.605469l28.484375-47.476562c1.808594-3.011719 1.808594-6.773438 0-9.78125zm-13.511718 90.347656h-46.226563l-22.789063-37.980468 22.789063-37.984375h46.226563l22.789062 37.984375zm0 0"
                 />
                 <path
                   d="m456.0625 227.914062c62.714844.210938 113.730469-50.460937 113.941406-113.175781.03125-9.546875-1.140625-19.054687-3.488281-28.308593-1.265625-5.089844-6.417969-8.1875-11.507813-6.921876-1.671874.417969-3.195312 1.28125-4.414062 2.496094l-59.109375 59.070313-46.898437-15.628907-15.640626-46.886718 59.109376-59.121094c3.707031-3.710938 3.703124-9.722656-.007813-13.429688-1.222656-1.222656-2.761719-2.089843-4.445313-2.503906-60.820312-15.402344-122.605468 21.414063-138.007812 82.230469-2.339844 9.226563-3.507812 18.710937-3.476562 28.230469.023437 7.476562.792968 14.929687 2.308593 22.25l-207.957031 207.953125c-7.320312-1.511719-14.773438-2.28125-22.246094-2.308594-62.933594 0-113.949218 51.015625-113.949218 113.949219 0 62.929687 51.015624 113.945312 113.949218 113.945312 62.929688 0 113.945313-51.015625 113.945313-113.945312-.023438-7.476563-.796875-14.929688-2.308594-22.25l49.785156-49.785156 21.773438 21.773437c3.710937 3.707031 9.71875 3.707031 13.429687 0l4.746094-4.75c4.164062-4.136719 10.894531-4.136719 15.058594 0 4.160156 4.148437 4.167968 10.882813.019531 15.042969-.003906.003906-.011719.011718-.019531.019531l-4.746094 4.746094c-3.707031 3.707031-3.707031 9.71875 0 13.425781l113.273438 113.273438c29.792968 30.066406 78.316406 30.285156 108.382812.492187 30.0625-29.792969 30.28125-78.320313.488281-108.382813-.160156-.164062-.324219-.328124-.488281-.492187l-113.273438-113.269531c-3.707031-3.707032-9.71875-3.707032-13.425781 0l-4.746093 4.746094c-4.167969 4.140624-10.894532 4.140624-15.0625 0-4.15625-4.148438-4.167969-10.882813-.019532-15.039063.007813-.007813.015625-.011719.019532-.019531l4.75-4.75c3.707031-3.707032 3.707031-9.71875 0-13.425782l-21.773438-21.773437 49.785156-49.785156c7.320313 1.511719 14.773438 2.285156 22.246094 2.308593zm37.308594 322.851563c-6.898438-.011719-13.738282-1.257813-20.195313-3.683594l74.160157-74.164062c11.191406 29.769531-3.867188 62.972656-33.636719 74.164062-6.496094 2.441407-13.382813 3.691407-20.328125 3.683594zm-107.574219-246.792969c-10.515625 12.542969-8.867187 31.238282 3.675781 41.75 11.023438 9.238282 27.089844 9.230469 38.101563-.027344l106.5625 106.65625c1.15625 1.160157 2.238281 2.382813 3.285156 3.625l-81.1875 81.1875c-1.246094-1.042968-2.46875-2.125-3.628906-3.285156l-106.644531-106.652344c10.515624-12.542968 8.867187-31.238281-3.675782-41.75-11.023437-9.242187-27.09375-9.230468-38.105468.023438l-15.191407-15.191406 81.613281-81.492188zm38.34375-95.503906-215.410156 215.367188c-2.363281 2.359374-3.3125 5.785156-2.507813 9.023437 13.027344 51.160156-17.886718 103.195313-69.050781 116.21875-51.160156 13.027344-103.195313-17.886719-116.222656-69.050781-13.023438-51.160156 17.890625-103.195313 69.054687-116.222656 15.476563-3.9375 31.691406-3.9375 47.167969 0 3.238281.792968 6.65625-.15625 9.023437-2.503907l215.359376-215.371093c2.359374-2.359376 3.308593-5.785157 2.496093-9.019532-12.9375-50.5625 17.5625-102.039062 68.125-114.980468 9.554688-2.441407 19.4375-3.378907 29.28125-2.765626l-50.089843 50.109376c-2.542969 2.539062-3.433594 6.300781-2.296876 9.710937l18.988282 56.976563c.949218 2.832031 3.175781 5.058593 6.011718 6l56.976563 18.992187c3.40625 1.136719 7.167969.25 9.710937-2.289063l50.089844-50.089843c.113282 1.8125.171875 3.605469.171875 5.390625.265625 52.175781-41.8125 94.6875-93.988281 94.957031-8.066406.039063-16.105469-.953125-23.917969-2.953125-3.238281-.808594-6.664062.136719-9.023437 2.496094h.050781zm0 0"
                 />
                 <path
                   d="m491.273438 477.578125-13.429688 13.429687-94.953125-94.953124 13.425781-13.429688zm0 0"
                 />
               </svg>
             </div>
           </div>
           <div class="col align-self-center">
             <h1 class="text-white mb-5">Energy Converter</h1>
             <p class="lead mb-4">You can use this tool to convert energy from one unit to another.<br/>Formula will also be mentioned for your reference. </p>
           </div>
         </div>
       </div>
     </section>
     <!--  Hero Section End  -->
 
 
 
 
         <div class="container">
                 <form>
                 <div class="form-row">
                     <div class="form-group col-4 col-md-6">
                         <input type="text" name="inp1" id="inp1" onkeyup="calculateUnit1()" value="1" class="form-control">
                     </div>
                     <div class="form-group col-8 col-md-6">
                             <select name="s1" id="s1" onchange="recalculateUnits()" class="form-control">
                                 <option value="J" selected="selected">joule (J)</option>
                                 <option value="kJ" >kilojoule (kJ)</option>
                                 <option value="MJ" >Megajoule (MJ)</option>
                                 <option value="GJ" >Gigajoule (GJ)</option>
                                 <option value="mJ" >millijoule (mJ)</option>
                                 <option value="uJ" >microjoule (&mu;J)</option>
                                 <option value="nJ" >nanojoule (nJ)</option>
                                 <option value="kW-h" >kilowatt-hour(kW.h)</option>
                                 <option value="W-h" >Watt-hour(W.h)</option>
                                 <option value="MW-h" >MegaWatt-hour(MW.h)</option>
                                 <option value="GW-h" >GigaWatt-hour(GW.h)</option>
                                 <option value="calIT" >calorie (International Table) (cal (IT))</option>
                                 <option value="kcalIT" >kilocalorie (International Table) (kcal (IT))</option>
                                 <option value="calth" >calorie (thermochemistry) (cal (th))</option>
                                 <option value="kcalth" >kilocalorie (thermochemistry) (kcal (th))</option>
                                 <option value="hp-h" >horsepower hour (hp-h)</option>
                                 <option value="eV" >electron-Volt (eV)</option>
                                 <option value="keV" >kiloelectron-Volt (keV)</option>
                                 <option value="MeV" >Megaelectron-Volt (MeV)</option>
                                 <option value="GeV" >Gigaelectron-Volt (GeV)</option>
                                 <option value="erg" >erg</option>
                                 <option value="Nm" >Newton meter (N.m)</option>
                                 <option value="dyn-cm" >dyne centimeter (dyn.cm)</option>
                                 <option value="kgf-m" >kilogram-force meter (kgf.m)</option>
                                 <option value="gf-m" >gram-force meter (gf.m)</option>
                                 <option value="gf-cm" >gram-force centimeter (gf.cm)</option>
                                 <option value="kgf-cm" >kilogram-force centimeter (kgf.cm)</option>
                                 <option value="lbf-ft" >pound-force foot (lbf.ft)</option>
                                 <option value="lbf-in" >pound-force inch (lbf.in)</option>
                                 <option value="ozf-in" >ounce-force inch (ozf.in)</option>
                                 <option value="kp-m" >kilopond meter (kp.m)</option>
                                 <option value="btu-it" >British Thermal Unit (International Table) (Btu (IT))</option>
                                 <option value="btu-th" >British Thermal Unit (Thermochemistry) (Btu (th))</option>
                                 <option value="ton" >Explosive ton (ton)</option>
                                 <option value="kton" >Explosive kiloton (kton)</option>
                                 <option value="Mton" >Explosive Megaton (Mton)</option>
                             </select>
                     </div>
                 </div>
                 <div class="form-row">
                     <div class="form-group col-4 col-md-6">
                         <input type="text" name="inp2" id="inp2" onkeyup="calculateUnit2()" class="form-control">
                     </div>
                     <div class="form-group col-8 col-md-6">
                             <select name="s2" id="s2" onchange="recalculateUnits()" class="form-control">
                                <option value="J" selected="selected">joule (J)</option>
                                 <option value="kJ" >kilojoule (kJ)</option>
                                 <option value="MJ" >Megajoule (MJ)</option>
                                 <option value="GJ" >Gigajoule (GJ)</option>
                                 <option value="mJ" >millijoule (mJ)</option>
                                 <option value="uJ" >microjoule (&mu;J)</option>
                                 <option value="nJ" >nanojoule (nJ)</option>
                                 <option value="kW-h" >kilowatt-hour(kW.h)</option>
                                 <option value="W-h" >Watt-hour(W.h)</option>
                                 <option value="MW-h" >MegaWatt-hour(MW.h)</option>
                                 <option value="GW-h" >GigaWatt-hour(GW.h)</option>
                                 <option value="calIT" >calorie (International Table) (cal (IT))</option>
                                 <option value="kcalIT" >kilocalorie (International Table) (kcal (IT))</option>
                                 <option value="calth" >calorie (thermochemistry) (cal (th))</option>
                                 <option value="kcalth" >kilocalorie (thermochemistry) (kcal (th))</option>
                                 <option value="hp-h" >horsepower hour (hp-h)</option>
                                 <option value="eV" >electron-Volt (eV)</option>
                                 <option value="keV" >kiloelectron-Volt (keV)</option>
                                 <option value="MeV" >Megaelectron-Volt (MeV)</option>
                                 <option value="GeV" >Gigaelectron-Volt (GeV)</option>
                                 <option value="erg" >erg</option>
                                 <option value="Nm" >Newton meter (N.m)</option>
                                 <option value="dyn-cm" >dyne centimeter (dyn.cm)</option>
                                 <option value="kgf-m" >kilogram-force meter (kgf.m)</option>
                                 <option value="gf-m" >gram-force meter (gf.m)</option>
                                 <option value="gf-cm" >gram-force centimeter (gf.cm)</option>
                                 <option value="kgf-cm" >kilogram-force centimeter (kgf.cm)</option>
                                 <option value="lbf-ft" >pound-force foot (lbf.ft)</option>
                                 <option value="lbf-in" >pound-force inch (lbf.in)</option>
                                 <option value="ozf-in" >ounce-force inch (ozf.in)</option>
                                 <option value="kp-m" >kilopond meter (kp.m)</option>
                                 <option value="btu-it" >British Thermal Unit (International Table) (Btu (IT))</option>
                                 <option value="btu-th" >British Thermal Unit (Thermochemistry) (Btu (th))</option>
                                 <option value="ton" >Explosive ton (ton)</option>
                                 <option value="kton" >Explosive kiloton (kton)</option>
                                 <option value="Mton" >Explosive Megaton (Mton)</option>
                             </select>
                     </div>
                 </div>
             </form>
             <div class="card text-white bg-dark mb-3 mx-auto" style="max-width: 18rem;">
                   <div class="card-header"><h4>Formula Used</h4></div>
                   <div class="card-body">
                     <p class="card-text" id="formula"></p>
                   </div>
             </div>
             <!--  Footer  -->
             <footer class="border-top py-3 px-4">
                 <div class="row align-items-center">
                     <div class="col-md-6">
                         <p class="m-0">Copyright &copy; 2020 codeezzi</p>
                         <p class="m-0">Page Created by <a href="https://github.com/MostHegz" target="_blank">Mostafa Abdelsalam</a></p>
                     </div>
                     <div class="col-md-6 text-md-right">
                         <a href="#" class="text-dark">Terms of Use</a>
                         <span class="text-muted mx-2">|</span>
                         <a href="#" class="text-dark">Privacy Policy</a>
                     </div>
                 </div>
             </footer>
     <!--  Footer End  -->
 
             <!--Scripts-->
            
         </div>
    <!-- Global Scripts: Should load in all pages -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="../../assets/config/categories.js"></script>
    <script src="../../assets/config/tools.js"></script>
    <script src="../../assets/scripts/templates.js"></script>
    <script src="../../assets/scripts/app.js"></script>
    <!-- END of Global Scripts -->
  </body>
 </html>