Basic Calculator

<html>
    <head>
        <title>
Calculator</title>
        
        <script>
        
            function Add(){
                var num1 = document.getElementById('numeone').value;
                var num2 = document.getElementById('numtwo').value;
                var num3 = +num1 + +num2;
                
                document.getElementById("result").innerHTML = num3; 
            }
        
            function Subtract(){
                var num1 = document.getElementById('numeone').value;
                var num2 = document.getElementById('numtwo').value;
                var num3 = num1 – num2;
                
                document.getElementById("result").innerHTML = num3; 
            }
            
            function Multiply(){
                var num1 = document.getElementById('numeone').value;
                var num2 = document.getElementById('numtwo').value;
                var num3 = num1 * num2;
                
                document.getElementById("result").innerHTML = num3; 
            }
            
            function Divide(){                
                var num1 = document.getElementById('numeone').value;
                var num2 = document.getElementById('numtwo').value;                
                var num3 = num1 / num2;
                
                document.getElementById("result").innerHTML = num3;            
            }
               
        </script>
        
    </head>
    <body>

        <h1>Calculator</h1>
        <input id="numeone" type="text" name="numone"><br>
        <input id="numtwo" type="text" name="numtwo"><br>
        <h1 id="result"></h1><br>
        <div id="operator" style="display: inline-block; height: 50px; width: 50px; background-color: #80CCFF;" onclick="Add()"><h1>+</h1></div>
        <div id="operator" style="display: inline-block; height: 50px; width: 50px; background-color: #80CCFF;" onclick="Subtract()"><h1></h1></div>
        <div id="operator" style="display: inline-block; height: 50px; width: 50px; background-color: #80CCFF;" onclick="Multiply()"><h1>*</h1></div>
        <div id="operator" style="display: inline-block; height: 50px; width: 50px; background-color: #80CCFF;" onclick="Divide()"><h1>/</h1></div>
    </body>

</html>

Leave a Reply