Design and Implement Calculator using jQuery
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: - 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.
html <!-- 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> 
- 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)
html <!-- 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> 
- 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: html <!-- 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> - With Error: (Not a valid expression since multiply sign was needed for operation)
- Without Error:
Similar Reads
Design a Loan Calculator using JavaScript The Loan Calculator can be used to calculate the monthly EMI of the loan by taking the total amount, months to repay, and the rate of interest.Formula Used:interest = (amount * (rate * 0.01))/months;total = ((amount/months) + interest);ApproachExtract values from HTML input elements (#amount, #rate,
2 min read
Age Calculator Design using HTML CSS and JavaScript In the Age Calculator, the user enters their date of birth using a date input field. The tool calculates and displays the exact age in years, months, and days from the current date (or a specified date). We'll design the layout using HTML and CSS, and add functionality using JavaScript. It will also
3 min read
Design a BMI Calculator using JavaScript A BMI (Body Mass Index) Calculator measures body fat based on weight and height, providing a numerical value to categorize individuals as underweight, normal weight, overweight, or obese. It’s widely used to assess health risks and guide lifestyle or medical decisions.A BMI Calculator using JavaScri
3 min read
Design a Tip Calculator using HTML, CSS and JavaScript The tip is the money given as a gift for good service to the person who serves you in a restaurant. In this project, a simple tip calculator is made that takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person.
4 min read
Design a Student Grade Calculator using JavaScript A Student Grade Calculator is a tool used to compute students' grades based on their scores in various assessments, such as assignments, quizzes, exams, or projects. It helps standardize grading, ensures accuracy, and provides students with a clear understanding of their academic performance.Formula
4 min read