# Design and Implement Calculator using jQuery

• Difficulty Level : Medium
• Last Updated : 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:

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.  `````<``html` `lang``=``"en"``>`` ` `<``head``>``    ``<``meta` `charset``=``"utf-8"` `/>``    ````    ``<``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` `src``=``"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"``>``    ````    ``<``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;``        ``}``    `````` ` `<``body` `style``=``"background-color:#f9f9fa;"``>`` ` `    ``<``div` `class``=``"row"``>``        ``<``div` `class``=``"col-sm-2 col-md-4"``>   ``        ``<``div` `class``=``"col-sm-8 col-md-4"``>``            ````            ``<``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>``                ````                ``<``br``>``                ``<``br``>``                ``<``div` `class``=``"container-fluid"``>``                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>1``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>2``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>3``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``+``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>4``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>5``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>6``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``                                 ``style``=``"background-color:orange;"``>``                              ``-``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>7``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>8``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>9``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``                                 ``style``=``"background-color:orange;"``>``                              ``*``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>0``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>.``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"``> ? ``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``/``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:red;"``>``                              ``(``                          ````                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:red;"``>``                              ``)``                          ````                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"` `                                 ``style``=``"background-color:red;"``>``                              ``AC``                          ````                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"` `                                 ``style``=``"background-color:red;"``> ``                              ``=``                          ````                        ```` ` `                    ````                ````            ````        ````        ``<``div` `class``=``"col-sm-2 col-md-4"``>   ``    `````` ` ``

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.  `````<``html` `lang``=``"en"``>`` ` `<``head``>``    ``<``meta` `charset``=``"utf-8"` `/>``    ````    ``<``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` `src``=``"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"``>``  ````    ``<``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;``        ``}``    `````` ` `<``body` `style``=``"background-color:#f9f9fa;"``>`` ` `    ``<``div` `class``=``"row"``>``        ``<``div` `class``=``"col-sm-2 col-md-4"``>   ``        ``<``div` `class``=``"col-sm-8 col-md-4"``>``            ````            ``<``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>``                ````                ``<``br``>``                ``<``br``>``                ``<``div` `class``=``"container-fluid"``>``                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>1``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>2``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>3``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``+``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>4``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>5``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>6``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``                                 ``style``=``"background-color:orange;"``>``                              ``-``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>7``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>8``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>9``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``*``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>0``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>.``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"``                                 ``id``=``"backspace"``>``                              ``? ``                          ````                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``/``                          ````                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:red;"``>``                              ``(``                          ````                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``                                 ``style``=``"background-color:red;"``>``                              ``)``                          ````                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"` `                                 ``id``=``"allClear"` `                                 ``style``=``"background-color:red;"``>``                              ``AC``                          ````                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"` `                                 ``style``=``"background-color:red;"``>``                              ``=``                          ````                        ```` ` `                    ````                ````            ````        ````        ``<``div` `class``=``"col-sm-2 col-md-4"``>   ``    ````    ``<``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");``        ``});``    `````` ` ``

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.
• 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:

 `````<``html` `lang``=``"en"``>`` ` `<``head``>``    ``<``meta` `charset``=``"utf-8"` `/>``    ````    ``<``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` `src``=``"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"``>``    ````    ``<``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;``        ``}``    `````` ` `<``body` `style``=``"background-color:#f9f9fa;"``>`` ` `    ``<``div` `class``=``"row"``>``        ``<``div` `class``=``"col-sm-2 col-md-4"``>   ``        ``<``div` `class``=``"col-sm-8 col-md-4"``>``            ````            ``<``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>``                ````                ``<``br``>``                ``<``br``>``                ``<``div` `class``=``"container-fluid"``>``                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>1``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>2``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>3``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``+``                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>4``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>5``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>6``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``-``                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>7``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>8``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>9``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``*``                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>0``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``>.``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"``                                 ``id``=``"backspace"``> ? ``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:orange;"``>``                              ``/``                        ````                    ````                    ``<``div` `class``=``"row"``>``                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"``                                 ``style``=``"background-color:red;"``>``                              ``(``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design"` `                                 ``style``=``"background-color:red;"``>``                              ``)``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"``                                 ``id``=``"allClear"``                                 ``style``=``"background-color:red;"``>``                              ``AC``                        ````                        ``<``div` `class``=``"col-sm-3"``>``                            ``<``div` `class``=``"design not"` `                                 ``id``=``"equals"``                                 ``style``=``"background-color:red;"``>``                              ``=``                        ```` ` `                    ````                ````            ````        ````        ``<``div` `class``=``"col-sm-2 col-md-4"``>   ``    ````    ``<``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");``        ``});``    `````` ` ``

Output:

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

My Personal Notes arrow_drop_up