# 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?

Contents

### Step 1: HTML Code

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

```

JavaSctipt Calculator

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;
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%);
}
text-align: left;
font-size: 22px;
color: #000000;
}
.resultscreen {
height: 110px;
width: 100%;
position: relative;
background: #fafafa;
}
input[type='text'] {
width: 300px;
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'] {
}
input[type='button'][value='='] {
background: #ec2629;
color: #ffffff;
}
```

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