Hello and welcome to this lecture in this lecture we will be creating the functionality for our calculator
using JavaScript.
The moment the calculator looks beautiful but none of the key pads work so we'll do that using JavaScript
or I just want to go through some of the things we'll be using for this javascript session to implement
the functionality for the calculator.
So we'll be using the display property to the display property is used to set or return the elements
display type.
So we use the display property to display something.
Next we'll be using the on click event the on click event usually is used to execute a javascript function.
When a button is clicked so a lot of the key pads fully calculate or are going to function are buttons.
So when they are clicked these on click event will be activated and then something an event will happen.
So the unclip is used to respond to a click event.
Next will be using also the evaluation function the evil function is used to evaluate or execute an
argument.
So we use that to evaluate values as well.
So for example one place to evaluate that it gives you three will also be making use of the assignment
operator which is the plus or equals two.
So the assignment operator basically you will use that to add a value to a variable.
Another way to express the assignment operator which is x which is a plus equals two.
You can also express this assists so x plus equals to Y is the same thing as x equals two X plus Y.
For example if you have a variable called X equals to 10 then x plus equals 2 5 will give you the result
of that variable.
So X two plus equals two.
Operator is the same thing as x plus equals to y or x equals two X plus Y.
I hope it makes sense if he doesn't let me know.
I will try and explain a bit more.
So this is our calculator at the moment.
If I click on any of the keys or the buttons you can see nothing is displayed in the screen here.
OK.
This is because we have not implemented any javascript so when you start doing that now.
So we are going to implement the functionality inside our hasty email document.
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
because it's a button when it is click will display the value on that button.
I'm going to attach an earthquake event in combination to using the display property on line 18 of this
hate email document.
I have attached this on click event here and this.
The value here is the name of the form which is a this name here on the form online 16.
So when the button is click using the display property it would display the value which is zero here
to display this value zero on the clock.
This clock here is the form that's what it means.
It means when the button is click is it display display property to display the value which is this
one on the form and the value is.
You notice next to the value of what the operator plus or equals to zero sum will save this.
And then we're gonna test it out if that works.
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
now he should display something on the screen.
Let me refresh.
You can see the zero is now being implemented.
The other buttons on work yet because I have not done that so I'm going to copy and change the values
for the other keys.
So I have now implemented the java script inside the hasty email document so I have attached the on
click event to all the input tags so the onc and next to the click of giving the on click this value
the same properties which is of use the display property to display the value on the form using the
plus or equals to operator.
And if you notice I've set the value of the plus two equals four Prieto to the value of the key.
So this is key pad 0 1 2.
And then we'll go to keep our plus key pad three four five key pad equals 2.
And then this is the key pad minus.
And the same thing.
So basically I've done the same for all of the process is the same for all of it.
So when the button is click this on click event will trigger this action.
It will use the display property to display the value that has been pressed on to the.
Form display screen on line 32.
I have use the on click event and give him a value of the clock which the clock is in them on the form
dot the display property dot.
The value equals to the evaluation function because this is normally when you add two values or take
away two values and you use it equals to sign you means you are you hiding something.
Taking away multiplying or dividing these.
This evaluation function is what is used to evaluate or execute what's inside that argument.
So inside the argument we have inside the argument we have the form which is a cock dot.
The display property dot the value.
So these are the arguments that this equals to sign.
We evaluate compute and then display the result on the screen.
So that's basically the form done.
If I saved that all the buttons on the calculator should now work.
So let's go refresh and test.
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
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
by four gives you that Oh okay let's try something else let's try Twelve divided by two.
Give you six.
All right.
So that is our calculator I just want to highlight something on line 33 of the code when we're using
the on click event for the division.
This is a symbol.
So the backslash here is what javascript uses to perform a division just to let you know.
And he uses the uses Asterix to Garcia surrogacy on line 29.
He uses the asterisks for multiplication and the slash for performing division.
So thank you so much for your time.
I hope you have hope you've had fun creating your own calculator play around with the values and you
know apply your own touch to the calculator.
Take care.
All the best.
And bye for now.