Simple Calculator

M2-R5.1 · Chapter 6: JavaScript and Angular JS · 5 min read

Question - Make A simple calculator using js that offer add multiply sub and divide.

Source Code - 

<!DOCTYPE html>

<html>

<head>

    <title>Calculator</title>  

    <style>

        .data{

            text-align: center;

            background-color: brown;

            color: white;

            padding: 50px;

            width: 500px;

            height: auto;

        }

        h1{

            font-size: 60px;

            color: rgb(253, 203, 2);

            text-align: center;

            text-shadow: 2px 2px 10px black;

        }

        .text{

            font-size: x-large;

        }

        .d{

            font-size: x-large;

        }

        body{

            background-color: gray;

        }

        .btn{

            background-color: black;

            color: white;

            border: 2px solid green;

            border-radius: 15px;

            padding: 10px 20px;

            margin: 5px;

        }

        .btn:hover{

            background-color: skyblue;

            color: black;

        }

    </style>      

</head>

<body>

    <center>

    <div class="data">

    <h1>Calculator</h1>

    <p class="text">Enter first number</p>

    <input type="text" id="num1"><br><br>

    <p class="text">Enter second number</p>

    <input type="text" id="num2"><br><br>

    <button onclick="add()" class="btn">Add</button>

    <button onclick="sub()" class="btn">Subtract</button>

    <button onclick="mul()" class="btn">Multiply</button>

    <button onclick="divi()" class="btn">Divide</button>

    <br><br>

    <div id="result" class="d"></div>

    </div>

    </center>

    <script>

        function add(){

            let a = parseFloat(document.getElementById("num1").value);

            let b = parseFloat(document.getElementById("num2").value);

            document.getElementById("result").innerHTML = "Result: " + (a + b);

        }

        function sub(){

            let a = parseFloat(document.getElementById("num1").value);

            let b = parseFloat(document.getElementById("num2").value);

            document.getElementById("result").innerHTML = "Result: " + (a - b);

        }

        function mul(){

            let a = parseFloat(document.getElementById("num1").value);

            let b = parseFloat(document.getElementById("num2").value);

            document.getElementById("result").innerHTML = "Result: " + (a * b);

        }

        function divi(){

            let a = parseFloat(document.getElementById("num1").value);

            let b = parseFloat(document.getElementById("num2").value);

            if(b === 0){

                document.getElementById("result").innerHTML = "Division by zero is not allowed!";

            } else {

                document.getElementById("result").innerHTML = "Result: " + (a / b);

            }

        }

    </script>

</body>

</html>