In this video.
Let's get started with the battery API, meaning how we can develop application using the battery API.
Since this section is not about html, css and then how to select element, I have provided the starter
template for you.
And if you're not familiar with don't manipulation, i advise you to watch the previous sections and
don't manipulation.
With that being said, let's proceed.
So let's look at the structure here.
For the HTML, we have a HTML semantic with a header and with a div container.
And inside we have the properties of the battery.
For example, this is for the battery level and then the charging element and then then the charging
time and then the discharge in time.
So we are waiting to inject the dynamic value inside this HTML template.
And if you open the page, this is what you are going to see and this is a static template, so let's
inject the JavaScript in it.
Again, I have connected the JavaScript as you see here, so let's get started working with the API.
So let's open the JavaScript file and let's get our hands dirty.
So I have a beautiful comment here and this one is the battery API, so how can we access that?
So for this function I'll make use of every function as battery is equal to arrow function and I'll
start.
So next step is that let's call the function here to make sure that everything is working.
So inside let's console.log battery and let's open the browser and let's check it out if it is working
fine and the console I see battery meaning that our JavaScript file has been connected successfully.
So now let's implement the logic inside here.
So here we need to get the battery object.
And to do that we are going to make EVE statement and then code what is called get battery and then
in the navigator.
And so let's explain what is going on here.
When you make use of M, it simply means that we are checking if there's a property called get battery
inside this and if we get more and in operator in JavaScript, let's see the end operator returns true
if the specified property is in the specified object.
So if this one returned false, it means that we don't have get battery on the navigator here and this
navigator is a global method.
So here we go.
Inside here we are going to have couple of event listeners and to get that, we are going to await the
response coming back from Navigator.
So here we go.
We bring the navigator dot, get battery
and for this we need to handle the promise.
So the then and here our has a normal function or arrow function.
I prefer to use arrow function and here we go.
And inside the arrow function we have access to the battery object.
So if you try to console.log the battery, let's have a look.
Now check it out.
Let's go in our console where battery is not defined.
Oh, sorry.
Supposed to be battery as that.
And you can see that we have the methods that we can use on the battery as easy as that.
And here you can see we have the charging is true.
Charging time is zero and then charging time is infinity and many more properties.
We are done with it.
So for us we have access to this one.
We are done so we can go ahead and then inject the values inside this one.
So all what has left is that we are going to take this values and then inject it inside the DOM and
that is it, guys, and that is it.
But here is a clue to make it more dynamic, meaning that if we unplug our charger, we need to know
that it is charging or not.
And let's say that when charging your battery, at first it is 20%, but after 2 minutes then it get
to 30%.
We need to see the updated level of your battery and also we want this value to change based on the
battery charging stage.
In that way, we need to create our own event listeners to handle that.
So let's look at the event.
Ties that we are going to listen to.
So the first event type that we are going to listen is called battery charging.
Change meaning when the charging changed from 20% to less, 50%.
We need to handle that event listener.
And after that, we need to handle what is called the battery charge time.
And after that, we need to handle what is called battery discharge in time.
So here is where we are going to handle that.
So let's move step by step and let's work on the battery charging change.
So let's start here.
On the battery, we are going to add event listener, add event listener.
And for this event listener, we are going to listen to charging change.
Make sure you would highlight exactly as what I'm typing, otherwise it will not work great.
And for this we are going to pass in a callback function as that and here we can console.log says that
charging has changed, let's say from 20% to 21%.
That is a battery change.
Great.
So we need to handle this one also.
And the next one is going to be the battery charging time.
So we can copy this one here and then down here we can paste H and change this one to charging time
change as charging time change.
Great.
And here we can see that charging time has changed.
Charging time has changed.
Great.
And lastly, let's also handle the discharging time.
So our copy, this one here and down here, I'll paste this one.
And this is going to be as this charging time change.
So here I'll bring in this charging and start this charging time change.
And you're going to be as discharging.
Great.
So for this implementation we can handle the logic inside each event listener but it is advisable to
create a function so that we can re-use it.
So the first one is let's try to create a function to get the update charging info.
So down here we are going to create a function to update the charging info.
So here we go.
Our mix of normal function and going to be as update.
And going to be a normal function without any argument.
So for this one, we are going to console log battery charging, whether it is true or not.
So const is charging and it's equal to we take in the battery dot charging.
If it is, yes, then we are going to consult.
Yes.
Otherwise we will say no.
So I can go ahead and then console.log.
The is charging.
Great.
So next step is that I need to call this function inside the battery charging change.
So I replace this one and I'll call the function here.
So let's save it.
And now let's see.
We can see that we see nothing inside the console because this event listener has not been called.
That is the charging change.
So we are going to create a function to update all the battery info.
So I'm going to create the function app here by calling it as function and then going to be update or
battery info or details and going to be normal function here.
So for this, let's call the update charging info and I need to call the update or the battery info
down here as update or battery details.
So this one, are we able to see the current state of my battery charging state?
Now have a look.
And indeed I see.
Yes, it means that I am charging my battery.
How awesome it is.
So now we are done with that one.
So the next step is that we need to update this one inside our DOM and we have selected the DOM here.
So let's locate inside the mode where we have the battery charging, which is this one of a class called
battery level.
So now back to the update charging info.
We are going to inject this data.
So here we go.
We take the battery charging dot in h mirror and we are going to inject what is called is charging.
Now let's look at the browser and indeed is charging is yes because I'm always charging it.
So next event listener that I forgot to write is what we call the battery level change, meaning that
if the charging level changes from, let's say 10% to 11%, we need to handle that and we need to consider
the level of the battery charging state.
So we are going to be as battery level change.
So here we go.
We bring in the battery and add event listener.
And what we want is called the level change.
They are all common cases they pass in our callback function and here we go.
So definitely we need to create this function somewhere else so that we can call it inside this global
function here to add it all.
So let's see how we are going to create it.
So down here I'm going to make use of normal function, call us update level change and here we go.
And for this we can go ahead and then console.log the battery.
Dirt level.
So let's call this one inside the level change as updates level change and to see the result inside
a console.
As soon as we run the application, let's call it inside here as update charging info.
Well, for some reasons I'm not seeing the console log, so what is the problem?
It means that we are not calling this function.
So let's check it out and see.
Oh well I need to call the actual function as update level.
So now let's save it and let's check it out.
And you can see that I have one.
One simply means that 100%.
So we need to convert this one by multiplying by 100.
So let's create a variable cost and call this one as level and is equal to battery dot level.
And then we are going to multiply by 100.
And next is we are going to concurred with the percentage sign and that is it.
If you console log the level, let's see the results and we have 100% or 1,000% is supposed to be 100.
Yes.
So let's see a we have 100%.
So what is left is to be able to inject this one inside the DOM.
Did you get it?
Yes.
So here we go.
We are going to take the battery level, which is this one.
And now let's check the semantics.
And this is a battery level, which is this one.
So here we go.
Let's remove the console log.
I'm going to be battery level dirt in a zero and then you're going to use the level.
Save it.
And now let's say a battery level is 100% how awesome it is.
So now we are done with this too.
What is left is this one.
So let's have a look.