1. Create Simple Savings Calculator Javascript Download
2. Create Simple Savings Calculator Javascript Free

The calculator app we’ll develop in this tutorial is a very simple one. It ismore or less in the manner of those calculators found at grocery stores. The layoutof the app was crafted with CSSgrid. If you’d like to learn how it was achieved, be sure to check out thistutorial as this one focuses onlyon the JavaScript logic employed to make the calculator work.

1. How to build a Calculator App with JavaScript. This epic tutorial provides a solid workout for JavaScript newbies by describing how a simple calculator application can be developed with the language. JavaScript projects for beginners (8 part series) 1 Build your first JavaScript App — A Random Quote Generator.
2. Aug 04, 2021 Creating a beautiful and simple #calculator by using #HTML and #CSS, #Javascript only. This #program is useful for making calculations on your laptop or desktop if the calculator application is not working properly or for solving any calculations quickly.
3. Spread the love Related Posts Create a Tip Calculator with Vue 3 and JavaScriptVue 3 is the latest version of the easy to use Vue JavaScript framework that Create a Class Vue Compnent with vue-class-componentWe can create a Vue component in a class-style component with the vue-class-component package. To Create a Vue.js StopwatchWe can create.
4. May 14, 2020 Javascript:- Handle different types of events and re-usability with functional programming. We will complete development in three different parts. Create the layout. Handle the functionality. Creating the layout of the calculator. If you see the above image you will realize that our calculator is composed of two different sections.

Here’s a live demo of the completedproject. You can play around with it to get a feel of what you’ll be buildingbefore diving in.

The Easy Savings Calculator script can be used for free on your website, and you can even modify the code to suit your needs. Our only request is that you link back to Raving Roo (from your website. The Easy Savings Calculator script exists in three parts, (1) HTML code, (2) CSS code, (3) JavaScript code.

Prerequisites

This tutorial assumes that you have a basic knowledge of JavaScript. I’m goingto break down each step as best as I can so it should be easy to follow even ifyou have no prior experience with building applications in the browser.

Before you begin

You can find the starting pointfor this tutorial on JSFiddle. It contains all the necessary markup and stylesused to build the calculator layout. The markup is almost identical to thefinal state of the previoustutorial in which I discussed howthe calculator layout was crafted, but I made a few minor changes so make sureto use this one instead.

Start by forking the code to a new fiddle, and follow along by typing each stepout till the end. Feel free to do this tutorial on other online code playgroundsor on your local machine if you prefer.

Getting started

Anyone should be able to perform the four most common arithmetic operations(addition, subtraction, multiplication and division) on our calculator app byconstructing a valid expression using the input buttons, and have the resultdisplayed on the screen. An example of a valid expression is shown below:

To construct a valid arithmetic expression, we need to keep track of a fewthings: the first operand (12), the operator (+) and the second operand(10).

Let’s start by creating an object to help us keep track of these values. Add thefollowing code at top of the JavaScript pane in JSFiddle:

The calculator object above consists of everything that we need to constructa valid expression:

• displayValue holds a string value that represents the input of the user orthe result of an operation. It’s how we keep track of what should be displayedon the screen.
• firstOperand will store the first operand for any expression. It’s set tonull for now.
• The operator key will store the operator for an expression. Its initial valueis also null.
• waitingForSecondOperand essentially serves as a way to check if both the firstoperand and the operator have been inputted. If it’s true, the next numbers thatthe user enters will constitute the second operand.

Update the display

At the moment, the calculator screen is blank. We need the contents of thedisplayValue property to be shown on the screen at all times. We will create afunction for this purpose so that anytime an operation is performed in the app,we can always invoke it to update the screen with the contents ofdisplayValue.

Go ahead and type this below the calculator object:

If you look at the HTML code forthe app, you’ll see that the “screen” is really just a disabled text input:

We can’t type into it directly with the keyboard, but we can change its valuewith JavaScript. And that’s what the updateDisplay function does. Now youshould see zero displayed on the screen of the calculator.

Take a breather, and see thecomplete codeat the end of this step.

Handle key presses

We have four sets of keys on the calculator: digits (0-9), operators (+, −, ⨉,÷, =), a decimal point (.) and a reset key (AC). In this section, we’ll listenfor clicks on the calculator keys and determine what type of key was clicked.

Add this code snippet at the bottom of the JavaScript tab:

In the above snippet, we’re listening for a click event on the element with aclass of calculator-keys. Since all the keys on the calculator are childrenof this element, the click event filters down to them too. This is known asevent delegation.

Inside the callback function of the event listener, we extract the targetproperty of the click event using destructuringassignmentwhich makes it easy to unpack object properties into distinct variables.

The target variable is an object that represents the element that was clicked.If this element is not a button (such as if you click the spaces between thebuttons), we will exit the function by returning early. Otherwise, the type ofbutton that was clicked is logged to the console along with its value.

Be sure to try this out before proceeding to the next step. Open up your browser console andclick any of the buttons. The key’s type and value should be logged to theconsole accordingly.

Take a breather, and see thecomplete codeat the end of this step.

Input the digits

In this step, we’ll make the digit buttons work so that when any of them isclicked, the corresponding value is displayed on the screen.

Since the displayValue property of the calculator object represents theinput of the user, we need to modify it when any of the digits is clicked.Create a new function called inputDigit below the calculator object:

Next, replace the following line in the click event listener callback function:

with the following code:

In the inputDigit function, the ternaryoperator(?) is used to check if the current value displayed on the calculator is zero.If so, calculator.displayValue is overwritten with whatever digit was clicked.Otherwise, if displayValue is a non-zero number, the digit is appended to itthrough string concatenation.

Finally, the updateDisplay() function is invoked so that the new contents ofthe displayValue property is reflected on the screen after each button isclicked. Try it out by clicking any of the digit buttons. The display should beupdated with whatever digit you clicked.

Take a breather, and see thecomplete codeat the end of this step.

Input a decimal point

When the decimal point key is clicked, we need to append a decimal point towhatever is displayed on the screen except if it already contains a decimalpoint.

Here’s how we can achieve that. Create a new function called inputDecimalbelow inputDigit:

Within the inputDecimal function, theincludes()method is used to check if displayValue does not already contain a decimalpoint. If so, a dot is appended to the number. Otherwise, the function exits.

Following that, replace the following line in the keys' event listener callbackfunction:

with the following lines of code:

At this point, you should be able to add input a decimal point successfully andhave it display on the screen.

Take a breather, and see thecomplete codeat the end of this step.

Handling operators

The next step is to get the operators (+, −, ⨉, ÷, =) on the calculator working.There are three scenarios to account for:

1. When a user hits an operator after entering the first operand

At this point, the contents of displayValue should be stored under thefirstOperand property and the operator property should be updated withwhatever operator was clicked.

Create a new function called handleOperator below inputDecimal:

When an operator key is pressed, the contents of displayValue is converted toa floating-point number (meaning a number with a decimal point) and the resultis stored in the firstOperand property.

The operator property is also set to whatever operator key was clicked whilewaitingForSecondOperand is set to true which indicates that the firstoperand has been entered and whatever digits the user enters next willconstitute the second operand.

At this point, it is useful to see how the properties of the calculator objectare being updated on each button press. Add the following line to the end ofboth the inputDigit and handleOperator functions:

Then replace the following line in the keys' click event listener callbackfunction:

with the following code:

At this point, try to construct a valid arithmetic operation by clicking thefollowing keys in turn: 12 +. Notice that when the + key is pressed, thevalues of firstOperand and operator properties are updated to 12 and +respectively while waitingForSecondOperand is set to true indicating that thecalculator is now waiting for the second operand to be entered.

If you try to enter the second operand, you will notice that it is appended tothe first instead of overwriting it.

Let’s fix that by updating the inputDigit function as shown below:

If the waitingForSecondOperand property is set to true, the displayValueproperty is overwritten with the digit that was clicked. Otherwise, the samecheck is performed as before, overwriting or appending to displayValue asappropriate.

Take a breather, and see thecomplete codeat the end of this step.

2. When the user hits an operator after entering the second operand

The second scenario we need to handle occurs when the user has entered thesecond operand and an operator key is clicked. At that point, all theingredients to evaluate the expression is present so we need to do so anddisplay the result on the screen. The firstOperand also needs to be updated sothat the result can be reused in the next calculation.

Create a new function called calculate below handleOperator as shown below:

This function takes the first operand, second operand and operator as argumentsand checks the value of the operator to determine how the expression should beevaluated. If the operator is =, the second operand will be returned as is.

Next, update the handleOperator function as shown below:

The else if block added to handleOperator checks if the operator propertyhas been assigned an operator. If so, the calculate function is invoked andthe result is saved in the result variable.

This result is subsequently displayed to the user by updating the displayValueproperty. Also, the value of firstOperand is updated to the result so that itmay be used in the next calculator.

Try it out. Enter 12 + 10 = in the calculator and notice that the correctresult is displayed on the screen. It also works when you chain a string ofoperations. So 5 * 20 - 14 = should give 86 as the result.

This is because hitting the minus key triggers the calculation of the firstoperation (5 * 20) whose result (100) is subsequently set as thefirstOperand for the next calculation so by the time we enter 14 as thesecond operand and hit the = key, the calculate function is executed againgiving 86 as the result which is also set as the firstOperand for the nextoperation, and so on.

Take a breather, and see thecomplete codeat the end of this step.

3. When two or more operators are entered consecutively

It’s quite common to change one’s mind about the type of operation one wants toperform so the calculator must handle this properly.

Let’s say you want to add seven and two together, you will click 7 + 2 = whichwill produce the correct result. But let’s assume after hitting 7 +, youchange your mind and decide to subtract 2 from 7. Instead of clearing thecalculator and starting all over, you should be able to hit - to override the+ that was previously entered.

Remember that at the point the operator is entered, waitingForSecondOperandwill be set to true since the calculator expects a second operand to beentered after the operator key. We can use this quality to update the operatorkey and prevent any calculations until the second operand has been inputted.

Modify the handleOperator function to look like this:

The relevant change is highlighted above. The if statement checks if anoperator already exists and if waitingForSecondOperand is set to true. Ifso, the value of the operator property is replaced with the new operator andthe function exits so that no calculations are performed.

Try it out. Click multiple operators after entering some digits and monitor thecalculator object in the console. Notice that the operator property is updatedeach time and no calculations are performed until you provide the secondoperand.

Take a breather, and see thecomplete codeat the end of this step.

Reset the calculator

The final task is to make sure the user can reset the calculator to its initialstate by pressing a key. In most calculators, the AC button is used to resetthe calculator to its default state, so that’s what we’re going to do here.

Go ahead and create a new function below calculate as shown below:

Then replace the following line in the keys' event listener callback function:

with the following code:

The resetCalculator function sets all the properties of the calculatorobject to their original values. Clicking the AC key on the calculator shouldnow work as expected. You can check the calculator object in the console toconfirm.

Take a breather, and see thecomplete codeat the end of this step.

Fix decimal bug

If you enter a decimal point after clicking on an operator, it gets appended tothe first operand instead of being a part of the second.

We can fix this bug by making the following modification to the inputDecimalfunction:

If waitingForSecondOperand is set to true and a decimal point is entered,displayValue becomes 0. and waitingForSecondOperand is set to false sothat any additional digits are appended as part of the second operand.

Take a breather, and see thecomplete codeat the end of this step.

Refactor the event listener

Update the keys' event listener as shown below. All the if blocks havebeen replaced with a single switch block, and updateDisplay() is called onlyonce at the end of the function.

This way, it’s a lot easier to add new functions to the calculator and you nolonger need to invoke the updateDisplay() function after each operation.

Take a breather, and see thecomplete codeat the end of this step.

Floating-point precision

I’d like to bring your attention to a problem that occurs when the result of anoperation is a floating number. For example, 0.1 + 0.2 produces0.30000000000000004 instead of 0.3 as you’d probably expect.

In other cases, you get the expected result. 0.1 + 0.4 yields 0.5 forexample. A detailed explaination for why this happens can be foundhere. Make sure you read it.

One of the potential solutions to this problem suggested in the above linkedpage is to format the result to a fixed number of decimal places so that theothers are discarded. We can combine the JavaScriptparseFloatfunction with theNumber.toFixed method to implement this solution in our calculator app.

In the handleOperator function, replace the following line:

with the following code:

The toFixed() method accepts a value between 0 and 20, and ensures that thenumber of digits after the decimal point is restricted to that value. Thereturn value may be rounded or padded with zeros if necessary.

Create Simple Savings Calculator Javascript Download

In the earlier example, 0.1 + 0.2 yielded 0.30000000000000004. UsingtoFixed(7) on the result will restrict the digits after the decimal point toseven digits:

Those extra zeros are not important, so we can use parseFloat to get rid ofthem:

And that’s how we’re able to fix this problem in our application. I chose thenumber 7 in this case because it’s a good enough precision for this calculatorapp. A greater amount of precision may be required in other situations.

Take a breather, and see thecomplete codeat the end of this step.

Bonus content

I have prepared some further enhancements to this calculator app for my Patreonsupporters. The following functions were added to the app: sin, cos, tan, log,square, square root, factorial, percent, plus/minus, π and ce.

If you’d like to gain access to all my bonus content (including this one),consider supporting Freshman on Patreon.Your support will help me create more tutorials at a faster rate.

Conclusion

That concludes my tutorial, I hope you learnt a lot from it. Feel free to leavea comment if a section of the article is not clear enough for you, andsubscribe to my newsletter to get more awesome tutorials likethis one in your inbox.

Create Simple Savings Calculator Javascript Free

Thanks for reading, and happy coding!