1
00:00:07,750 --> 00:00:08,890
In this video.

2
00:00:08,890 --> 00:00:17,620
Let's get started with the battery API, meaning how we can develop application using the battery API.

3
00:00:17,860 --> 00:00:25,900
Since this section is not about html, css and then how to select element, I have provided the starter

4
00:00:25,900 --> 00:00:27,090
template for you.

5
00:00:27,100 --> 00:00:33,330
And if you're not familiar with don't manipulation, i advise you to watch the previous sections and

6
00:00:33,490 --> 00:00:34,990
don't manipulation.

7
00:00:35,020 --> 00:00:37,360
With that being said, let's proceed.

8
00:00:37,360 --> 00:00:39,670
So let's look at the structure here.

9
00:00:39,700 --> 00:00:47,020
For the HTML, we have a HTML semantic with a header and with a div container.

10
00:00:47,020 --> 00:00:50,720
And inside we have the properties of the battery.

11
00:00:50,740 --> 00:00:58,150
For example, this is for the battery level and then the charging element and then then the charging

12
00:00:58,150 --> 00:01:01,270
time and then the discharge in time.

13
00:01:01,270 --> 00:01:06,820
So we are waiting to inject the dynamic value inside this HTML template.

14
00:01:06,940 --> 00:01:13,930
And if you open the page, this is what you are going to see and this is a static template, so let's

15
00:01:13,930 --> 00:01:16,090
inject the JavaScript in it.

16
00:01:16,270 --> 00:01:23,830
Again, I have connected the JavaScript as you see here, so let's get started working with the API.

17
00:01:23,830 --> 00:01:28,900
So let's open the JavaScript file and let's get our hands dirty.

18
00:01:29,050 --> 00:01:37,600
So I have a beautiful comment here and this one is the battery API, so how can we access that?

19
00:01:37,690 --> 00:01:45,700
So for this function I'll make use of every function as battery is equal to arrow function and I'll

20
00:01:45,710 --> 00:01:46,210
start.

21
00:01:46,210 --> 00:01:52,210
So next step is that let's call the function here to make sure that everything is working.

22
00:01:52,210 --> 00:02:01,060
So inside let's console.log battery and let's open the browser and let's check it out if it is working

23
00:02:01,060 --> 00:02:08,889
fine and the console I see battery meaning that our JavaScript file has been connected successfully.

24
00:02:08,889 --> 00:02:12,520
So now let's implement the logic inside here.

25
00:02:12,700 --> 00:02:16,780
So here we need to get the battery object.

26
00:02:16,780 --> 00:02:25,450
And to do that we are going to make EVE statement and then code what is called get battery and then

27
00:02:25,450 --> 00:02:28,360
in the navigator.

28
00:02:28,400 --> 00:02:31,480
And so let's explain what is going on here.

29
00:02:31,750 --> 00:02:38,560
When you make use of M, it simply means that we are checking if there's a property called get battery

30
00:02:38,560 --> 00:02:46,900
inside this and if we get more and in operator in JavaScript, let's see the end operator returns true

31
00:02:46,930 --> 00:02:50,470
if the specified property is in the specified object.

32
00:02:50,470 --> 00:02:57,190
So if this one returned false, it means that we don't have get battery on the navigator here and this

33
00:02:57,190 --> 00:02:59,290
navigator is a global method.

34
00:02:59,290 --> 00:03:01,030
So here we go.

35
00:03:01,060 --> 00:03:07,750
Inside here we are going to have couple of event listeners and to get that, we are going to await the

36
00:03:07,750 --> 00:03:10,210
response coming back from Navigator.

37
00:03:10,210 --> 00:03:11,800
So here we go.

38
00:03:11,830 --> 00:03:16,090
We bring the navigator dot, get battery

39
00:03:20,020 --> 00:03:22,900
and for this we need to handle the promise.

40
00:03:22,900 --> 00:03:27,310
So the then and here our has a normal function or arrow function.

41
00:03:27,310 --> 00:03:31,510
I prefer to use arrow function and here we go.

42
00:03:32,470 --> 00:03:37,900
And inside the arrow function we have access to the battery object.

43
00:03:37,900 --> 00:03:43,630
So if you try to console.log the battery, let's have a look.

44
00:03:43,630 --> 00:03:45,130
Now check it out.

45
00:03:45,160 --> 00:03:50,560
Let's go in our console where battery is not defined.

46
00:03:50,980 --> 00:03:51,760
Oh, sorry.

47
00:03:51,780 --> 00:03:54,490
Supposed to be battery as that.

48
00:03:54,640 --> 00:04:02,500
And you can see that we have the methods that we can use on the battery as easy as that.

49
00:04:02,680 --> 00:04:06,640
And here you can see we have the charging is true.

50
00:04:06,760 --> 00:04:12,130
Charging time is zero and then charging time is infinity and many more properties.

51
00:04:12,250 --> 00:04:13,390
We are done with it.

52
00:04:13,480 --> 00:04:15,790
So for us we have access to this one.

53
00:04:15,790 --> 00:04:21,640
We are done so we can go ahead and then inject the values inside this one.

54
00:04:21,640 --> 00:04:28,450
So all what has left is that we are going to take this values and then inject it inside the DOM and

55
00:04:28,450 --> 00:04:31,240
that is it, guys, and that is it.

56
00:04:31,510 --> 00:04:39,670
But here is a clue to make it more dynamic, meaning that if we unplug our charger, we need to know

57
00:04:39,670 --> 00:04:41,410
that it is charging or not.

58
00:04:41,410 --> 00:04:49,390
And let's say that when charging your battery, at first it is 20%, but after 2 minutes then it get

59
00:04:49,390 --> 00:04:50,620
to 30%.

60
00:04:50,650 --> 00:04:58,690
We need to see the updated level of your battery and also we want this value to change based on the

61
00:04:58,690 --> 00:05:00,400
battery charging stage.

62
00:05:00,400 --> 00:05:05,680
In that way, we need to create our own event listeners to handle that.

63
00:05:05,770 --> 00:05:07,210
So let's look at the event.

64
00:05:07,350 --> 00:05:09,990
Ties that we are going to listen to.

65
00:05:10,050 --> 00:05:17,610
So the first event type that we are going to listen is called battery charging.

66
00:05:19,120 --> 00:05:25,110
Change meaning when the charging changed from 20% to less, 50%.

67
00:05:25,120 --> 00:05:27,580
We need to handle that event listener.

68
00:05:27,940 --> 00:05:33,340
And after that, we need to handle what is called the battery charge time.

69
00:05:35,750 --> 00:05:40,730
And after that, we need to handle what is called battery discharge in time.

70
00:05:45,200 --> 00:05:47,950
So here is where we are going to handle that.

71
00:05:47,960 --> 00:05:54,890
So let's move step by step and let's work on the battery charging change.

72
00:05:55,190 --> 00:05:57,050
So let's start here.

73
00:05:57,050 --> 00:06:03,710
On the battery, we are going to add event listener, add event listener.

74
00:06:03,890 --> 00:06:09,500
And for this event listener, we are going to listen to charging change.

75
00:06:10,490 --> 00:06:18,860
Make sure you would highlight exactly as what I'm typing, otherwise it will not work great.

76
00:06:18,860 --> 00:06:29,630
And for this we are going to pass in a callback function as that and here we can console.log says that

77
00:06:30,440 --> 00:06:42,320
charging has changed, let's say from 20% to 21%.

78
00:06:42,650 --> 00:06:44,120
That is a battery change.

79
00:06:44,180 --> 00:06:44,720
Great.

80
00:06:44,720 --> 00:06:48,050
So we need to handle this one also.

81
00:06:48,110 --> 00:06:52,220
And the next one is going to be the battery charging time.

82
00:06:52,220 --> 00:07:01,370
So we can copy this one here and then down here we can paste H and change this one to charging time

83
00:07:01,370 --> 00:07:09,770
change as charging time change.

84
00:07:10,400 --> 00:07:10,850
Great.

85
00:07:10,850 --> 00:07:15,080
And here we can see that charging time has changed.

86
00:07:15,320 --> 00:07:18,650
Charging time has changed.

87
00:07:20,570 --> 00:07:21,290
Great.

88
00:07:21,350 --> 00:07:25,670
And lastly, let's also handle the discharging time.

89
00:07:25,670 --> 00:07:30,470
So our copy, this one here and down here, I'll paste this one.

90
00:07:30,470 --> 00:07:34,250
And this is going to be as this charging time change.

91
00:07:34,250 --> 00:07:40,790
So here I'll bring in this charging and start this charging time change.

92
00:07:40,820 --> 00:07:43,430
And you're going to be as discharging.

93
00:07:46,860 --> 00:07:47,600
Great.

94
00:07:47,610 --> 00:07:55,440
So for this implementation we can handle the logic inside each event listener but it is advisable to

95
00:07:55,440 --> 00:07:58,320
create a function so that we can re-use it.

96
00:07:58,440 --> 00:08:04,940
So the first one is let's try to create a function to get the update charging info.

97
00:08:04,950 --> 00:08:10,890
So down here we are going to create a function to update the charging info.

98
00:08:10,890 --> 00:08:12,240
So here we go.

99
00:08:12,300 --> 00:08:16,290
Our mix of normal function and going to be as update.

100
00:08:19,620 --> 00:08:23,880
And going to be a normal function without any argument.

101
00:08:24,060 --> 00:08:30,350
So for this one, we are going to console log battery charging, whether it is true or not.

102
00:08:30,360 --> 00:08:41,789
So const is charging and it's equal to we take in the battery dot charging.

103
00:08:46,790 --> 00:08:49,450
If it is, yes, then we are going to consult.

104
00:08:49,760 --> 00:08:50,260
Yes.

105
00:08:50,270 --> 00:08:52,190
Otherwise we will say no.

106
00:08:52,760 --> 00:08:56,660
So I can go ahead and then console.log.

107
00:08:56,660 --> 00:08:58,250
The is charging.

108
00:09:00,710 --> 00:09:01,460
Great.

109
00:09:01,700 --> 00:09:07,880
So next step is that I need to call this function inside the battery charging change.

110
00:09:07,880 --> 00:09:11,720
So I replace this one and I'll call the function here.

111
00:09:12,080 --> 00:09:13,190
So let's save it.

112
00:09:13,190 --> 00:09:14,390
And now let's see.

113
00:09:14,390 --> 00:09:22,100
We can see that we see nothing inside the console because this event listener has not been called.

114
00:09:22,100 --> 00:09:24,880
That is the charging change.

115
00:09:24,890 --> 00:09:30,830
So we are going to create a function to update all the battery info.

116
00:09:30,920 --> 00:09:40,160
So I'm going to create the function app here by calling it as function and then going to be update or

117
00:09:40,160 --> 00:09:49,550
battery info or details and going to be normal function here.

118
00:09:49,580 --> 00:09:58,790
So for this, let's call the update charging info and I need to call the update or the battery info

119
00:09:58,790 --> 00:10:02,350
down here as update or battery details.

120
00:10:02,360 --> 00:10:08,240
So this one, are we able to see the current state of my battery charging state?

121
00:10:08,270 --> 00:10:09,770
Now have a look.

122
00:10:09,770 --> 00:10:11,660
And indeed I see.

123
00:10:11,660 --> 00:10:15,920
Yes, it means that I am charging my battery.

124
00:10:15,950 --> 00:10:18,040
How awesome it is.

125
00:10:18,050 --> 00:10:20,360
So now we are done with that one.

126
00:10:20,390 --> 00:10:28,540
So the next step is that we need to update this one inside our DOM and we have selected the DOM here.

127
00:10:28,550 --> 00:10:36,620
So let's locate inside the mode where we have the battery charging, which is this one of a class called

128
00:10:36,650 --> 00:10:38,090
battery level.

129
00:10:38,180 --> 00:10:41,300
So now back to the update charging info.

130
00:10:41,330 --> 00:10:44,650
We are going to inject this data.

131
00:10:44,660 --> 00:10:46,250
So here we go.

132
00:10:46,280 --> 00:10:54,300
We take the battery charging dot in h mirror and we are going to inject what is called is charging.

133
00:10:54,320 --> 00:11:01,540
Now let's look at the browser and indeed is charging is yes because I'm always charging it.

134
00:11:01,550 --> 00:11:09,500
So next event listener that I forgot to write is what we call the battery level change, meaning that

135
00:11:09,500 --> 00:11:16,150
if the charging level changes from, let's say 10% to 11%, we need to handle that and we need to consider

136
00:11:16,200 --> 00:11:19,250
the level of the battery charging state.

137
00:11:19,250 --> 00:11:26,150
So we are going to be as battery level change.

138
00:11:26,780 --> 00:11:28,670
So here we go.

139
00:11:29,180 --> 00:11:33,200
We bring in the battery and add event listener.

140
00:11:33,200 --> 00:11:37,100
And what we want is called the level change.

141
00:11:37,160 --> 00:11:44,210
They are all common cases they pass in our callback function and here we go.

142
00:11:44,450 --> 00:11:50,660
So definitely we need to create this function somewhere else so that we can call it inside this global

143
00:11:50,660 --> 00:11:53,200
function here to add it all.

144
00:11:53,210 --> 00:11:56,030
So let's see how we are going to create it.

145
00:11:56,030 --> 00:12:09,230
So down here I'm going to make use of normal function, call us update level change and here we go.

146
00:12:09,230 --> 00:12:14,990
And for this we can go ahead and then console.log the battery.

147
00:12:19,360 --> 00:12:20,740
Dirt level.

148
00:12:21,520 --> 00:12:30,630
So let's call this one inside the level change as updates level change and to see the result inside

149
00:12:30,640 --> 00:12:31,810
a console.

150
00:12:31,840 --> 00:12:39,010
As soon as we run the application, let's call it inside here as update charging info.

151
00:12:39,310 --> 00:12:43,900
Well, for some reasons I'm not seeing the console log, so what is the problem?

152
00:12:44,500 --> 00:12:46,990
It means that we are not calling this function.

153
00:12:46,990 --> 00:12:48,940
So let's check it out and see.

154
00:12:49,090 --> 00:12:53,680
Oh well I need to call the actual function as update level.

155
00:12:53,680 --> 00:12:56,650
So now let's save it and let's check it out.

156
00:12:56,650 --> 00:12:59,380
And you can see that I have one.

157
00:12:59,380 --> 00:13:02,290
One simply means that 100%.

158
00:13:02,290 --> 00:13:07,240
So we need to convert this one by multiplying by 100.

159
00:13:07,240 --> 00:13:16,510
So let's create a variable cost and call this one as level and is equal to battery dot level.

160
00:13:16,510 --> 00:13:20,890
And then we are going to multiply by 100.

161
00:13:20,890 --> 00:13:26,650
And next is we are going to concurred with the percentage sign and that is it.

162
00:13:26,680 --> 00:13:36,910
If you console log the level, let's see the results and we have 100% or 1,000% is supposed to be 100.

163
00:13:37,600 --> 00:13:38,380
Yes.

164
00:13:38,380 --> 00:13:41,620
So let's see a we have 100%.

165
00:13:41,890 --> 00:13:47,050
So what is left is to be able to inject this one inside the DOM.

166
00:13:47,050 --> 00:13:47,740
Did you get it?

167
00:13:47,770 --> 00:13:48,370
Yes.

168
00:13:48,370 --> 00:13:50,140
So here we go.

169
00:13:50,170 --> 00:13:55,480
We are going to take the battery level, which is this one.

170
00:13:55,480 --> 00:13:58,300
And now let's check the semantics.

171
00:13:58,300 --> 00:14:01,480
And this is a battery level, which is this one.

172
00:14:01,480 --> 00:14:02,560
So here we go.

173
00:14:02,560 --> 00:14:04,240
Let's remove the console log.

174
00:14:04,240 --> 00:14:13,750
I'm going to be battery level dirt in a zero and then you're going to use the level.

175
00:14:16,740 --> 00:14:17,570
Save it.

176
00:14:17,580 --> 00:14:24,830
And now let's say a battery level is 100% how awesome it is.

177
00:14:24,840 --> 00:14:27,420
So now we are done with this too.

178
00:14:27,450 --> 00:14:29,580
What is left is this one.

179
00:14:29,590 --> 00:14:31,890
So let's have a look.