Get battery level in web

rao123dk · rao123dk · commit 1992da40d86f · 2018-03-10T14:01:20.000+05:30
diff --git a/battery/app.js b/battery/app.js
@@ -0,0 +1,40 @@
+var battery_charge;
+var chrger_connected;
+window.onload = function(){
+	var onload_ = setInterval(displayBatteryLevel(),500);
+	clearInterval(onload_);
+	setColor();
+}
+
+function displayBatteryLevel(){
+	navigator.getBattery().then(function(data){
+		battery_charge = 100 * data.level;
+		if(data.charging){
+			chrger_connected="Connected ";
+		}else{
+			chrger_connected="disconnected";
+		}
+		//console.log(data);
+		document.getElementById('display_battery_level').innerHTML=battery_charge +"%";
+		document.getElementById('chrger_connected').innerHTML= "Charger " +chrger_connected ;
+		document.getElementById('chargeTime').innerHTML= "FullCharge Time:- "+data.chargingTime;
+		document.getElementById('dischargeTime').innerHTML= "Shut down after:-" +Math.floor(data.dischargingTime/60) +" Min";
+
+	});
+
+}
+setInterval(displayBatteryLevel, 5000);
+function setColor(){
+	if(battery_charge >= 84){
+	navigator.vibrate(1000);
+	document.getElementById('display_battery_level').style.color="green";
+	}else{
+	document.getElementById('display_battery_level').style.color="red";
+	}
+}
+
+var tempColor = setInterval(setColor,2000);
+
+
+
+
diff --git a/battery/index.html b/battery/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Battery</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+
+
+<div id="result_to_disaply">
+	<p id="title">Check Battery Level</p>
+	<h1 id="display_battery_level"></h1>
+	<h2 id="chrger_connected"></h2>
+	<h4 id="chargeTime"></h2>
+	<h4 id="dischargeTime"></h2>
+</div>
+
+<script src="app.js">
+
+</script>
+</body>
+</html>
diff --git a/battery/styles.css b/battery/styles.css
@@ -0,0 +1,21 @@
+#result_to_disaply {
+  position: absolute;
+  width: 600px;
+  height: 400px;
+  z-index: 15;
+  top:  5%;
+  left: 50%;
+  margin: -50px 0 0 -150px;
+  
+}
+
+#title{
+	font-size: 200%;
+}
+#chrger_connected{
+	font-size: 400%;
+}
+
+#display_battery_level{
+	font-size: 600%;
+}
