How to make a calculator using html, css, and javascript - BOOKC -->

How to make a calculator using html, css, and javascript

Monday, December 17, 2018


How  to make a calculator using html, css, and javascript

So what exactly do we need to build this?

As you might have already guessed, we would need to create “buttons” for inputting values and a screen for displaying these values.

Well, basically, that’s it!

But in fancier terms, these are the components we need:

· A display area for displaying operators, operands and solutions.

· Buttons for inputting values to the display screen

Visually, a calculator is a table enclosed in a container. And as you should already know tables are made of rows and columns with cells to contain table data.

Now you get the concepts, let’s get started!


<html>
<head>
<script>
var temp;
function bersih(){
document.form.textview.value="";
}
function insert(num){
if(temp==1){
document.form.textview.value="";
document.form.textview.value=document.form.textview.value + num
temp=0;
}
else{
document.form.textview.value=document.form.textview.value + num
}
}
function equal(){
var exp=document.form.textview.value;
if(exp){
document.form.textview.value=eval(exp)
temp=1;
}
}

</script>
<style>
*{
margin: 0;
padding: 0;
}
.main{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.button{
width: 50;
height: 50;
font-size: 25;
margin: 2;
cursor: pointer;
background : gray;
border: none;
color: white;
}
.textview{
width : 217;
margin : 5;
font-size: 25;
padding: 5;
color: gray;
}
.bg{
background: linear-gradient(to right, red,blue);
height: 100%;
}
</style>
</head>

<body>
<div class="bg"></div>
<div class="main">
<form name="form">
<input class="textview" name="textview">
</form>
<table>
<tr>
<td><input class="button" type="button" value="7" onclick="insert(7)"></td>
<td><input class="button" type="button" value="8" onclick="insert(8)"></td>
<td><input class="button" type="button" value="9" onclick="insert(9)"></td>
<td><input class="button" type="button" value="C" onclick="bersih()"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4" onclick="insert(4)"></td>
<td><input class="button" type="button" value="5" onclick="insert(5)"></td>
<td><input class="button" type="button" value="6" onclick="insert(6)"></td>
<td><input class="button" type="button" value="*" onclick="insert('*')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button" type="button" value="2" onclick="insert(2)"></td>
<td><input class="button" type="button" value="3" onclick="insert(3)"></td>
<td><input class="button" type="button" value="/" onclick="insert('/')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="." onclick="insert('.')"></td>
<td><input class="button" type="button" value="0" onclick="insert(0)"></td>
<td><input class="button" type="button" value="+" onclick="insert('+')"></td>
<td><input class="button" type="button" value="-" onclick="insert('-')"></td>
</tr>
<tr>
<td colspan="4"><input style="width:220;" class="button" type="button" value="=" onclick="equal()"></td>
</tr>
</table>
</div>
</body>

</html>