Create Simple Savings Calculator Javascript

How to create a Simple Calculator in jQuery Javascript

• Simple Payout Calculator
• Create Simple Savings Calculator Javascript Online

Creating simple calculator. Ask Question Asked 3 years, 2 months ago. Javascript Calculator using if/else statements. Visual Basic BMI Calculator gives NaN result. May 01, 2019 Make A Calculator In JavaScript. This tutorial explains how to create simple calculator application using jquery, html and css. Making a calculator in JavaScript is not have been taught so far.As it supports mathematical calculations. With the help of JQuery, HTML and CSS we can build few tiny applications which run completely inside the browser.

In this tutorial, we will learn how to create a simple calculator using the jQuery javascript library. But first, we must understand the requirements in building a javascript driven application. One of the requirements is your thorough understanding in HTML (Hypertext Markup language) and in CSS (Cascading Stylesheet). These languages are required in building the graphic user interface (GUI) of the application.

What we expect in the GUI is a two textboxes for inputting of numbers, a combobox for selection of the desired operator, 1 container for the output and of course the trigger through a submit button. The code goes like this:

After building the html code for the simple calculator application, modify the look and feel of the form elements through CSS.

We can now put the jQuery code for our simple calculator application.

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.

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.

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. Sonuscore the orchestra vst. 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. Sdata tool 4gb to 16gb. 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.

Silent hunter 4 1.5 patch. 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:

Simple Payout Calculator

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.

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

Create Simple Savings Calculator Javascript Online

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.

Thanks for reading, and happy coding!