Source Code of Calculator:
So here is the source code of the calculator with proper files arrangement.HTML File. saved as Index.html
<html>
<head>
<!-- Extrnal CSS Linking -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!--This is the main HTML of Calculator -->
<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="C" onclick="clean()"></td>
<td><input class="button" type="button" value="<" onclick="back()"></td>
<td><input class="button" type="button" value="/"onclick="insert('/')"></td>
<td><input class="button" type="button" value="X"onclick="insert('*')"></td>
</tr>
<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="-"onclick="insert('-')"></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 rowspan="5"><input class="button" style="height: 126px;" type="button" value="="onclick="equal()"></td>
</tr>
<tr>
<td colspan="2"><input class="button" style="width: 192px;" type="button" value="0" onclick="insert(0)"></td>
<td><input class="button" type="button" value="." onclick="insert(.)"></td>
</tr>
</table>
</div>
<!--This is the end of main HTML of Calculator -->
<!-- Extrnal Javasript Linking -->
<script src="js/script.js"></script>
</body>
</html>
CSS File. saved as style.css
*{
margin: 0;
padding: 0;
}
.button{
width: 90px;
height: 60px;
font-size: 25;
margin: 2;
background: black;
border: none;
color: white;
}
.button:hover{
background: rgb(0, 115, 160);
}
.textview{
width: 384px;
height: 50px;
margin: 5;
font-size: 25;
text-align: center;
padding: 5;
border: none;
color: #00acff;
}
.main{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.bg{
background: linear-gradient(to right, #2196F3, #8BC34A);
height: 100%;
}
JavaScript File. saved as Script.js
function insert(num){
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)
}
}
function clean(){
document.form.textview.value ="";
}
function back(){
var exp = document.form.textview.value;
document.form.textview.value = exp.substring(0,exp.length-1);
}
Complete Souce Download Link.
You can download the complete source of the calculator from the following link.
Posts
No comments:
Post a Comment