1
00:00:01,230 --> 00:00:10,770
Hello and welcome to this lecture in this lecture we will be creating the functionality for our calculator

2
00:00:11,010 --> 00:00:12,830
using JavaScript.

3
00:00:12,870 --> 00:00:21,060
The moment the calculator looks beautiful but none of the key pads work so we'll do that using JavaScript

4
00:00:22,830 --> 00:00:32,040
or I just want to go through some of the things we'll be using for this javascript session to implement

5
00:00:32,070 --> 00:00:34,730
the functionality for the calculator.

6
00:00:35,100 --> 00:00:45,060
So we'll be using the display property to the display property is used to set or return the elements

7
00:00:45,300 --> 00:00:46,230
display type.

8
00:00:46,230 --> 00:00:49,670
So we use the display property to display something.

9
00:00:50,450 --> 00:01:01,680
Next we'll be using the on click event the on click event usually is used to execute a javascript function.

10
00:01:01,680 --> 00:01:10,470
When a button is clicked so a lot of the key pads fully calculate or are going to function are buttons.

11
00:01:10,530 --> 00:01:20,100
So when they are clicked these on click event will be activated and then something an event will happen.

12
00:01:20,100 --> 00:01:26,160
So the unclip is used to respond to a click event.

13
00:01:26,160 --> 00:01:38,100
Next will be using also the evaluation function the evil function is used to evaluate or execute an

14
00:01:38,160 --> 00:01:39,060
argument.

15
00:01:39,060 --> 00:01:42,780
So we use that to evaluate values as well.

16
00:01:42,780 --> 00:01:51,420
So for example one place to evaluate that it gives you three will also be making use of the assignment

17
00:01:51,750 --> 00:01:56,780
operator which is the plus or equals two.

18
00:01:56,820 --> 00:02:06,180
So the assignment operator basically you will use that to add a value to a variable.

19
00:02:06,180 --> 00:02:13,800
Another way to express the assignment operator which is x which is a plus equals two.

20
00:02:13,800 --> 00:02:24,420
You can also express this assists so x plus equals to Y is the same thing as x equals two X plus Y.

21
00:02:24,420 --> 00:02:34,290
For example if you have a variable called X equals to 10 then x plus equals 2 5 will give you the result

22
00:02:34,440 --> 00:02:35,690
of that variable.

23
00:02:35,700 --> 00:02:39,360
So X two plus equals two.

24
00:02:39,390 --> 00:02:50,220
Operator is the same thing as x plus equals to y or x equals two X plus Y.

25
00:02:50,220 --> 00:02:53,340
I hope it makes sense if he doesn't let me know.

26
00:02:53,430 --> 00:02:55,710
I will try and explain a bit more.

27
00:02:57,600 --> 00:03:00,220
So this is our calculator at the moment.

28
00:03:00,270 --> 00:03:07,150
If I click on any of the keys or the buttons you can see nothing is displayed in the screen here.

29
00:03:07,580 --> 00:03:07,940
OK.

30
00:03:07,950 --> 00:03:14,250
This is because we have not implemented any javascript so when you start doing that now.

31
00:03:14,250 --> 00:03:23,600
So we are going to implement the functionality inside our hasty email document.

32
00:03:23,640 --> 00:03:35,430
So what I'm going to do to each of the buttons I am going to attach an on click event so the Click event

33
00:03:36,030 --> 00:03:42,190
because it's a button when it is click will display the value on that button.

34
00:03:42,240 --> 00:03:52,920
I'm going to attach an earthquake event in combination to using the display property on line 18 of this

35
00:03:52,920 --> 00:03:54,370
hate email document.

36
00:03:54,570 --> 00:04:01,260
I have attached this on click event here and this.

37
00:04:01,260 --> 00:04:09,780
The value here is the name of the form which is a this name here on the form online 16.

38
00:04:10,410 --> 00:04:20,400
So when the button is click using the display property it would display the value which is zero here

39
00:04:20,930 --> 00:04:25,230
to display this value zero on the clock.

40
00:04:25,230 --> 00:04:28,350
This clock here is the form that's what it means.

41
00:04:28,500 --> 00:04:37,140
It means when the button is click is it display display property to display the value which is this

42
00:04:37,140 --> 00:04:41,640
one on the form and the value is.

43
00:04:41,640 --> 00:04:51,330
You notice next to the value of what the operator plus or equals to zero sum will save this.

44
00:04:52,050 --> 00:04:55,580
And then we're gonna test it out if that works.

45
00:04:55,620 --> 00:05:02,260
I'm just going to copy and do the same on the other buttons so I've saved it if I click on the zero

46
00:05:02,260 --> 00:05:06,840
now he should display something on the screen.

47
00:05:07,180 --> 00:05:09,670
Let me refresh.

48
00:05:09,670 --> 00:05:13,180
You can see the zero is now being implemented.

49
00:05:13,330 --> 00:05:18,490
The other buttons on work yet because I have not done that so I'm going to copy and change the values

50
00:05:18,610 --> 00:05:20,100
for the other keys.

51
00:05:21,550 --> 00:05:31,990
So I have now implemented the java script inside the hasty email document so I have attached the on

52
00:05:32,110 --> 00:05:41,440
click event to all the input tags so the onc and next to the click of giving the on click this value

53
00:05:41,470 --> 00:05:52,480
the same properties which is of use the display property to display the value on the form using the

54
00:05:52,840 --> 00:05:55,660
plus or equals to operator.

55
00:05:56,130 --> 00:06:03,110
And if you notice I've set the value of the plus two equals four Prieto to the value of the key.

56
00:06:03,130 --> 00:06:06,780
So this is key pad 0 1 2.

57
00:06:06,850 --> 00:06:14,980
And then we'll go to keep our plus key pad three four five key pad equals 2.

58
00:06:15,040 --> 00:06:17,550
And then this is the key pad minus.

59
00:06:18,390 --> 00:06:19,300
And the same thing.

60
00:06:19,300 --> 00:06:24,040
So basically I've done the same for all of the process is the same for all of it.

61
00:06:24,550 --> 00:06:31,710
So when the button is click this on click event will trigger this action.

62
00:06:31,720 --> 00:06:40,050
It will use the display property to display the value that has been pressed on to the.

63
00:06:40,090 --> 00:06:47,920
Form display screen on line 32.

64
00:06:48,430 --> 00:06:59,110
I have use the on click event and give him a value of the clock which the clock is in them on the form

65
00:06:59,620 --> 00:07:02,570
dot the display property dot.

66
00:07:02,620 --> 00:07:11,710
The value equals to the evaluation function because this is normally when you add two values or take

67
00:07:11,710 --> 00:07:17,920
away two values and you use it equals to sign you means you are you hiding something.

68
00:07:17,920 --> 00:07:21,780
Taking away multiplying or dividing these.

69
00:07:21,790 --> 00:07:33,660
This evaluation function is what is used to evaluate or execute what's inside that argument.

70
00:07:33,670 --> 00:07:43,070
So inside the argument we have inside the argument we have the form which is a cock dot.

71
00:07:43,270 --> 00:07:47,470
The display property dot the value.

72
00:07:47,470 --> 00:07:51,940
So these are the arguments that this equals to sign.

73
00:07:51,950 --> 00:07:57,610
We evaluate compute and then display the result on the screen.

74
00:07:58,390 --> 00:08:02,010
So that's basically the form done.

75
00:08:02,020 --> 00:08:08,630
If I saved that all the buttons on the calculator should now work.

76
00:08:08,650 --> 00:08:16,390
So let's go refresh and test.

77
00:08:16,390 --> 00:08:26,700
So try simple addition so we can try all the key so I do three plus to give you six a clear that I do

78
00:08:26,710 --> 00:08:45,220
for take away two that's to clear that I do six times seven gives me 42 a clear that I go for t to divide

79
00:08:46,000 --> 00:08:58,220
by four gives you that Oh okay let's try something else let's try Twelve divided by two.

80
00:08:59,200 --> 00:09:00,900
Give you six.

81
00:09:01,110 --> 00:09:01,960
All right.

82
00:09:02,170 --> 00:09:11,290
So that is our calculator I just want to highlight something on line 33 of the code when we're using

83
00:09:11,290 --> 00:09:13,960
the on click event for the division.

84
00:09:14,080 --> 00:09:15,580
This is a symbol.

85
00:09:15,580 --> 00:09:22,560
So the backslash here is what javascript uses to perform a division just to let you know.

86
00:09:22,690 --> 00:09:29,450
And he uses the uses Asterix to Garcia surrogacy on line 29.

87
00:09:29,650 --> 00:09:38,170
He uses the asterisks for multiplication and the slash for performing division.

88
00:09:38,170 --> 00:09:42,590
So thank you so much for your time.

89
00:09:42,610 --> 00:09:49,660
I hope you have hope you've had fun creating your own calculator play around with the values and you

90
00:09:49,660 --> 00:09:53,380
know apply your own touch to the calculator.

91
00:09:53,380 --> 00:09:54,220
Take care.

92
00:09:54,250 --> 00:09:55,200
All the best.

93
00:09:55,240 --> 00:09:56,290
And bye for now.