Basic calculator program using javascript using functions

Today, We want to share with you calculator program in javascript.In this post we will show you javascript calculator function, hear for simple calculator program in javascript using functions we will give you demo and example for implement.In this post, we will learn about vuejs Simple calculator web Application with an example.

How to create a JavaScript calculator program?

Step 1: HTML Code

Create an HTML file named index.html and add the below HTML source code.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaSctipt Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div class="container">
        <form name="calculatorForm">
            <div class="resultscreen">
                <div class="heading">Live Calculator</div>
                <input type="text" name="evalresult"/>
            </div>
            <div class="buttons">
                <div class="line">
                    <input type="button" name="inpButton7" value="7" onClick="fullCalc(inpButton7.value)"/>
                    <input type="button" name="inpButton8" value="8" onClick="fullCalc(inpButton8.value)"/>
                    <input type="button" name="inpButton9" value="9" onClick="fullCalc(inpButton9.value)"/>
                    <input type="button" name="inpButtondivision" value="/" onClick="fullCalc(inpButtondivision.value)"/>
                </div>
                
                <div class="line">
                    <input type="button" name="inpButton4" value="4" onClick="fullCalc(inpButton4.value)"/>
                    <input type="button" name="inpButton5" value="5" onClick="fullCalc(inpButton5.value)"/>
                    <input type="button" name="inpButton6" value="6" onClick="fullCalc(inpButton6.value)"/>
                    <input type="button" name="inpButtonmultiply" value="*" onClick="fullCalc(inpButtonmultiply.value)"/>
                </div>
                
                <div class="line">
                    <input type="button" name="inpButton1" value="1" onClick="fullCalc(inpButton1.value)"/>
                    <input type="button" name="inpButton2" value="2" onClick="fullCalc(inpButton2.value)"/>
                    <input type="button" name="inpButton3" value="3" onClick="fullCalc(inpButton3.value)"/>
                    <input type="button" name="inpButtonsubtract" value="-" onClick="fullCalc(inpButtonsubtract.value)"/>
                </div>
                
                <div class="line">
                    <input type="button" name="inpButton0" value="0" onClick="fullCalc(inpButton0.value)"/>
                    <input type="button" name="inpButtonDot" value="." onClick="fullCalc(inpButtonDot.value)"/>
                    <input type="button" name="inpButtonAddition" value="+" onClick="fullCalc(inpButtonAddition.value)"/>
                    <input type="button" name="result" value="=" onClick="evalresult.value=eval(evalresult.value)"/>
                </div>
            </div>
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS Code

Same way create a CSS file named style.css and add the following styles.

body {
    background: #1f2326;
}
.container {
    width: 300px;
    background: #1f2326;
    border-radius: 5px;
    box-shadow: 0 15px 50px 0 rgba(0,0,0,0.4), 0 15px 20px 0 rgba(0,0,0,0.2);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.heading {
    text-align: left;
    font-size: 22px;
    color: #000000;
    padding: 10px 0 0 10px;
}
.resultscreen {
    height: 110px;
    width: 100%;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #fafafa;
}
input[type='text'] {
    width: 300px;
    padding-right: 10px;
    position: absolute;
    bottom: 0;
    border: none;
    text-align: right;
    font-size: 40px;
    color: #000000;
    background: none;
}
.line {
    width: 300px;
}
input[type='button'] {
    float: left;
    font-size: 24px;
    line-height: 70px;
    margin: 1;
    width: 73px;
    height: 70px;
    border: none;
    color: #fafafa;
    cursor: pointer;
    outline: none;
    background: #2d2d2d;
}
input[type='button'][value='0'] {
    border-bottom-left-radius: 5px;
}
input[type='button'][value='='] {
    background: #ec2629;
    color: #ffffff;
    border-bottom-right-radius: 5px;
}

JS Code

Finally, create a JavaScript file named script.js and add the bellow javascript full source code.

function fullCalc(result){
    calculatorForm.evalresult.value = calculatorForm.evalresult.value + result;
}

I hope you get an idea about javascript calculator using if else.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.