How to make Calculator by using HTML ,CSS and JAVASCRIPTS
How to make Calculator by using HTML ,CSS and JAVASCRIPTS
HTML code for making Calculator.
<html>
<head>
<title>Calculator</title>
</head>
<link rel="stylesheet" href="calculator.css">
<body>
<div class="main">
<input type="text" id='res'>
<div class="btn">
<input type="button" value="C" onclick="Clear()">
<input type="button" value="%" onclick="Solve('%')">
<input type="button" value="←" onclick="Back('←')">
<input type="button" value="/" onclick="Solve('/')">
<br>
<input type="button" value="7" onclick="Solve('7')">
<input type="button" value="8" onclick="Solve('8')">
<input type="button" value="9" onclick="Solve('9')">
<input type="button" value="*" onclick="Solve('*')">
<br>
<input type="button" value="4" onclick="Solve('4')">
<input type="button" value="5" onclick="Solve('5')">
<input type="button" value="6" onclick="Solve('6')">
<input type="button" value="-" onclick="Solve('-')">
<br>
<input type="button" value="1" onclick="Solve('1')">
<input type="button" value="2" onclick="Solve('2')">
<input type="button" value="3" onclick="Solve('3')">
<input type="button" value="+" onclick="Solve('+')">
<br>
<input type="button" value="00" onclick="Solve('00')">
<input type="button" value="0" onclick="Solve('0')">
<input type="button" value="." onclick="Solve('.')">
<input type="button" value="=" onclick="Result()">
</div>
</div>
<script src = 'Calculator.js' ></script>
</body>
</html>
body{
background-color:powderblue;
}
div {
border-radius: 2px;
background-color: #f2f2f2;
padding: 20px;
input[type=text], select {
width: 100%;
padding: 12px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button], select {
width:90px;
padding: 2px;
margin: 2px 0px;
position: relative;
left: 13px;
top: 20px;
height: 60px;
cursor: pointer;
font-size: 18px;
transition: 0.5s;
background-color: #3b8d7b;
border-radius: 6px;
color: white;
}
JavaScript code for making Calculator.
function Solve(val) {
var v = document.getElementById('res');
v.value += val;
}
function Result() {
var num1 = document.getElementById('res').value;
var num2 = eval(num1);
document.getElementById('res').value = num2;
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0,-1);
}
Comments
Post a Comment