1
00:00:00,120 --> 00:00:05,690
Our calculator so far does not really look much like a calculator, so let's fix that.

2
00:00:05,880 --> 00:00:09,300
And in this lesson, we're going to update and build the keys.

3
00:00:09,540 --> 00:00:12,480
So the early lesson we set up, how the keys need to look.

4
00:00:12,630 --> 00:00:16,080
And this is an array with a bunch of arrays inside.

5
00:00:16,080 --> 00:00:19,680
So multidimensional array where we've got an array with arrays inside.

6
00:00:19,680 --> 00:00:26,210
And each one of these arrays represents another roll of keys that we want to add into our project.

7
00:00:26,460 --> 00:00:27,580
So let's build those.

8
00:00:27,930 --> 00:00:29,940
So starting and we're going to create a loop.

9
00:00:30,540 --> 00:00:36,180
And because this is an array, we're going to loop through all of the elements within the array, all

10
00:00:36,180 --> 00:00:37,080
the items in the array.

11
00:00:37,620 --> 00:00:42,900
So this is within the Mickeys array using the array length value.

12
00:00:42,930 --> 00:00:45,960
So this is by default within any one of the arrays.

13
00:00:46,230 --> 00:00:48,120
Those have the length with that as well.

14
00:00:48,480 --> 00:00:54,540
So just utilizing that within the loop and then as we loop through, we want to create some dips.

15
00:00:54,540 --> 00:00:55,890
So let's create a div.

16
00:00:56,280 --> 00:00:57,710
Just do let div.

17
00:00:58,080 --> 00:01:04,160
And just as we created the screen, we're going to create some elements on the fly using JavaScript.

18
00:01:04,470 --> 00:01:10,700
So using the create element method in JavaScript allows us to create elements dynamically on the front.

19
00:01:11,310 --> 00:01:12,300
So we're creating a div.

20
00:01:12,300 --> 00:01:15,180
So all we need to do is specify the type of element that we want to create.

21
00:01:15,180 --> 00:01:18,780
This div is going to be our role, so we need to add a class to it.

22
00:01:18,810 --> 00:01:24,640
So doing class list are going to add a class and this is one of the classes I still need to create.

23
00:01:24,930 --> 00:01:25,860
So this is a role.

24
00:01:26,190 --> 00:01:31,910
So let's quickly add that one and this one is going to be having a width of one hundred percent.

25
00:01:31,920 --> 00:01:37,140
So it's going to go all the way across and display block, which by default is because it's a div.

26
00:01:37,410 --> 00:01:39,070
But we're just going to add that in anyway.

27
00:01:39,570 --> 00:01:45,810
So now we've got our main container roll and we need to still build out all of the buttons and we can

28
00:01:45,810 --> 00:01:47,640
do that by looping through.

29
00:01:47,680 --> 00:01:52,890
So creating another loop here where we're going to loop through all of the buttons we can use of different

30
00:01:52,890 --> 00:01:53,440
variables.

31
00:01:53,470 --> 00:01:58,320
So in this case, let's use X, and this is going to be indicating all of the different keys.

32
00:01:58,330 --> 00:02:05,580
So as we loop through this array, we also want to loop through the array with in the array, and that's

33
00:02:05,580 --> 00:02:08,130
where we get my keys arrays race.

34
00:02:08,130 --> 00:02:09,150
That's the main array.

35
00:02:09,150 --> 00:02:16,740
And we've got that mean array within the Y object and we want to loop through and get the length of

36
00:02:16,740 --> 00:02:18,500
each one of these ones.

37
00:02:19,020 --> 00:02:21,030
So they're going to have their own lengths to it.

38
00:02:21,040 --> 00:02:22,870
So that's where we can get a length from it.

39
00:02:22,890 --> 00:02:28,950
So a console log out the value of my keys and X because remember we're looping through so we've got

40
00:02:28,950 --> 00:02:31,650
a loop within a room and we also have arrays within arrays.

41
00:02:31,890 --> 00:02:36,000
So we're looping through the main array using the Mickeys array.

42
00:02:36,210 --> 00:02:42,300
And then as we're iterating through, this is the next roll value and this is where we're getting that

43
00:02:42,300 --> 00:02:42,780
role.

44
00:02:42,930 --> 00:02:46,050
So it's referring to this array inside of the array.

45
00:02:46,080 --> 00:02:50,010
Well, the first one is and this we're being able to turn back with X.

46
00:02:50,310 --> 00:02:54,480
So you see that basically what happens here is that we see each and every one of the keys.

47
00:02:54,690 --> 00:02:57,480
So that means that we need to create the buttons.

48
00:02:57,660 --> 00:02:59,400
So let's create those buttons.

49
00:02:59,440 --> 00:03:00,750
We can call it B10.

50
00:03:00,750 --> 00:03:04,350
We could call it another value as well for the variable.

51
00:03:04,620 --> 00:03:09,640
And we're doing that again, the exact same thing where we're creating an element on the fly.

52
00:03:09,990 --> 00:03:14,130
And this one as well is going to be a div and then taking that button.

53
00:03:14,280 --> 00:03:17,930
And we do have those values of the inner HTML that we need to set.

54
00:03:18,300 --> 00:03:20,540
So it could be Interreg Temel or inner text.

55
00:03:20,550 --> 00:03:26,100
Usually I do prefer to use in our HTML, but you could just as easily use in text as well in this case

56
00:03:26,100 --> 00:03:29,730
because we're not actually applying any HTML inside of the element.

57
00:03:30,360 --> 00:03:33,420
We also have a class that we need to add.

58
00:03:33,690 --> 00:03:39,240
And this again, it's the same format where we're adding a class and the class that we're adding is

59
00:03:39,240 --> 00:03:45,370
B10, and this corresponds with the class that we set earlier that has the button class.

60
00:03:45,420 --> 00:03:47,490
So these are the buttons that we're adding.

61
00:03:47,670 --> 00:03:50,820
And then we also want to add in something different in this one.

62
00:03:51,060 --> 00:03:53,130
We want to add an event listener.

63
00:03:53,580 --> 00:03:55,770
So want those buttons to be clickable.

64
00:03:55,950 --> 00:04:01,140
And whenever they get clicked, we're going to invoke the function called button hit and we'll take

65
00:04:01,140 --> 00:04:02,990
care of that upcoming as well.

66
00:04:03,000 --> 00:04:09,210
It's we're looping through take that mean parent div penned a child to it and the child that we're spending

67
00:04:09,210 --> 00:04:11,040
is the button that we just created.

68
00:04:11,130 --> 00:04:17,100
So having every time we loop through and all console logout, whatever div looks like so we can get

69
00:04:17,100 --> 00:04:19,680
a better sense of what it is that we're outputting here.

70
00:04:19,920 --> 00:04:21,870
And I'll comment that one a placeholder.

71
00:04:21,870 --> 00:04:26,780
So the button hit function and this is just a blank function so that we're not throwing any errors.

72
00:04:26,850 --> 00:04:29,640
Now you can see that we're creating each one of these rows.

73
00:04:29,880 --> 00:04:32,750
The rows have all of the buttons that we needed to add in.

74
00:04:32,940 --> 00:04:38,130
So there's one last thing that we need to do and that's appending the buttons to the calculator.

75
00:04:38,370 --> 00:04:44,070
So just as we appended the output screen, we're also going to attend the div.

76
00:04:44,080 --> 00:04:48,900
And when we refresh, we see we've got all of the buttons placed and I forgot one of the properties

77
00:04:48,900 --> 00:04:49,860
within the button.

78
00:04:50,160 --> 00:04:51,690
So let's update that.

79
00:04:51,690 --> 00:04:53,960
And this is display inline block.

80
00:04:53,970 --> 00:04:55,170
So try that one more time.

81
00:04:55,380 --> 00:04:55,950
So there we go.

82
00:04:55,960 --> 00:04:59,880
So we have something that looks a whole lot more like a calculator and we're ready.

83
00:04:59,950 --> 00:05:04,810
To start introducing some of our JavaScript functionality, and these are clickable as well, so whenever

84
00:05:04,810 --> 00:05:09,490
we click over these, you're going to see that we are invoking this function.

85
00:05:09,520 --> 00:05:15,040
So for now, so you can see that whenever I click these, it's actually passing in and it's doing something

86
00:05:15,040 --> 00:05:15,730
within the function.

87
00:05:15,880 --> 00:05:19,390
So go ahead and build out the visual part of this project.

88
00:05:19,630 --> 00:05:24,190
So build out the visual calculator and you can be ready to move on to the next lesson.

89
00:05:24,220 --> 00:05:26,260
We're going to introduce the functionality of the button.

90
00:05:26,920 --> 00:05:28,870
So that's still to come in the upcoming lesson.