Check battery status with Javascript Navigator Battery

Hey Guys, In Today’s Blog We are going to see How to create a Check battery Level Status With JavaScript Using Navigator.getBattery . For that, the respective source codes were given below along with the respective preview of the output section. So you can make use of that.

Now The Project is going to create and for that, we are first adding an HTML Code.

HTML CODE:

<div class="main">
  <h1 id="level" class="animated fadeIn">Battery level: 00%</h1>
  <div class="progress">
    <div class="progress-bar" style="width: 0%">
    </div>
  </div>
  <a href="http://caniuse.com/#feat=battery-status" class="btn btn-raised btn-primary" target="_blank">Browser compatibility</a>
</div>

First We create a div class with the name “main”. Then We added an H1 tag for adding a heading to the Battery level.

Now we adding a div class progress bar for displaying the battery-level of the device.

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

Portfolio Website using HTML and CSS (Source Code)

Then Lastly we create an anchor tag with a link for battery status and closed the div tag.

So That’s of for HTML, Now We go for CSS to make some styles.

CSS CODE:

.main{
  width: 70%;
  margin: 5% auto;
}

Now We just calling the head div class and adding the width to 70% with margin 5% auto. The width is for progress bar to display it for 70%.

Also We can now move for JavaScript to display the current battery status by making animation on progress bar according to percentage there.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

JAVA SCRIPT CODE:

navigator.getBattery().then(function(battery) {
    $('.progress-bar').css('width', battery.level * 100 + '%');
    $('#level').html('Battery level: ' + (battery.level * 100).toFixed() + '%')
    battery.onlevelchange = function() {
        $('#level').html('Battery level: ' + (this.level * 100).toFixed() + '%')
        $('.progress-bar').css('width', this.level * 100 + '%');
    };
});

Here first we are adding an getBattery JavaScript built in function that calls out the battery level and calling the next one which is progress bar and fixing the condition that multiplying the battery level to 100 with %.

50+ Html ,Css & Javascript Projects With Source Code

Then again we called out the header div that needs to display the battery percentage in numbers and for that we again multiplying the battery level with 100 to the fixed percentage which means the maximum percentage the charge goes…

The Specific Line for above explanation.

navigator.getBattery().then(function(battery) {
    $('.progress-bar').css('width', battery.level * 100 + '%');
    $('#level').html('Battery level: ' + (battery.level * 100).toFixed() + '%')

Now We have completed the above part and here once more function is added which is used to display the battery status with level and progress bar while the device in charge .

The lines of code given below satisfies above explanation.

battery.onlevelchange = function() {
        $('#level').html('Battery level: ' + (this.level * 100).toFixed() + '%')
        $('.progress-bar').css('width', this.level * 100 + '%');
    };
});

Final Output Of Detect Battery Level Status:

Now We have Successfully created our Check battery Level Status With JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

How to Create a Weather App using JavaScript

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Alex Bulintis

WRITTEN BY – Ragunathan