Calculator Project in JavaScript

In the following tutorial, we will learn how to make a Calculator using HTML, CSS, and JavaScript. JavaScript is a scripting language used to program the backend logic of several websites. It’s a very popular language among web developers.

The following tutorial shows how JavaScript can be used to make a simple calculator. Using <div> tags we divide our webpage into important sections. The output display, and the button rows.

The tutorial demonstrates a simple calculator with basic arithmetic operations such as addition, subtraction, multiplication, and division. The project makes use of HTML and CSS on the front-end and for the styling. The back-end logic of the calculator is written using JavaScript which is one of the leading languages in the web development domain. The <script> tag includes the JavaScript code that handles the logic part of the calculator. Three functions are written in JavaScript which helps us compute the results when given the operands to compute with. The functions are calc(), display() and clr().

The calc() function inputs both the operands and performs the specified operation. The display() function takes care of displaying the entire process on the display section of the calculator. The clr() function helps clear the contents on the display section of the calculator.

Program for Calculator Project in JavaScript

<html>
<head>
    <style>
        input[type="button"] {
            color: white;
            background-color: black;
            font-family: 'Times New Roman';
            font-weight: bold;
            width: 67px;
            height:67px;
            font-size:27px;
        }

        input[type="text"] {
            background-color: white;
            font-family: 'Times New Roman';
            width: 100%;
            height:20px;
            font-weight: bold;
        }
    </style>

    <script>
        function calc()
        {
            let prev_operand = document.getElementById("output").value
            let next_operand = eval(prev_operand)
            document.getElementById("output").value = next_operand
        }

        function display(calc_val)
        {
            document.getElementById("output").value += calc_val
        }

        function clr()
        {
            document.getElementById("output").value = ""
        }

    </script>

</head>

<body>
    
    <table border="1">
        <tr>
            <td colspan="3"><input type="text" id="output" /></td>
            <td><input type="button" value="c" onclick="clr()" /> </td>
        </tr>
        <tr>
            <td>
            <input type="button" value="1" onclick="display('1')" /> 
            </td>
            <td>
            <input type="button" value="2" onclick="display('2')" /> 
            </td>
            <td>
            <input type="button" value="3" onclick="display('3')" /> 
            </td>
            <td>
            <input type="button" value="÷" onclick="display('÷')" /> 
            </td>
        </tr>
        <tr>
            <td>
            <input type="button" value="4" onclick="display('4')" /> 
            </td>
            <td>
            <input type="button" value="5" onclick="display('5')" /> 
            </td>
            <td>
            <input type="button" value="6" onclick="display('6')" /> 
            </td>
            <td>
            <input type="button" value="-" onclick="display('-')" /> </td>
        </tr>
        <tr>
            <td>
            <input type="button" value="7" onclick="display('7')" /> 
            </td>
            <td>
            <input type="button" value="8" onclick="display('8')" /> 
            </td>
            <td>
            <input type="button" value="9" onclick="display('9')" /> 
            </td>
            <td>
            <input type="button" value="+" onclick="display('+')" /> 
            </td>
        </tr>
        <tr>
            <td>
            <input type="button" value="0" onclick="display('0')" />
            </td>
            <td>
            <input type="button" value="." onclick="display('.')" />
            </td>
            <td>
            <input type="button" value="=" onclick="calc()" /> 
            </td>
            <td>
            <input type="button" value="*" onclick="display('*')" />
            </td>
        </tr>
    </table>
</body>
</html>

Now below is how we can see after we run and play with our project:

 

Leave a Reply

Your email address will not be published. Required fields are marked *