You made it! By now you should have a really firm grasp on the fundamentals of JavaScript. Of course there’s plenty more to learn, but you should be able to create quite a bit at this point. Our final project is going to combine everything you’ve learned so far: you’re going to make an on-screen calculator using JavaScript, HTML, and CSS.
As usual with these things, there are elements of this project that are not going to be trivially easy for you, but if you’ve been following the course so far, you definitely have everything you need to finish it. We’re going to walk you through the various steps you can take, but again, how you actually implement them is up to you!
Important Note: Before you get started with this calculator project, we need to cover a word of warning. As you look into how to evaluate complex mathematical statements in JavaScript, you will likely come across the tantalizing eval()
function. However, this function can be very dangerous and should not ever be used! You’ll need to build your own functions to evaluate expressions as part of this calculator project. On the same note, when researching how to calculate expressions for this project, you may encounter solutions that suggest that you return a new Function()
that evaluates a string. Similarly to eval()
, this should not be used due to potential pitfalls of evaluating insecure data. Besides, where’s the fun in solutions that do all the work for you? Let’s get to it!
Here are some use cases (abilities your project needs to have):
operate
that takes an operator and 2 numbers and then calls one of the above functions on the numbers.operate()
on them when the user presses the “=” key.
operate()
has been called, update the display with the ‘solution’ to the operation.12 + 7 - 5 * 3 =
should yield 42
. An example of the behavior we’re looking for would be this student solution. Your calculator should not evaluate more than a single pair of numbers at a time. If you enter a number then an operator and another number that calculation should be displayed if your next input is an operator. The result of the calculation should be used as the first number in your new calculation.=
before entering all of the numbers or an operator could cause problems!.
button and let users input decimals! Make sure you don’t let them type more than one though: 12.3.56.5
. It is hard to do math on these numbers. (disable the decimal button if there’s already one in the display)5-6 months
Job Guarantee
1-on-1 Mentorship