# Calculator Project in JavaScript

In the following tutorial, we will learn how to make a Calculator using in JavaScript with HTML, CSS. JavaScript is a scripting language used to program the backend logic of several websites. Itâ€™s a very popular language among web developers.

This tutorial shows how JavaScript can be used to make a simple calculator for web pages that can run on the browser. Using <div> tags we divide our webpage into important sections. The output display, and the button rows.

The tutorial demonstrates a simple calculator with basic arithmetic operations such as addition, subtraction, multiplication, and division. The project makes use of HTML and CSS on the front-end and for the styling. The back-end logic of the calculator is written using JavaScript which is one of the leading languages in the web development domain. The <script> tag includes the JavaScript code that handles the logic part of the calculator. Three functions are written in JavaScript which helps us compute the results when given the operands to compute with. The functions are calc(), display() and clr().

The calc() function inputs both the operands and performs the specified operation. The display() function takes care of displaying the entire process on the display section of the calculator. The clr() function helps clear the contents on the display section of the calculator.

## Program for Calculator Project in JavaScript

Below is the given JS code for our calculator.

```<html>
<style>
input[type="button"] {
color: white;
background-color: black;
font-family: 'Times New Roman';
font-weight: bold;
width: 67px;
height:67px;
font-size:27px;
}

input[type="text"] {
background-color: white;
font-family: 'Times New Roman';
width: 100%;
height:20px;
font-weight: bold;
}
</style>

<script>
function calc()
{
let prev_operand = document.getElementById("output").value
let next_operand = eval(prev_operand)
document.getElementById("output").value = next_operand
}

function display(calc_val)
{
document.getElementById("output").value += calc_val
}

function clr()
{
document.getElementById("output").value = ""
}

</script>

<body>

<table border="1">
<tr>
<td colspan="3"><input type="text" id="output" /></td>
<td><input type="button" value="c" onclick="clr()" /> </td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="display('1')" />
</td>
<td>
<input type="button" value="2" onclick="display('2')" />
</td>
<td>
<input type="button" value="3" onclick="display('3')" />
</td>
<td>
<input type="button" value="/" onclick="display('/')" />
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="display('4')" />
</td>
<td>
<input type="button" value="5" onclick="display('5')" />
</td>
<td>
<input type="button" value="6" onclick="display('6')" />
</td>
<td>
<input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="display('7')" />
</td>
<td>
<input type="button" value="8" onclick="display('8')" />
</td>
<td>
<input type="button" value="9" onclick="display('9')" />
</td>
<td>
<input type="button" value="+" onclick="display('+')" />
</td>
</tr>
<tr>
<td>
<input type="button" value="0" onclick="display('0')" />
</td>
<td>
<input type="button" value="." onclick="display('.')" />
</td>
<td>
<input type="button" value="=" onclick="calc()" />
</td>
<td>
<input type="button" value="*" onclick="display('*')" />
</td>
</tr>
</table>
</body>
</html>```

Now below is how we can see after we run and play with our project: