Merge pull request #365 from Mukulbaid63/bs_1

tejan-singh · web-flow · commit 39a10918a4e5 · 2020-11-17T13:42:06.000+05:30
Battery status added
diff --git a/JavaScript/BatteryStatus/README.md b/JavaScript/BatteryStatus/README.md
@@ -0,0 +1,4 @@
+## Battery Status app :
+- This script is made using HTML,CSS and JS.
+- It shows the battery level,charging status,battery charging time, battery discharging time on the screen.
+- It also updates the if any changes appear on the parameters.
diff --git a/JavaScript/BatteryStatus/app.js b/JavaScript/BatteryStatus/app.js
@@ -0,0 +1,42 @@
+
+var level=document.querySelector(".charging-level")
+var status=document.querySelector(".status")
+var charge=document.querySelector(".charge")
+var discharge=document.querySelector(".discharge")
+
+if(navigator.getBattery()){
+navigator.getBattery()
+    .then(function(battery) {
+        level.innerHTML = battery.level*100;
+        battery.onlevelchange=function()
+        {
+            level.innerHTML = battery.level*100;
+        }
+        charge.innerHTML=battery.chargingTime;
+        battery.onchargingtimechange=function()
+        {
+            charge.innerHTML = battery.chargingTime;
+        }
+        discharge.innerHTML=battery.dischargingTime;
+        battery.ondischargingtimechange=function()
+        {
+            discharge.innerHTML = battery.dischargingTime;
+        }
+        if(battery.charging==true) {status.innerHTML="Charging";
+        battery.onchargingchange=function()
+        {
+            status.innerHTML="Not Charging";
+        }}
+        else {status.innerHTML="Not Charging";
+        battery.onchargingchange=function()
+        {
+            status.innerHTML="Charging";
+        }}
+    })
+    .catch(function(e) {
+        console.error(e);
+    });
+}
+else{
+    status.innerHTML="Browser doesn't support ";
+}
diff --git a/JavaScript/BatteryStatus/index.html b/JavaScript/BatteryStatus/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+      <div> Level: <span class="charging-level">
+            unknown
+       </span>%</div>
+       <div> Status:<span class="status">
+            unknown
+        </span></div>
+        <div>Charging Time:<span class="charge">unknown</span> seconds</div>
+        <div>Charging Time:<span class="discharge">unknown</span> seconds</div>
+        <script src="app.js"></script>
+    </body>
+</html>
diff --git a/JavaScript/BatteryStatus/style.css b/JavaScript/BatteryStatus/style.css
@@ -0,0 +1,13 @@
+div{
+    padding: 10px;
+    margin: 10px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-size: 20px;
+    font-weight: 700;
+}
+body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
