1
00:00:00,210 --> 00:00:01,230
Welcome back.

2
00:00:01,240 --> 00:00:06,060
In this lesson, we're going to do a quick code review overview of all of the code that we've set up

3
00:00:06,060 --> 00:00:07,290
in the earlier lessons.

4
00:00:07,590 --> 00:00:13,860
So, first of all, we started out and we built out some styling and that was in anticipation when we're

5
00:00:13,860 --> 00:00:17,730
building out our calculator that we can add that styling and dynamically.

6
00:00:18,090 --> 00:00:24,150
And next, we built some HTML, very minimal because of course, we are trying to focus on JavaScript

7
00:00:24,150 --> 00:00:25,350
as much as possible.

8
00:00:25,740 --> 00:00:28,980
So we selected using our JavaScript objects.

9
00:00:29,220 --> 00:00:32,820
We selected that element that's got the class of Michalka.

10
00:00:33,360 --> 00:00:35,010
So this is the main calculator.

11
00:00:35,020 --> 00:00:37,760
This is where everything happens, where all the magic is happening.

12
00:00:38,040 --> 00:00:43,790
We next we laid out the keys and the order of the keys that we want to represent on our calculator.

13
00:00:44,070 --> 00:00:45,330
So we had all the digits.

14
00:00:45,540 --> 00:00:46,980
We had all the operators.

15
00:00:47,130 --> 00:00:53,490
And you can also change the format here and it will just update here dynamically, automatically within

16
00:00:53,490 --> 00:00:54,930
the calculator visible part.

17
00:00:55,200 --> 00:00:57,950
And you do always want to make sure that you do have all the keys.

18
00:00:58,080 --> 00:01:01,710
Some people like the C at the top or the operators at the top.

19
00:01:01,860 --> 00:01:03,030
So it doesn't actually matter.

20
00:01:03,150 --> 00:01:04,320
The order doesn't matter.

21
00:01:04,330 --> 00:01:07,270
You can place them, however, and wherever you want.

22
00:01:07,530 --> 00:01:08,790
Next, we have the operators.

23
00:01:08,790 --> 00:01:15,120
So these are the operators and they're the same values are the same characters that we use in JavaScript.

24
00:01:15,690 --> 00:01:18,240
And that gave us the ability to evaluate them.

25
00:01:18,390 --> 00:01:21,720
And having a string we could evaluate using JavaScript.

26
00:01:21,930 --> 00:01:26,640
We set up a couple variables and we've got one here that we didn't make use of.

27
00:01:26,650 --> 00:01:31,770
So we've got the my output and next we had all everything happening within.

28
00:01:31,770 --> 00:01:38,340
Whenever the DOM content loaded, we ran our function and this built out our visual calculator.

29
00:01:38,490 --> 00:01:45,090
So first we created the screen area and we added a class to it and then we loop through all of the Keys

30
00:01:45,090 --> 00:01:45,830
arrays.

31
00:01:46,080 --> 00:01:50,360
So this is the one here and we built out the visual keys for the calculator.

32
00:01:50,670 --> 00:01:57,120
And then lastly, we added in the event listener that made them interactive and that event listener

33
00:01:57,750 --> 00:02:02,850
invokes the function of button hit and it's the same function for all the buttons.

34
00:02:02,860 --> 00:02:04,230
So does it matter which one you click?

35
00:02:04,470 --> 00:02:08,740
They're all going to get invoked, button hit and what happens in button hit.

36
00:02:09,030 --> 00:02:13,890
So first we take the entire text of the element that triggered the event.

37
00:02:14,190 --> 00:02:21,870
So that gives us the ability to grab whatever character the user is clicking and intending on adding

38
00:02:21,870 --> 00:02:23,100
into our calculator.

39
00:02:23,130 --> 00:02:28,890
So in this case, five, two, three, six, whatever, and we're putting that into temporary value

40
00:02:28,890 --> 00:02:29,820
called my value.

41
00:02:30,060 --> 00:02:35,760
And then we're also selecting the output of the screen output and we're putting into a variable called

42
00:02:35,910 --> 00:02:36,750
my calc.

43
00:02:37,650 --> 00:02:41,820
One of the things we want to watch out for, if by default we're starting out with a zero.

44
00:02:42,060 --> 00:02:49,320
So if Michael is zero, then what we want to do is rid it of that zero value and set it to nothing,

45
00:02:49,320 --> 00:02:55,500
because we know that the user has pressed another key and we don't want that zero just sitting there

46
00:02:55,590 --> 00:02:58,290
and in front of the number because this is a string.

47
00:02:58,290 --> 00:02:59,280
Remember, it's a string.

48
00:02:59,280 --> 00:03:00,120
It's not a number.

49
00:03:00,300 --> 00:03:03,660
So it will automatically add in that zero there.

50
00:03:03,660 --> 00:03:08,290
And we don't want that lingering for visual appeal for our calculator.

51
00:03:08,970 --> 00:03:13,140
Next, we check to see if the user had pressed the equals sign.

52
00:03:13,470 --> 00:03:18,790
And if they have pressed the equals sign, then all we need to do is evaluate the formula.

53
00:03:19,050 --> 00:03:24,630
So in this case, when we press the cosine, all we do is have a number of value and we don't have any

54
00:03:24,750 --> 00:03:25,830
calculations there.

55
00:03:26,010 --> 00:03:27,690
But now we've got plus three.

56
00:03:27,690 --> 00:03:31,560
So we press the cosine and we're adding three to our value.

57
00:03:31,800 --> 00:03:33,510
So that's what evaluator does.

58
00:03:33,750 --> 00:03:35,190
And you can find out more about it.

59
00:03:35,190 --> 00:03:36,960
On the Musila Developer Network.

60
00:03:36,960 --> 00:03:42,300
I've provided a link here to link it to read a little bit more about what that method does.

61
00:03:42,510 --> 00:03:47,880
And it really does power this calculator because it gives us the ability to take that string value and

62
00:03:47,880 --> 00:03:52,330
evaluate the formula in order to return back whatever the value is supposed to be.

63
00:03:52,680 --> 00:03:55,770
So that was as easy as that to calculate that out.

64
00:03:56,100 --> 00:04:01,700
And all we did is set the mythical value to the valuated version of this.

65
00:04:01,710 --> 00:04:04,300
And then lastly, we're just simply outputting it.

66
00:04:05,010 --> 00:04:10,470
The other thing that we're watching out for so all the digits are fine, just entered them in no problem.

67
00:04:10,470 --> 00:04:19,170
Added into the string we're looking for to see if the last character is one of the operators and if

68
00:04:19,170 --> 00:04:26,190
it is that we know we got to be careful because if it's one of the operators, then we need to take

69
00:04:26,190 --> 00:04:29,010
special precautions that we don't have two operators in a role.

70
00:04:29,370 --> 00:04:32,880
So that's all this one is doing is worth checking to see what the last character is.

71
00:04:33,120 --> 00:04:35,250
And we don't need to output that last character.

72
00:04:35,260 --> 00:04:38,820
So get rid of that console message and we see that.

73
00:04:39,150 --> 00:04:43,920
We're checking to see if the last character is one of the operators.

74
00:04:44,100 --> 00:04:50,220
And if it is, we're simply removing out that last character and then that gives us the space to add

75
00:04:50,220 --> 00:04:53,760
in the new operator and continue with the evaluation.

76
00:04:53,790 --> 00:04:58,740
So basically what it's doing is, well, if there's an operator at the end, it's just overwriting that.

77
00:04:58,970 --> 00:05:00,550
Greater and changing the operators.

78
00:05:01,450 --> 00:05:07,280
And if there is no operator at the end, then we're good to evaluate out our calculation.

79
00:05:07,480 --> 00:05:10,210
So that means that we've got a digit at the end.

80
00:05:10,420 --> 00:05:15,790
And if we press the operator and we get another digit, another digit and another operator, well,

81
00:05:15,790 --> 00:05:16,950
we could do the evaluation.

82
00:05:16,960 --> 00:05:22,410
And this is again, done that magic way with JavaScript and the eval method.

83
00:05:22,870 --> 00:05:29,570
And then lastly, all we're doing here is we're updating our current string output with whatever the

84
00:05:29,620 --> 00:05:30,610
my value was.

85
00:05:30,800 --> 00:05:34,180
So in this case, if it's an operator, we're adding the operator to the end.

86
00:05:34,720 --> 00:05:39,700
If this case is a digit, routing the digits to the end and they're going to continue to get added in.

87
00:05:39,880 --> 00:05:42,910
And then all we do is output into the entire text.

88
00:05:43,070 --> 00:05:48,400
And the next time one of the characters is press, one accuses prest, we run through everything once

89
00:05:48,400 --> 00:05:48,690
again.

90
00:05:48,970 --> 00:05:51,430
And lastly, we do have a clear function.

91
00:05:51,640 --> 00:05:54,820
So the clear function does is reset it back to zero.

92
00:05:55,000 --> 00:05:57,250
And so it doesn't actually matter.

93
00:05:57,400 --> 00:06:00,250
All of this calculation and what's being done.

94
00:06:00,550 --> 00:06:04,190
All all we know that the C resets it back to zero.

95
00:06:04,210 --> 00:06:09,550
So if my value is equal to C, then the calculator just goes and shows a zero.

96
00:06:09,700 --> 00:06:12,900
And then lastly, we're outputting the entire text as a zero.

97
00:06:13,600 --> 00:06:17,800
So hope you've enjoyed this section about building out a calculator.

98
00:06:18,070 --> 00:06:21,100
And of course, the source code has been included.

99
00:06:21,320 --> 00:06:27,820
If you have any questions or need clarification on any of the content presented within the previous

100
00:06:27,820 --> 00:06:30,520
lessons, please feel free to connect with me.

101
00:06:30,670 --> 00:06:36,910
I'm always happy to help clarify any of the content as well as answer any questions you may have.

102
00:06:37,390 --> 00:06:41,410
Thanks again for taking the section and I hope you've enjoyed building out the calculator.