Open In App

Design and Implement Calculator using jQuery

Improve
Improve
Like Article
Like
Save
Share
Report

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. <!-- 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>

    
    

    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. <!-- 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>

    
    

    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:




    <!-- 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>

    
    

    Output:

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


    Last Updated : 19 Feb, 2020
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads