Simple Calculator Using JavaScript
Hello Guys
In this post , I had developed a simple calculator using JavaScript.
Code is given below.
1. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Uchen&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td colspan="4"><input type="text" name="" id="display" readonly></td>
</tr>
<tr>
<td><input type="button" name="" id="a" value="1" onclick="attach('1')"></td>
<td><input type="button" name="" id="a" value="2" onclick="attach('2')"></td>
<td><input type="button" name="" id="a" value="3" onclick="attach('3')"></td>
<td><input type="button" name="" id="b" value="+" onclick="attach('+')"></td>
</tr>
<tr>
<td><input type="button" name="" id="a" value="4" onclick="attach('4')"></td>
<td><input type="button" name="" id="a" value="5" onclick="attach('5')"></td>
<td><input type="button" name="" id="a" value="6" onclick="attach('6')"></td>
<td><input type="button" name="" id="b" value="-" onclick="attach('-')"></td>
</tr>
<tr>
<td><input type="button" name="" id="a" value="7" onclick="attach('7')"></td>
<td><input type="button" name="" id="a" value="8" onclick="attach('8')"></td>
<td><input type="button" name="" id="a" value="9" onclick="attach('9')"></td>
<td><input type="button" name="" id="b" value="x" onclick="attach('*')"></td>
</tr>
<tr>
<td><input type="button" name="" id="a" value="0" onclick="attach('0')"></td>
<td><input type="button" name="" id="b" value="." onclick="attach('.')"></td>
<td><input type="button" name="" id="b" value="=" onclick="answer()"></td>
<td><input type="button" name="" id="b" value="/" onclick="attach('/')"></td>
</tr>
<tr>
<td><input type="button" name="" id="c" value="C" onclick="clr()"></td>
<td><input type="button" name="" id="b" value="%" onclick="attach('%')"></td>
</tr>
</table>
</body>
</html>
2.CSS
body
{
margin:0;
padding:0;
font-family: 'Uchen', serif;
justify-content: center;
align-items: center;
display: flex;
}
table
{
margin-top: 15px;
background: #5DADE2;
height: 50vh;
border: 1px solid black;
}
td
{
padding: 3px;
}
#display
{
width: 99%;
outline: none;
font-size: 25px;
border: none;
height: 40px;
border-radius: 5px;
}
input[type=button]
{
width: 90px;
text-align: center;
background: none;
border: none;
outline: none;
font-weight: bold;
font-size: 25px;
border-radius:25px;
box-shadow: 0 4px rgba(0,0,0,0.2);
}
input[type=button]:hover
{
box-shadow: 0 4px #58D68D;
}
#a
{
background: #F7F9F9;
}
#a:hover
{
background: #6C3483;
box-shadow: 0 4px #4A235A;
}
#b{
background: #F7DC6F;
}
#b:hover
{
background: #F4D03F;
box-shadow: 0 4px #B7950B;
}
#c
{
background: #B03A2E;
}
#c:hover
{
box-shadow: 0 4px #CB4335;
}
3. JavaScript
function attach(val)
{
document.getElementById("display").value+=val;
}
function clr()
{
document.getElementById("display").value='';
}
function answer()
{
var exp=document.getElementById("display").value;
var result=eval(exp)
document.getElementById('display').value=result;
}
OUTPUT
Simple Calculator using JavaScript
Comments
Post a Comment