How to make calculator in html and javascript with source code | simple calculator code in html and javascript
Output
Watch Full tutorial on Youtube
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Calculator">
<form name="ff"> <input type="text" name="field" id="answer"></form>
<table>
<tr>
<td><input type="button" value="+" class="cal-btn" onclick="ff.field.value+='+'"></td>
<td><input type="button" value="-" class="cal-btn" onclick="ff.field.value+='-'"></td>
<td><input type="button" value="*" class="cal-btn" onclick="ff.field.value+='*'"></td>
<td><input type="button" value="/" class="cal-btn" onclick="ff.field.value+='/'"></td>
</tr>
<tr>
<td><input type="button" value="7" class="cal-btn" onclick="ff.field.value+='7'"></td>
<td><input type="button" value="8" class="cal-btn" onclick="ff.field.value+='8'"></td>
<td><input type="button" value="9" class="cal-btn" onclick="ff.field.value+='9'"></td>
<td><input type="button" value="%" class="cal-btn" onclick="ff.field.value+='%'"></td>
</tr>
<tr>
<td><input type="button" value="4" class="cal-btn" onclick="ff.field.value+='4'"></td>
<td><input type="button" value="5" class="cal-btn" onclick="ff.field.value+='5'"></td>
<td><input type="button" value="6" class="cal-btn" onclick="ff.field.value+='6'"></td>
<td><input type="button" value="C" id="cancle" onclick="cancle()"></td>
</tr>
<tr>
<td><input type="button" value="1" class="cal-btn" onclick="ff.field.value+='1'"></td>
<td><input type="button" value="2" class="cal-btn" onclick="ff.field.value+='2'"></td>
<td><input type="button" value="3" class="cal-btn" onclick="ff.field.value+='3'"></td>
<td rowspan="2" id="equal"><input type="button" id="equal-btn" value="=" onclick="equal()" id="equal-btn"></td>
</tr>
<tr>
<td><input type="button" value="00" class="cal-btn" onclick="ff.field.value+='00'"></td>
<td><input type="button" value="0" class="cal-btn"onclick="ff.field.value+='0'"></td>
<td><input type="button" value="." class="cal-btn" onclick="ff.field.value+='.'"></td>
</tr>
</table>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS code
body{
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.Calculator{
width: 245px;
margin: auto;
background-color: #2e2e34;
padding: 10px;
border-radius: 20px;
box-shadow: 0 0 10px black;
}
#answer{
width: 210px;
padding: 10px;
background-color: transparent;
box-shadow: 0 0 8px #4e4e5c;
color: white;
font-size: 2rem;
margin: 10px;
border-radius: 10px;
text-align:right;
}
input:focus{
outline: none;
border: none;
}
.cal-btn{
width: 50px;
height: 50px;
padding: 1px;
color: white;
background-color: #4e4e5c;
border-radius: 50%;
border:none;
margin: 4px;
box-shadow: 0 0 8px black;
font-size: 1.7rem;
}
.cal-btn:hover{
background-color: white;
color: black;
box-shadow: 0 0 8px crimson;
cursor: pointer;
transition: 250ms ease-in-out;
}
#cancle{
width: 50px;
height: 50px;
padding: 1px;
color: white;
border-radius: 50%;
border:none;
margin: 4px;
box-shadow: 0 0 8px black;
font-size: 1.7rem;
background-color: crimson;
}
#cancle:hover{
background-color: red;
color: white;
box-shadow: 0 0 8px crimson;
cursor: pointer;
transition: 250ms ease-in-out;
}
#equal{
background-color: yellow;
border-radius: 10px;
text-align: center;
}
#equal:hover{
cursor: pointer;
background-color: yellowgreen;
box-shadow: 0 0 10px red;
transition: 250ms ease-in-out
}
#equal-btn{
height: 100px;
width: 50px;
background-color: transparent;
font-size: 1.7rem;
color:black;
border:none;
}
#equal-btn:hover{
cursor: pointer;
}
Javascript code
function equal(){
var answer_field = document.ff.field.value;
var answer = eval(answer_field);
if(answer_field==""){
document.ff.field.value="Error";
}
else{
document.ff.field.value=answer;
}
}
function cancle() {
var answer_field = document.ff.field.value;
document.ff.field.value="";
}
