1
00:00:00,500 --> 00:00:06,020
So now that we've got something that looks like a calculator and we also have clickable buttons, we're

2
00:00:06,020 --> 00:00:08,000
ready to move on to the next step.

3
00:00:08,180 --> 00:00:12,110
And I know we got quite a bit of practice at creating elements dynamically.

4
00:00:12,320 --> 00:00:15,260
And a lot of this was the same format.

5
00:00:15,550 --> 00:00:18,680
And now you must be really familiar with creating elements.

6
00:00:18,950 --> 00:00:25,310
So now let's create some interaction and functionality into those elements, surpassing that event object.

7
00:00:25,460 --> 00:00:31,460
But we also want to know which element when it triggers that want to know the inner HTML of that element

8
00:00:31,730 --> 00:00:36,950
so we can grab that information by using the this, the JavaScript, this.

9
00:00:37,250 --> 00:00:42,380
So I see when we click the button and I'll make this bigger so we can take a closer look.

10
00:00:42,590 --> 00:00:47,630
Whenever we click any of these buttons, we get the element that invoked the click.

11
00:00:48,540 --> 00:00:55,860
So see, inside of that element we've got within the inner turmoil, we have the key that was being

12
00:00:55,860 --> 00:00:57,080
pressed on the calculator.

13
00:00:57,390 --> 00:01:04,920
So if we take this and if we do inner text and I can get rid of the event object, we don't need to

14
00:01:04,920 --> 00:01:05,360
see that.

15
00:01:06,060 --> 00:01:07,230
So we refresh.

16
00:01:07,230 --> 00:01:12,300
And now whenever I click the buttons, I can see what character is associated with the button.

17
00:01:12,480 --> 00:01:14,240
And these are string values as well.

18
00:01:14,610 --> 00:01:20,670
So we can do some comparison and we can determine what the user which button the user is intending on

19
00:01:20,670 --> 00:01:23,970
clicking, and that's going to give us the functionality that we want to do.

20
00:01:24,030 --> 00:01:27,120
So let's set up a variable to contain that value.

21
00:01:27,120 --> 00:01:28,890
We can just call it my value.

22
00:01:29,010 --> 00:01:35,060
And this is the value of the button that was clicked, the same thing that's going into the console.

23
00:01:35,640 --> 00:01:42,810
And now what we can do is we can output that value so we can have another container where we can update

24
00:01:42,810 --> 00:01:45,300
the value that's contained within the inner HTML.

25
00:01:45,450 --> 00:01:48,990
And another variable that we're going to need is the actual calculation.

26
00:01:49,230 --> 00:01:54,870
So this is the value that's actually going to be sitting within the my output object.

27
00:01:55,290 --> 00:01:55,980
And we saw that.

28
00:01:56,010 --> 00:01:57,590
That's the one that we created earlier.

29
00:01:57,600 --> 00:02:04,770
So we just grab that inner text from there and now we can take my cowl and we can equal my cow and then

30
00:02:04,770 --> 00:02:07,450
add in whatever the my value is.

31
00:02:07,470 --> 00:02:11,100
And then lastly, let's take the my output.

32
00:02:11,220 --> 00:02:17,490
That's that same object and take the inner text and we're going to update it to be equal to Michael.

33
00:02:17,500 --> 00:02:18,960
So see what happens now.

34
00:02:18,960 --> 00:02:22,830
We've got one, two, two, three, five, six.

35
00:02:22,830 --> 00:02:26,370
We've got the plus three, three, three all the way down.

36
00:02:26,640 --> 00:02:30,150
And the one problem here is that we notice that we've got a zero in the beginning.

37
00:02:30,150 --> 00:02:32,640
So we need to remove that zero now.

38
00:02:32,640 --> 00:02:33,690
There is a way to do that.

39
00:02:33,690 --> 00:02:43,860
And we can do is we can check to see if the value of my cowl is equal to zero and if it's equal to zero,

40
00:02:44,070 --> 00:02:49,770
then let's remove out that preceding zero in front of it and my cowl and we're going to equal that to

41
00:02:49,770 --> 00:02:50,550
just blank.

42
00:02:50,550 --> 00:02:52,320
So it's just to two quotes.

43
00:02:52,440 --> 00:02:58,260
So now whenever we type in the three, six plus, plus, plus, we can see that now we've got more of

44
00:02:58,260 --> 00:03:01,650
a number because typically what's in the calculator don't see that zero going in front.

45
00:03:02,250 --> 00:03:06,030
So go ahead and add this into your project and you're ready for the next part.

46
00:03:06,030 --> 00:03:10,380
We're going to do the calculation and you're going to be surprised at how easy that is to do when we

47
00:03:10,380 --> 00:03:12,420
do evaluation with JavaScript.