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">
    <meta charset="utf-8">
    <title>JavaSctipt Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="style.css"/>
    <div class="container">
        <form name="calculatorForm">
            <div class="resultscreen">
                <div class="heading">Live Calculator</div>
                <input type="text" name="evalresult"/>
            <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 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 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 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)"/>

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

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 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.

Read Also:  Fresher PHP WEB Developer Salary Range Level

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *