batteryapi.js

// Check the browser capabilities
if ('getBattery' in navigator) {
    navigator.getBattery().then(initBatteryListeners);
} else {
    document.getElementById('content').innerHTML = 'Your browser doesn\'t support the Battery API. Try Chrome or Firefox.';
}

// Callback when getting the battery
function initBatteryListeners(battery) {
    updateInterface(battery);

    // Install listeners
    battery.addEventListener('levelchange', updateInterface.bind(null, battery));
    battery.addEventListener('chargingtimechange', updateInterface.bind(null, battery));
    battery.addEventListener('dischargingtimechange', updateInterface.bind(null, battery));
    battery.addEventListener('chargingchange', updateInterface.bind(null, battery));
}

function updateInterface(battery) {
    // Battery percentage
    document.getElementById('battery-percentage').innerHTML = (battery.level * 100) + '%';
    // Charging time
    document.getElementById('charging-time').innerHTML = battery.chargingTime + ' seconds';
    // Discharging time
    document.getElementById('discharging-time').innerHTML = battery.dischargingTime + ' seconds';
    // Charging status
    document.getElementById('charging-status').innerHTML = battery.charging ? 'Yes' : 'No';
}