Chris Rutledge Logo

Battery API

Posted: 2/16/21

* Some browsers may not support this API feature (including iOS Safari)

Code Resource

      
        
HTML

        <figure class="phone">
        <div class="phone__card">
          <div class="lorem">
            <div class="battery">
<i class="fa fa-battery-half"></i></div>
          </div>
        </div>
      </figure>

     
CSS

    .battery {
      font-size: 1.5rem;
      text-align: center;
    }
    .fa-battery-full span {
      font-family: arial !important;
      font-weight: bold;
    }
    
    
JavaScript

    const batteryPromise = navigator.getBattery();
batteryPromise.then(batteryCallback);

function batteryCallback(batteryObject) {
  printBatteryStatus(batteryObject);
}
function printBatteryStatus(batteryObject) {
  if (batteryObject.level >= 0.9) {
    document.querySelector(
      ".battery"
    ).innerHTML = `${Math.trunc(
      batteryObject.level * 100
    )}%`;
  }
}