Battery Status API
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Battery Status</title>
</head>
<body>
<header>
<h1>Battery Status</h1>
</header>
<article>
<textarea id="result"></textarea>
</article>
</body>
</html>
CSS
body {
font-family: "Verdana";
font-size: 9pt;
}
header {
padding: 15px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
background-color: rgb(27, 161, 226);
color: #fff;
}
header h1 {
font-size: 14pt;
}
article {
width: 80%;
margin: auto;
margin-top: 20px;
}
textarea {
font-family: "Consolas";
font-size: 9pt;
width: 400px;
height: 300px;
}
JavaScript
function log(msg){
var output = document.getElementById("result");
output.value += msg;
}
window.onload = function() {
var battery = navigator.getBattery().then(function(battery) {
if (battery) {
var level = battery.level * 100;
var dischargingTime = Math.round(battery.dischargingTime / 60);
var chargingTime = Math.round(battery.chargingTime / 60);
var IsCharging = battery.charging;
var info = "Battery Level: " + level + "%" +
"\nDischarging in " + dischargingTime + " minutes" +
"\nCharging in " + chargingTime + " minutes" +
"\nIs It Charging?: " + IsCharging;
log(info);
//Handlers
battery.addEventListener("levelchange", function(){
level = battery.level * 100;
log("\nBattery level is changed to: " + level + "%");
});
battery.addEventListener("chargingchange", function(){
if(battery.charging)
log("\nCharging");
else
log("\nNot charging");
});
battery.addEventListener("chargingchange",function(){
chargingTime = Math.round(battery.chargingTime / 60);
log("\nCharging time is changed to: " + chargingTime + " minutes");
});
battery.addEventListener("dischargingtimechange",function(){
dischargingTime = Math.round(battery.dischargingTime / 60);
log("\nDischarging time is changed to: " + dischargingTime + " minutes");
});
}
else {
log("Battery Status API is not available");
}
});
};