Make Calculator Using Html, CSS and JavaScript - Technology369kk

Hello everyone! In this post, I’ll guide you through building a functional calculator using HTML, CSS, and JavaScript. This will also help complete Assignment 5 provided by Ranjeet Sir. Follow along, and by the end, you’ll have a fully working calculator that you can customize and make your own.





2nd page of Assignment 

DOWNLOAD CODE: 
Download this file then complete your calculator.

2nd Page of Assignment 

Copy And Paste create Assignments

5A. Code: 

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Create Addition Program</title>
</head>
<body>
    <h1 align="center">Assignment 5</h1> <br>
    <h2 align="left">5A.</h2>

    <p>Number:<input id="number1A"></p>
    <p>Number:<input id="number2A"></p>
    <button onclick="addA()">Sum</button>
    <p>Addition:<input id="resultA"> </p>

    <script>
        function addA() {
            let num1A, num2A, sumA;
            num1A = parseInt(document.getElementById("number1A").value);
            num2A = parseInt(document.getElementById("number2A").value);
            sumA = num1A + num2A;
            document.getElementById("resultA").value = sumA;
        }
    </script>

</body>
</html>

5B. Code

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Create Calculator Program</title>
</head>
<body>

    <h2 align="left">5B.</h2>

    <p>Number: <input id="text1"></p>
    <p>Number: <input id="text2"></p>

    <button onclick="add()">SUM</button>
    <button onclick="sub()">SUB</button>
    <button onclick="mul()">MUL</button>
    <button onclick="div()">DIV</button>
    <button onclick="mod()">MOD</button>

    <p>Result: <input id="answer"></p>

    <script>
        function add() {
            var numOne, numTwo, sum;
            numOne = parseInt(document.getElementById("text1").value);
            numTwo = parseInt(document.getElementById("text2").value);
            sum = numOne + numTwo;
            document.getElementById("answer").value = sum;
        }
        function sub() {
            var numOne, numTwo, sub;
            numOne = parseInt(document.getElementById("text1").value);
            numTwo = parseInt(document.getElementById("text2").value);

            sub = numOne - numTwo;
            document.getElementById("answer").value = sub;
        }
        function mul() {
            var numOne, numTwo, mul;
            numOne = parseInt(document.getElementById("text1").value);
            numTwo = parseInt(document.getElementById("text2").value);

            mul = numOne * numTwo;
            document.getElementById("answer").value = mul;
        }

        function div() {
            var numOne, numTwo, div;
            numOne = parseInt(document.getElementById("text1").value);
            numTwo = parseInt(document.getElementById("text2").value);
            div = numOne / numTwo;
            document.getElementById("answer").value = div;
        }
        function mod() {
            var numOne, numTwo, mod;
            numOne = parseInt(document.getElementById("text1").value);
            numTwo = parseInt(document.getElementById("text2").value);
            mod = numOne % numTwo;
            document.getElementById("answer").value = mod;
        }
    </script>
</body>
</html>

5C. Code. 

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Create Calculator Type Program</title>
 
</head>

<body>
    <h2 align="left">5C.</h2>

<p>Number: <input id="text1C"></p>
<p>Number: <input id="text2C"></p>

<button onclick="Cal()">Calculator</button><br> <br>

<p>Sum:<input id="ansSum"></p>
<p>Sub:<input id="ansSub"></p>
<p>Mul:<input id="ansMul"></p>
<p>Div:<input id="ansDiv"></p>
<p>Mod:<input id="ansMOd"></p>

<script>
    function Cal() {
        let num1C, num2C;
        num1C = parseInt(document.getElementById("text1C").value);
        num2C = parseInt(document.getElementById("text2C").value);

        let sumC = num1C + num2C;
        let subC = num1C - num2C;
        let mulC = num1C * num2C;
        let divC = num1C / num2C;
        let modC = num1C % num2C;

        document.getElementById("ansSum").value = sumC;
        document.getElementById("ansSub").value = subC;
        document.getElementById("ansMul").value = mulC;
        document.getElementById("ansDiv").value = divC;
        document.getElementById("ansMOd").value = modC;
    }
</script>

</body>

</html>



5D. Code. 
 DOWNLOAD COMPLETE CALCULATOR CODE: 
         
<!DOCTYPE html>
<html lang="en">

<head>

    <title>Create Addition Program</title>
    <link rel="stylesheet" href="calc.css">   <!-- Cals.css is an external File -->
</head>

<body>
    <h2 align="left">5D.</h2>

    <div class="container" align="left">
        <fieldset id="container">
            <form name="calculator">
                <input id="display" type="text" name="display" readonly>
                <br>

                <input class="button digits" type="button" value="7" onclick="calculator.display.value +='7' ">
                <input class="button digits" type="button" value="8" onclick="calculator.display.value +='8' ">
                <input class="button digits" type="button" value="9" onclick="calculator.display.value +='9' ">
                <input class="button mathButtons" type="button" value="+" onclick="calculator.display.value +='+' ">

                <br>
                <input class="button digits" type="button" value="4" onclick="calculator.display.value +='4' ">
                <input class="button digits" type="button" value="5" onclick="calculator.display.value +='5' ">
                <input class="button digits" type="button" value="6" onclick="calculator.display.value +='6' ">
                <input class="button mathButtons" type="button" value="-" onclick="calculator.display.value +='-' ">

                <br>
                <input class="button digits" type="button" value="1" onclick="calculator.display.value +='1' ">
                <input class="button digits" type="button" value="2" onclick="calculator.display.value +='2' ">
                <input class="button digits" type="button" value="3" onclick="calculator.display.value +='3' ">
                <input class="button mathButtons" type="button" value="*" onclick="calculator.display.value +='*' ">

                <br>
                <input id="clearButton" class="button" type="button" value="C"
                    onclick="calculator.display.value  =' ' ">
                <input class="button digits" type="button" value="0" onclick="calculator.display.value +='0' ">
                <input class="button mathButtons" type="button" value="="
                    onclick="calculator.display.value = eval(calculator.display.value) ">
                <input class="button mathButtons" type="button" value="/" onclick="calculator.display.value +='/' ">

            </form>
        </fieldset>
    </div>
</body>

</html>

I hope this post is helpful for you , then please support me with follow.



Post a Comment

0 Comments