Javascript Battery Percentage | How To Show Battery Percentage In Html

Welcome🎉 to Code With Random blog. In this blog, we learn how we create Javascript Battery Percentage. We use HTML, Css, and javascript for this Javascript Battery Percentage. I hope you enjoy our blog so let’s start with a basic HTML structure for the Javascript Battery Percentage.

Table of Contents

HTML Code

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Javascript Battery Percentage </title>  
     </head>  
  <body>  
   <main>  
    <h1>Your battery Perctenage is</h1>  
    <div class="battry"></div>  
    <p>I am Daily Make new content For You ,hope you like this post</p>  
   </main>  
     </body>  
 </html>

There is all the HTML code for the Javascript Battery Percentage. Now, you can see an output with CSS, then we write javascript for the Javascript Battery Percentage.

output
CSS code

  <style>  
    body {  
     margin: 1rem;  
     padding: 2rem;  
     background-color: #eee;  
    }  
    .battry {  
     font-size: 2rem;  
     color: cornflowerblue;  
    }  
   </style>

Css Updated output

Javascript code

  <script>  
    const BattryLevel = document.querySelector(".battry");  
    navigator.getBattery().then(function (battery) {  
     const level = battery.level;  
     const status = level * 100 + "%";  
     BattryLevel.innerHTML = status;  
    });  
   </script>

Final output

Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Javascript Battery Percentage. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Javascript Battery Percentage using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.