in

How to program a calculator with jQuery


” Blue stimulates and flames over a piece of metal with a welder leaning over it” by Rob Lambert on Unsplash

Formerly, I revealed you ways to utilize CSS border-radius home to develop the following calculator. Now I will reveal you ways to utilize jQuery to carry out the performance of the calculator.

Calculator utilizing the CSS border-radius function

Including jQuery

We will be utilizing jQuery in this task to react to occasions when a user clicks a button. We have to include the jQuery library to our application. I will utilize the cdnjs CDN library to include jQuery.

At the bottom of my index.html file, I will include the following script tag:

<< script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Managing operator vs number buttons

Prior to composing my code, I chose to conceptualize how I would manage the performance behind the calculator. I divide the buttons on the calculator into 2 groups: operator and number

A number button would represent the numbers 0– 9. All other buttons are operators.

Worldwide variables for our operation

The next action is to identify how might international variables we will require. The international variables will hold the performance of our calculator. For instance, a user can go into the list below series:

 2 + 3 = 5

Similarly, a user can enter this much longer series:

 2 + 3 * 4/ 5 - 6 = -2

When thinking about international variables at first, we may think about producing a brand-new variable whenever the user presses a secret. This would not be really effective. We would need to monitor who understands the number of variables as the user presses secrets.

To enhance on this, we can streamline things to just require 4 international variables:

  • num1
  • num2
  • operator
  • overall

Let me reveal you how this works. The very first number the user presses is saved in variable num1. The operator (i.e. +,–, *,/ or go into) is saved in the operator. The next number gone into is saved in variable 2. When the 2nd operator is gone into, the overall is determined. The overall is saved in the variable overall.

A sensible concern would be exactly what do you make with the 3rd or 4th number that a user gets in? The basic response is that we recycle num1 and num2.

Once the overall has actually been determined, we can change the worth in num1 with the overall. We would then have to clear out the operator and num2 variables. Let’s stroll through this with our 2nd example from above:

 2 + 3 * 4/ 5 - 6 = -2
// num1 is designated worth of 2
// operator is designated worth of +
// num2 is designated worth of 3
// overall is designated the worth of 5
// num1 is designated the worth of 5
// num2 and operator are cleared
// operator is designated worth of *
// num2 is designated worth of 4
// overall is designated worth of 20
// num1 is designated worth of 20
// num2 and operator are cleared
// operator is saved worth of/
// num2 is designated worth of 5
// overall is designated worth of 4
// num1 is designated worth of 4
// num2 and operator are cleared
// operator is designated worth of -
// num2 is designated worth of 6
// overall is designated worth of -2
// num1 is designated worth of -2
// num2 and operator are cleared
// operator is designated worth of =-LRB- ************)

Now you see that we can manage every possible mix of buttons pushed by the user using these 4 variables.

Getting the essential the user pushed

Now that we have actually strolled through our reasoning, we have to begin the procedure of dealing with the essential the user pushed. At the bottom of my index.html file, I will develop a script tag that will hold my code.

The primary step is to obtain the secret that a user pushed. Here is a bit of my index.html file that reveals all the buttons on one row of the calculator:

<< div class="" flex-row">" >
<< button class="" calc-btn">" > 1<
<< button class="" calc-btn">" > 2<
<< button class="" calc-btn">" > 3<
<< button class="" calc-btn">" >+<
<

Every button, whether it is a number or an operator, is specified utilizing a << button><> component. We can utilize this to capture when a user clicks a button.

In jQuery, you can have a button click function. When a button is clicked, the function is passed an occasion things. The event.target will include the button that was clicked. I can get the worth of the button using the innerHTML home.

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

<< script>>
$( file). all set( function() {
$( ' button '-RRB-. on( ' click ', function( e) {
console.log( ' e ', e.target.innerHTML);-LRB- *******************)} );-LRB- *******************)} );-LRB- *******************)<

Now if you check the code, you will see the worth of the secret that you push. This works for every button in the calculator.

Producing our international variables

Now that we have the capability to identify exactly what secret was pushed, we have to begin keeping them in our international variables. I am going to develop my 4 international variables:

 let num1 = ' ';-LRB- *******************) let num2 = ' ';-LRB- *******************) let operator = ' ';-LRB- *******************) let overall = ' ';-LRB- ************)

Managing button when clicked

When a user clicks a button, they will be clicking a number or an operator. Because of that I am going to develop 2 functions:

 function handleNumber( num) {
// code goes here
}
 function handleOperator( oper) {
// code goes here
}

In my button click function previously, I can change the console.log with a call to the suitable function. To identify whether a button or operator was clicked, I can compare e.target.innerHTML to see if it is in between 0 and 9. If it is, the user clicked a number. If not, the user clicked an operator.

Here is my preliminary action to check to make sure I can inform which button was clicked:

$( file). all set( function() {
$( ' button '-RRB-. on( ' click ', function( e) {
let btn = e.target.innerHTML;-LRB- *******************) if (btn >>= ' 0 ' && & & btn = ' 0 ' && & & btn tag into this file. I erase the opening << script> > tag and closing < tag in my index.html file.

The last thing we have to do is to inform our index.html file where our scripts are. We do this by including this line listed below the << script> > tag that loads jQuery at the bottom of the index.html file:

<< script src="" app.js"><" > 

Last Files

I now have these 3 files:

  • index.html
  • app.js
  • style.css

The index.html file is utilized to show the calculator to the user online page.

The style.css is utilized to design my calculator. Please evaluate my previous post that speaks about utilizing the CSS border-radius home to design the calculator.

The app.js file includes the reasoning behind the calculator.

Here is exactly what my app.js submit looks like:

 let num1 = ' ';-LRB- *******************) let num2 = ' ';-LRB- *******************) let operator = ' ';-LRB- *******************) let overall = ' ';-LRB- ************)

$( file). all set( function() {
$( ' button '-RRB-. on( ' click ', function( e) {
let btn = e.target.innerHTML;-LRB- *******************) if (btn >>= ' 0 ' && & & btn

What do you think?

345 points
Upvote Downvote

Comments

Leave a Reply

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

Loading…

0

Comments

0 comments

How to Make money by bitcoin Facebook Page?

Every developer should have a blog. Here’s why, and how to stick with it.