Previously, I showed you how to use the CSS border-radius property to create the following calculator. Now I will show you how to use jQuery to implement calculator functionality.

adding jquery

We will be using jQuery in this project to respond to events when the user clicks a button. We need to add jQuery library to our application. I would use the CDNJS CDN library to add jQuery.

Handling Operator vs Number Button
Before writing my code, I decided to brainstorm how I would handle the functionality behind the calculator. I divide calculator buttons into two groups: operators and numbers.

A number button will correspond to the numbers 0–9. All other buttons are operators.

Global variables for our operations

The next step is to determine how we might need global variables. Global variables will hold the functionality of our calculator. For example, a user might enter the following sequence:

When initially considering global variables, we can consider creating a new variable each time the user presses a key. It won’t be very efficient. We have to keep track of who knows how many variables the user presses.

I’ll show you how it works. The first number the user presses is stored in the variable num1. Operators (ie +, -, *, / or enter) are stored in the operator. The next number entered is stored in variable 2. Once the second operator is entered, the total is calculated. Aggregate variables are stored in aggregates.

A logical question would be, what do you do with the third or fourth number entered by the user? The simple answer is that we reuse num1 and num2.

Once the total is calculated, we can replace the value in num1 with the total. Then we have to clear the operator and the num2 variable.

Now you see that we can handle every possible combination of buttons pressed by the user using these 4 variables.

key press by user

Now that we have gone through our logic, we need to start the process of handling the key pressed by the user. At the bottom of my index.html file, I’ll create a script tag that will contain my code.

The first step is for the user to press the key. Here’s a snippet of my index.html file that shows all the buttons on a row of calculator:

Each button, whether it is a number or an operator, is defined using a <button><;/button> element. We can use this to catch when a user clicks on a button.

In jQuery, you can have a button click function. When a button is clicked, an event object is passed to the function. Event.target will contain the button that was clicked. I can get the value of button using innerHTML property.

Here is the code that will console.log the button the user clicks.

Now if you test the code, you will see the value of the key you press. This works for every button on the calculator.

creating our global variables

Now that we have the ability to determine which keys were pressed, we need to start storing them in our global variables.

In my buttonclick first function, I can replace console.log with a call to the appropriate function. To determine if a button or operator was clicked, I can compare e.target.innerHTML to see if it is between 0 and 9. If so, the user clicked on a number. If not, the user clicked on an operator.

handling number button

When a user presses a number, it will be assigned to the num1 or num2 variables. num1 is assigned a value of ”. We can use it to determine which variable to assign the number to. If num1 is empty then we assign number to it. Otherwise, we assign it to num2.

display button

The next step is to actually display the pressed button to the user. If you check the calculator’s functionality on your phone, you will see that it only displays numbers. If a user presses the + key, it is not displayed.

In our index.html file, we have a div with class ‘calc-result-input’ that displays our inputs. We will use this to display the number to our users.

Since we have separated our calculator activity into tasks, we will create a function to display the buttons.

When to call handleTotal function
Now that we have a function to calculate the total, we need to call it at the appropriate time. We only calculate the total when a user enters their other operator.

We need to modify our existing HandleOperator function to handle this. Previously, we were assigning the operator variable the value of the operator button clicked by the user. Now we need to know whether it is the first operator that the user has clicked or not.

Leave a Reply

Your email address will not be published. Required fields are marked *