Create a Calculator Using HTML ,CSS & JavaScript
Source :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Calculator</title>
<style>
body
{
background:#ecf0f1;
font-family:arial;
}
#calBody
{
padding:10px;
background:#3498db;
width:300px;
height:310px;
margin:auto;
top:0px;
right:0px;
left:0px;
bottom:0px;
position:absolute;
-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
}
#calBody h1
{
color:#ecf0f1;
font-weight:normal;
text-align:center;
}
#calBody input, #answer
{
padding:10px; width:270px;
border:none;
margin:auto;
display:block;
margin-bottom:10px;
font-size:24px;
color:#34495e;
background:#ecf0f1;
}
#buttons
{
width:230px;
margin:auto;
}
#buttons button
{
height:50px;
width:50px;
border:none;
background:#34495e;
margin:2px;
font-size:24px;
color:#ecf0f1;
}
#buttons button:hover
{
background:#CF000F;
}
</style>
</head>
<body>
<div id="calBody">
<h1>Dynamic Calculator</h1>
<input type="number" min="0" id="num1">
<input type="number" min="0" id="num2">
<div id="answer">
0
</div>
<div id="buttons">
<button onClick="addition()">+</button>
<button onClick="subus()">-</button>
<button onClick="multi()">x</button>
<button onClick="devi()">/</button>
</div>
</div>
<script>
function addition()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1+num2
document.getElementById('answer').innerHTML = ans;
}
function subus()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1-num2
document.getElementById('answer').innerHTML = ans;
}
function multi()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1*num2
document.getElementById('answer').innerHTML = ans;
}
function devi()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var ans = num1/num2
document.getElementById('answer').innerHTML = ans;
}
</script>
</body>
</html>
Output :
Comments
Post a Comment