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.

    
    
    
    


    

        

            

                
Live Calculator
                
            
            

                

                    
                    
                    
                    
                
                
                

                    
                    
                    
                    
                
                
                

                    
                    
                    
                    
                
                
                

                    
                    
                    
                    
                
            
        
    

    

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.