Design and Implement Calculator using jQuery

In this post, we are going to implement an easy to build calculator using jQuery and using eval() function. For the sake of simplicity, our calculator will only take input from the buttons on the screen only.

Prerequisites:
Basic knowledge of front-end technologies like HTML, CSS, JavaScript, jQuery and Bootstrap.

Procedure:

  1. Developing the Calculator face:
    Here, we will make use of bootstrap to save time developing the calculator face. The following are the requirements that are needed to be fulfilled while doing the same:

    • Primary (Expression) Screen
    • Secondary (Result) Screen
    • Input buttons : Numbers, operators for evaluation etc.
  2. filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Initialize the layout -->
    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        <!-- Required CDN's -->
        <link rel="stylesheet" 
              href=
        <script src=
        </script>
        <script src=
        </script>
        <style>
            .calculator {
                padding: 4px;
                margin: 4px;
                background-color: #3a4655;
                width: 100%;
                height: auto;
                /* Box shadow for different browsers */
                -webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
                -moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
                box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
            }
              
            .form-control {
                border: 0px solid transparent;
                padding: 0px;
                border: 0px;
                border-radius: 0px;
            }
              
            input[type="text"]:disabled {
                background-color: white;
                text-align: right;
                padding: 8px;
            }
              
            .design {
                text-align: center;
                border-radius: 4px;
                width: 100%;
                height: auto;
                color: white;
                padding: 4px;
                margin: 4px;
                background-color: #2a2e4b;
            }
        </style>
    </head>
      
    <body style="background-color:#f9f9fa;">
      
        <div class="row">
            <div class="col-sm-2 col-md-4">   </div>
            <div class="col-sm-8 col-md-4">
                <!-- Calculator UI -->
                <br>
                <br>
                <br>
                <br>
                <div class="container calculator">
                    <div class="form-input">
                        <input type="text"
                               class="form-control input-lg"
                               id="expression" 
                               value="0"
                               disabled>
                        <input type="text" 
                               class="form-control input-xs" 
                               id="result" 
                               value="0"
                               disabled>
                    </div>
                    <br>
                    <br>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">1</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">2</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">3</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  +
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">4</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">5</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">6</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design"
                                     style="background-color:orange;">
                                  -
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">7</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">8</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">9</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design"
                                     style="background-color:orange;">
                                  *
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">0</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">.</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not"> ? </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  /
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:red;">
                                  (
                              </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:red;">
                                  )
                              </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not" 
                                     style="background-color:red;">
                                  AC
                              </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not" 
                                     style="background-color:red;"
                                  =
                              </div>
                            </div>
      
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 col-md-4">   </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:



  3. Implement functionality of expression screen:
    Now we will implement the following steps accordingly for expression screen to work fine:

    • Adding button’s value when the screen is pressed.
    • Implementing backspace for input.
    • Clear expression screen (AC)
  4. filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Script for Expression Screen  -->
    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        <!-- Required CDN's -->
        <link rel="stylesheet"
              href=
        <script src=
      </script>
        <script src=
      </script>
        <style>
            .calculator {
                padding: 4px;
                margin: 4px;
                background-color: #3a4655;
                width: 100%;
                height: auto;
                /* Box shadow for different browsers */
                -webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
                -moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
                box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
            }
              
            .form-control {
                border: 0px solid transparent;
                padding: 0px;
                border: 0px;
                border-radius: 0px;
            }
              
            input[type="text"]:disabled {
                background-color: white;
                text-align: right;
                padding: 8px;
            }
              
            .design {
                text-align: center;
                border-radius: 4px;
                width: 100%;
                height: auto;
                color: white;
                padding: 4px;
                margin: 4px;
                background-color: #2a2e4b;
            }
        </style>
    </head>
      
    <body style="background-color:#f9f9fa;">
      
        <div class="row">
            <div class="col-sm-2 col-md-4">   </div>
            <div class="col-sm-8 col-md-4">
                <!-- Calculator UI -->
                <br>
                <br>
                <br>
                <br>
                <div class="container calculator">
                    <div class="form-input">
                        <input type="text" 
                               class="form-control input-lg" 
                               id="expression" 
                               value="0" 
                               disabled>
                        <input type="text" 
                               class="form-control input-xs" 
                               id="result" value="0" 
                               disabled>
                    </div>
                    <br>
                    <br>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">1</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">2</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">3</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  +
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">4</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">5</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">6</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design"
                                     style="background-color:orange;">
                                  -
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">7</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">8</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">9</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  *
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">0</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">.</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not"
                                     id="backspace">
                                  
                              </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  /
                              </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:red;">
                                  (
                              </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design"
                                     style="background-color:red;">
                                  )
                              </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not" 
                                     id="allClear" 
                                     style="background-color:red;">
                                  AC
                              </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not" 
                                     style="background-color:red;">
                                  =
                              </div>
                            </div>
      
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 col-md-4">   </div>
        </div>
        <script>
            $(document).ready(function() {
                //Adding to the expression
                $(".design").click(function() {
                    if (!$(this).hasClass("not")) {
                        if ($("#expression").val() == 0)
                            $("#expression").val($(this).text());
                        else
                            $("#expression").val($(
                              "#expression").val() + $(this).text());
                    }
                });
      
                //Backspace
                $('#backspace').click(function() {
                    var value = $("#expression").val();
                    if (!(parseInt(parseFloat(value)) == 0 && value.length == 1))
                        $("#expression").val(value.slice(0, value.length - 1));
                    if (value.length == 1)
                        $("#expression").val("0");
                });
            });
      
            // All Clear
            $("#allClear").click(function() {
                $("#expression").val("0");
            });
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  5. Evaluate the result:
    For this we need to add the following steps in sequenced manner:

    • Extract the value of expression screen.
    • Evaluate the expression screen.
    • Report errors in the output(if any)
    • Clear expression screen and append the output on the result screen.
    • Whenever, other input button is used, clear both the primary and secondary screen.
  6. Final result:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- jQuery Calculator -->
    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        <!-- Required CDN's -->
        <link rel="stylesheet" 
              href=
        <script src=
        </script>
        <script src=
        </script>
        <style>
            .calculator {
                padding: 4px;
                margin: 4px;
                background-color: #3a4655;
                width: 100%;
                height: auto;
                /* Box shadow for different browsers */
                -webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
                -moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
                box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
            }
              
            .form-control {
                border: 0px solid transparent;
                padding: 0px;
                border: 0px;
                border-radius: 0px;
            }
              
            input[type="text"]:disabled {
                background-color: white;
                text-align: right;
                padding: 8px;
            }
              
            .design {
                text-align: center;
                border-radius: 4px;
                width: 100%;
                height: auto;
                color: white;
                padding: 4px;
                margin: 4px;
                background-color: #2a2e4b;
            }
        </style>
    </head>
      
    <body style="background-color:#f9f9fa;">
      
        <div class="row">
            <div class="col-sm-2 col-md-4">   </div>
            <div class="col-sm-8 col-md-4">
                <!-- Calculator UI -->
                <br>
                <br>
                <br>
                <br>
                <div class="container calculator">
                    <div class="form-input">
                        <input type="text" 
                               class="form-control input-lg" 
                               id="expression" 
                               value="0" 
                               disabled>
                        <input type="text" 
                               class="form-control input-xs"
                               id="result"
                               value="0"
                               disabled>
                    </div>
                    <br>
                    <br>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">1</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">2</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">3</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  +</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">4</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">5</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">6</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  -</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">7</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">8</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">9</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  *</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design">0</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design">.</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not"
                                     id="backspace"> ? </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:orange;">
                                  /</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="design"
                                     style="background-color:red;">
                                  (</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design" 
                                     style="background-color:red;">
                                  )</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not"
                                     id="allClear"
                                     style="background-color:red;">
                                  AC</div>
                            </div>
                            <div class="col-sm-3">
                                <div class="design not" 
                                     id="equals"
                                     style="background-color:red;">
                                  =</div>
                            </div>
      
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 col-md-4">   </div>
        </div>
        <script>
            $(document).ready(function() {
                //Adding to the expression
                $(".design").click(function() {
                    if (!$(this).hasClass("not")) {
                        if ($("#expression").val() == 0)
                            $("#expression").val($(this).text());
                        else
                            $("#expression").val($("#expression").val() + $(this).text());
                    }
                });
      
                //Backspace
                $('#backspace').click(function() {
                    var value = $("#expression").val();
                    if (!(parseInt(parseFloat(value)) == 0 && value.length == 1))
                        $("#expression").val(value.slice(0, value.length - 1));
                    if (value.length == 1)
                        $("#expression").val("0");
                });
            });
      
            // All Clear
            $("#allClear").click(function() {
                $("#expression").val("0");
                $("#result").val("0");
            });
      
            //Evalution
            $("#equals").click(function() {
                var result;
                //Check for syntax error
                try {
                    result = (eval(($("#expression").val())));
                } catch (e) {
                    if (e instanceof SyntaxError) {
                        alert("Error! Resetting values.");
                        $("#expression").val("0");
                        $("#result").val("0");
                    }
                    if (e instanceof TypeError) {
                        alert("Error! Resetting values.");
                        $("#expression").val("0");
                        $("#result").val("0");
                    }
                }
      
                // Append if the result is correct
                $("#result").val(result);
                $("#expression").val("0");
            });
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    1. With Error: (Not a valid expression since multiply sign was needed for operation)
    2. Without Error:

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.