Battery Status API - HTML5

by Jaganathan

HTML

<div id="charging">Charging state unknown</div>
<div id="level">Battery level unknown</div>
<div id="levelText">Battery level in % unknown</div>
<div id="dischargingTime">Discharging time unknown</div>
<div id="chargingtime">Charging time unknown</div>

JavaScript

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;

    if (battery) {
        // battery API supported
    
    battery.onchargingchange = function () {
      document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
    };

    battery.onlevelchange = function () {
         var currentState = prevoiusState;
    prevoiusState = (battery.charging || battery.level > 0.25);
     
    if (prevoiusState != currentState) {
        if (prevoiusState) {
            document.querySelector('#level').textContent = "Battery power is OK";
        }
        else {
            document.querySelector('#level').textContent = "Battery power is critical!";
        }
      document.querySelector('#levelText').textContent =  "battery level: " + Math.floor(battery.level * 100) + "%"
    }
    };

    battery.ondischargingtimechange = function () {
      document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
    };
        battery.onchargingtimechange = function () {
      document.querySelector('#charging').textContent = battery.chargingTime /60;
    };
        
        }