Welcome back.
In this lesson, we're going to do a quick code review overview of all of the code that we've set up
in the earlier lessons.
So, first of all, we started out and we built out some styling and that was in anticipation when we're
building out our calculator that we can add that styling and dynamically.
And next, we built some HTML, very minimal because of course, we are trying to focus on JavaScript
as much as possible.
So we selected using our JavaScript objects.
We selected that element that's got the class of Michalka.
So this is the main calculator.
This is where everything happens, where all the magic is happening.
We next we laid out the keys and the order of the keys that we want to represent on our calculator.
So we had all the digits.
We had all the operators.
And you can also change the format here and it will just update here dynamically, automatically within
the calculator visible part.
And you do always want to make sure that you do have all the keys.
Some people like the C at the top or the operators at the top.
So it doesn't actually matter.
The order doesn't matter.
You can place them, however, and wherever you want.
Next, we have the operators.
So these are the operators and they're the same values are the same characters that we use in JavaScript.
And that gave us the ability to evaluate them.
And having a string we could evaluate using JavaScript.
We set up a couple variables and we've got one here that we didn't make use of.
So we've got the my output and next we had all everything happening within.
Whenever the DOM content loaded, we ran our function and this built out our visual calculator.
So first we created the screen area and we added a class to it and then we loop through all of the Keys
arrays.
So this is the one here and we built out the visual keys for the calculator.
And then lastly, we added in the event listener that made them interactive and that event listener
invokes the function of button hit and it's the same function for all the buttons.
So does it matter which one you click?
They're all going to get invoked, button hit and what happens in button hit.
So first we take the entire text of the element that triggered the event.
So that gives us the ability to grab whatever character the user is clicking and intending on adding
into our calculator.
So in this case, five, two, three, six, whatever, and we're putting that into temporary value
called my value.
And then we're also selecting the output of the screen output and we're putting into a variable called
my calc.
One of the things we want to watch out for, if by default we're starting out with a zero.
So if Michael is zero, then what we want to do is rid it of that zero value and set it to nothing,
because we know that the user has pressed another key and we don't want that zero just sitting there
and in front of the number because this is a string.
Remember, it's a string.
It's not a number.
So it will automatically add in that zero there.
And we don't want that lingering for visual appeal for our calculator.
Next, we check to see if the user had pressed the equals sign.
And if they have pressed the equals sign, then all we need to do is evaluate the formula.
So in this case, when we press the cosine, all we do is have a number of value and we don't have any
calculations there.
But now we've got plus three.
So we press the cosine and we're adding three to our value.
So that's what evaluator does.
And you can find out more about it.
On the Musila Developer Network.
I've provided a link here to link it to read a little bit more about what that method does.
And it really does power this calculator because it gives us the ability to take that string value and
evaluate the formula in order to return back whatever the value is supposed to be.
So that was as easy as that to calculate that out.
And all we did is set the mythical value to the valuated version of this.
And then lastly, we're just simply outputting it.
The other thing that we're watching out for so all the digits are fine, just entered them in no problem.
Added into the string we're looking for to see if the last character is one of the operators and if
it is that we know we got to be careful because if it's one of the operators, then we need to take
special precautions that we don't have two operators in a role.
So that's all this one is doing is worth checking to see what the last character is.
And we don't need to output that last character.
So get rid of that console message and we see that.
We're checking to see if the last character is one of the operators.
And if it is, we're simply removing out that last character and then that gives us the space to add
in the new operator and continue with the evaluation.
So basically what it's doing is, well, if there's an operator at the end, it's just overwriting that.
Greater and changing the operators.
And if there is no operator at the end, then we're good to evaluate out our calculation.
So that means that we've got a digit at the end.
And if we press the operator and we get another digit, another digit and another operator, well,
we could do the evaluation.
And this is again, done that magic way with JavaScript and the eval method.
And then lastly, all we're doing here is we're updating our current string output with whatever the
my value was.
So in this case, if it's an operator, we're adding the operator to the end.
If this case is a digit, routing the digits to the end and they're going to continue to get added in.
And then all we do is output into the entire text.
And the next time one of the characters is press, one accuses prest, we run through everything once
again.
And lastly, we do have a clear function.
So the clear function does is reset it back to zero.
And so it doesn't actually matter.
All of this calculation and what's being done.
All all we know that the C resets it back to zero.
So if my value is equal to C, then the calculator just goes and shows a zero.
And then lastly, we're outputting the entire text as a zero.
So hope you've enjoyed this section about building out a calculator.
And of course, the source code has been included.
If you have any questions or need clarification on any of the content presented within the previous
lessons, please feel free to connect with me.
I'm always happy to help clarify any of the content as well as answer any questions you may have.
Thanks again for taking the section and I hope you've enjoyed building out the calculator.