Create Simple Calculator using JQuery, HTML and CSS

With the help of JQuery, HTML and CSS we can build few tiny applications which run completely inside the browser. Today in this tutorial I am going to show you how to create a simple calculator using JQuery with the help of HTML and CSS. Using this calculator we can perform basic arithmetic operations.

In order to build a calculator you need to have below three components on UI:

1. Calculator board: This is the main container which holds the both result screen and number keys. For this, we can add a DIV tag with element id as calculator as shown in below Step 1 HTML code.
2. Result screen: This is a sub-container of calculator board to hold result of arithmetic operation. For this, we can add a DIV tag with element id as result.
3. Number and operator keys: These are all the small buttons inside the calculator board. For this, we can add a SPAN tag with CSS class name as key.

Step 1:
Here is the Calculator board HTML as described in above points:

[pre class="brush:xhtml; toolbar: false;" title="UI Elements in Calculator board"]
    <div id="calculator">
        <div id="result"></div>
        <span class="key">7</span>
        <span class="key">8</span>
        <span class="key">9</span>
        <span class="key clear-key">C</span>
        <span class="key">4</span>
        <span class="key">5</span>
        <span class="key">6</span>
        <span class="key">/</span>
        <span class="key">1</span>
        <span class="key">2</span>
        <span class="key">3</span>
        <span class="key">*</span>
        <span class="key">0</span>
        <span class="key">00</span>
        <span class="key">.</span>
        <span class="key">+</span>
        <span class="key equal-key">=</span>
        <span class="key">-</span>
    </div>
[/pre]
Step 2:
Now it's time to design the nice looking calculator with the help of CSS for the above HTML Elements.

First, we can start with designing a calculator board with some dark Gray background. Here is the CSS for calculator board.

[pre class="brush:css; toolbar: false;" title="CSS for Calculator board"]
        #calculator {
            width: 170px;
            background-color: #484848;
            padding: 20px;
            border-radius: 10px;
        }
[/pre]
Second, we can apply some styles to result screen with bigger font for clear output view. Here is the CSS for result screen.

[pre class="brush:css; toolbar: false;" title="CSS for output screen"]
        #result {
            width: 155px;
            height: 35px;
            background-color: #cddecc;
            border-radius: 5px;
            margin-bottom: 15px;
            text-align: right;
            line-height: 34px;
            font-family: digital;
            padding: 0px 5px 0px 5px;
            font-size: 25px;
            overflow: hidden;
            box-shadow: inset 0 0px 3px;
        }
[/pre]
Third, design all the number and arithmetic keys as smaller buttons, also differentiate clear and equal buttons with different colours. Here is the CSS for number and arithmetic keys.

[pre class="brush:css; toolbar: false;" title="CSS for Number and Arithmetic keys"]
        .key {
            width: 35px;
            background-color: #eeeeee;
            display: inline-block;
            margin: 3px 0px 8px 3px;
            vertical-align: bottom;
            text-align: center;
            padding: 5px 0px 5px 0px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: 0 3px 0 #a1a1a1, 0 2px 5px rgba(0, 0, 0, .75);
        }
[/pre]
Step 3:
Finally, we can add a Click event handler to all the buttons in the board using JQuery. Here is the algorithm for simple arithmetic operations.

• On loading calculator, set the 0 as initial result and display it in result screen.
• If you click clear button, set 0 as output in result screen.
• If you click any button other clear and equal button, just append the sequence of selected button text to form a expression and display it in result screen.
• If you click equal button, using eval expression in JavaScript compute expression which is in result screen and display returned output of eval expression in result screen. 

Here is the JQuery code which performed the above mentioned operations.

[pre class="brush:javascript; toolbar: false;" title="JQuery code for calculating arithmetic operations"]
    var displayValue = '0';  
    $('#result').text(displayValue);

    $('.key').each(function(index, key){      
        $(this).click(function(e){
            if(displayValue == '0') displayValue = '';
            if($(this).text() == 'C')
            {
                displayValue = '0';
                $('#result').text(displayValue);
            }
            else if($(this).text() == '=')
            {
                try
                {
                    displayValue = eval(displayValue);
                    $('#result').text(displayValue);
                    displayValue = '0';
                }
                catch (e)
                {
                    displayValue = '0';
                    $('#result').text('ERROR');
                }              
            }
            else
            {
                displayValue += $(this).text();
                $('#result').text(displayValue);
            }
            e.preventDefault()
        })
    })
[/pre]
That's it you are done with creating calculator. Here is the complete code of simple calculator using JQuery, HTML and CSS.

Live Preview

[pre class="brush:html javascript css; toolbar: false;" title="Complete code of creating simple calculator"]
<html>
<head>
    <title>Simple Calculator using JQuery</title>
    <style type="text/css">
        body {
            font: 100%/1.618 sans-serif;
        }
     
        #calculator {
            width: 170px;
            background-color: #484848;
            padding: 20px;
            border-radius: 10px;
        }
     
        #result {
            width: 155px;
            height: 35px;
            background-color: #cddecc;
            border-radius: 5px;
            margin-bottom: 15px;
            text-align: right;
            line-height: 34px;
            font-family: digital;
            padding: 0px 5px 0px 5px;
            font-size: 25px;
            overflow: hidden;
            box-shadow: inset 0 0px 3px;
        }
     
        .key {
            width: 35px;
            background-color: #eeeeee;
            display: inline-block;
            margin: 3px 0px 8px 3px;
            vertical-align: bottom;
            text-align: center;
            padding: 5px 0px 5px 0px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: 0 3px 0 #a1a1a1, 0 2px 5px rgba(0, 0, 0, .75);
        }
     
        .equal-key {
            width: 120px;
            background-color: #4a9840;
            color: white;
        }
     
        .clear-key {
            background-color: #bb1c09;
            color: white;
        }
     
        .key:active {
            background-color: #a1a1a1;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var displayValue = '0';  
            $('#result').text(displayValue);

            $('.key').each(function(index, key){      
                $(this).click(function(e){
                    if(displayValue == '0') displayValue = '';
                    if($(this).text() == 'C')
                    {
                        displayValue = '0';
                        $('#result').text(displayValue);
                    }
                    else if($(this).text() == '=')
                    {
                        try
                        {
                            displayValue = eval(displayValue);
                            $('#result').text(displayValue);
                            displayValue = '0';
                        }
                        catch (e)
                        {
                            displayValue = '0';
                            $('#result').text('ERROR');
                        }              
                    }
                    else
                    {
                        displayValue += $(this).text();
                        $('#result').text(displayValue);
                    }
                    e.preventDefault()
                })
            })
        })
</script>
</head>

<body>
    <div id="calculator">
        <div id="result"></div>
        <span class="key">7</span>
        <span class="key">8</span>
        <span class="key">9</span>
        <span class="key clear-key">C</span>
        <span class="key">4</span>
        <span class="key">5</span>
        <span class="key">6</span>
        <span class="key">/</span>
        <span class="key">1</span>
        <span class="key">2</span>
        <span class="key">3</span>
        <span class="key">*</span>
        <span class="key">0</span>
        <span class="key">00</span>
        <span class="key">.</span>
        <span class="key">+</span>
        <span class="key equal-key">=</span>
        <span class="key">-</span>
    </div>
</body>
</html>
[/pre]
Any queries? let's throw them in the below comment box.
Thanks for reading. Happy coding..!