Design and Implement Calculator using jQuery - GeeksforGeeks

19 Feb, 2020
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:
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) ScreenSecondary (Result) ScreenInput buttons : Numbers, operators for evaluation etc.<!-- Initialize the layout --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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: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)<!-- Script for Expression Screen  --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </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: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.Final result:<!-- jQuery Calculator --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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:With Error: (Not a valid expression since multiply sign was needed for operation)Without Error:Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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) ScreenSecondary (Result) ScreenInput buttons : Numbers, operators for evaluation etc.<!-- Initialize the layout --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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:
Primary (Expression) Screen
Secondary (Result) Screen
Input buttons : Numbers, operators for evaluation etc.
<!-- Initialize the layout --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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:
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)<!-- Script for Expression Screen  --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </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:
Adding button’s value when the screen is pressed.
Implementing backspace for input.
Clear expression screen (AC)
<!-- Script for Expression Screen  --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </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:
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.Final result:<!-- jQuery Calculator --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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:With Error: (Not a valid expression since multiply sign was needed for operation)Without Error:Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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.
Final result:
<!-- jQuery Calculator --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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:
With Error: (Not a valid expression since multiply sign was needed for operation)Without Error:
With Error: (Not a valid expression since multiply sign was needed for operation)
Without Error:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-Misc
Bootstrap
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
Difference between Bootstrap 4 and Bootstrap 5
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)