loading
I am available for freelance
logo

Hi, I'mGlen Taylor

Download Resume

jQuery Calculator Project

Last weekend I discovered an excellent project to learn about and practice jQuery. The project is by Chris Coyier a web developer who writes a blog called CSS-Tricks. The project Chris walks you through is entitled Creating an Incredible jQuery Calculator. This project walk through is very easy to understand and it was a lot of fun. After looking through Chris’s work I decided to take a stab at using his ideas as a jumping off spot. So, I modified the code and created a version of the jQuery Calculator for myself with some additions and perhaps a few improvements.

At the outset I had 3 main goals that I wanted to accomplish in my version of the calculator:

  1. Eliminate all the graphics used for the calculator GUI.  Instead, I wanted my calculator’s interface to be drawn entirely with CSS.
  2. Add functionality to change the sign (plus/minus) of numbers.  Most simple calculators have the ability to change the numbers from positive to negative and visa versa.
  3. Add percentage functionality.  Again, this is a common button you see on simple calculators.

Along the way I discovered a few additional things that I ended up including to the finished calculator.  Below is my explanation of my version of the jQuery Calculator.  I encourage you to take a look at Chris’s version and his code explanation first as this will help you understand my modifications.  If you just want to see my calculator in action then click Glen’s jQuery Calculator link or the image below.

jQuery Calculator

This first section is the actual HTML source code. Here I just added the divs for the plus/minus (change sign) button and the percent button.  One interesting thing I also did was use the actual HTML accent entity code for the classic division symbol.  This is the symbol most often seen on a real calculator. Using the accent entity code made for an interesting code challenge when checking for the division function in the jQuery code.  I had to use a string function, String.fromCharCode(247), in order to make it work.

Another important element is the div with the class of numpad.  This div is used to create the main body of the calculator in the stylesheet.

The real action for the GUI happens here in the stylesheet.  For the buttons I used the border-radius style.  The key to making the perfect round button is to make sure the width and the height are the same size.  Then all you do is set border-radius to 50%. Another key style I used was the radial-gradient.  This gives the buttons a 3-D look. In the jQuery code I also captured click events for the function buttons and then reversed the gradient to make the buttons appear as if they had been pushed down. The closer class has another interesting style, border: inset.  This gives the small circular button used to minimize the calculator a beveled look. Finally I used rgba color styles for the calculator body and display so that the background images on the page could be seen through it.

In the jQuery code I had to add functionality for the change sign and percent functionality.  This involved using logic that captured when certain events took place.  One challenge I had to overcome was when I needed the second number in an equation to have the sign changed.  I used Chris’s logic from his number selection functionality and modified it to suit the circumstances for changing signs.

For the percent functionality I was surprised that there are actually two logic models for a percent sign on a calculator, one for addition/subtraction and another for multiplication/division.  With addition and subtraction the logic is :

88      First number is 88

+        Addition is the operation

5        5 is the second value

%       Percent has been pressed and this is now a modifier of the second value 5 and then  acts as a second modifier of 88.

88 x (5  / 100) = 4.4  – Now this is the second number.

=       88 + 4.4 = 92.4

With multiplication and division the logic is different.

88      First number is 88

x         Multiplication is the operation

5         5 is the second value

%       Percent has been pressed and this is now a modifier of the second value 5

5  / 100 = 0.05 Now this is the second number

=       88 x 0.05 = 4.4

Therefore, I had to incorporate this logic into the percent function.  Also, I had to account for the scenario when the percent button was selected after only the first number was selected.

Other new aspects that I added to Chris’s include the mouse events that interact with the styles that give the calculator a dynamic feel.

This project was a ton of fun. I really want to thank Chris for his post, Creating an Incredible jQuery Calculator.

I might extend this further by making it into a scientific calculator.  We’ll see. 🙂

  • Share this :
1 comment
  • Craig Morrison
    Craig Morrison | February 15, 2016

    Nice work, Glen!

    I noticed that Chris and you both used the .val() jQuery method in conjunction with a text input element. I also wish to build a similar calculator, with the extra buttons you added. One change I wish to make is that I don’t want the user to be able to interact with the display directly, either via mouse or keyboard. I am therefore using a div for the display. The.val() method doesn’t appear to work for a div, so I’ve replaced all references to val() with text().

    Here is my interface (trying to copy the iPhone 6)… (Haven’t added any new logic yet).
    http://codepen.io/frogmorton/pen/jWpKJY

Leave a comment