calculator using javascript
simple calculator using html, css and javascript
Hello frends welcome to my blog.
Here is a simple blog on how to create calculator using html,css and javascript.
The calculator works upto five clicks and if you will click after five clicks the calculator would not work properly.
here is its image..
And here is its source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
body{
background:#00004d;
}
.container{
overflow: hidden;
display:flex;
max-width:465px;
flex-direction:column;
margin:25px auto;
background-color:red;
}
.container2{
display:flex;
flex-direction:row;
}
#displayResult{
height:120px;
width:100%;
background-color:white;
font-size:40px;
}
#clear, #sign {
color:white;
font-size:35px;
padding:31px 30px;
text-align:center;
}
#sign{
width:25%;
background:green;
}
#clear{
width:50%;
background-color:#e6005c;
}
#zero, #dot, #equal{
width:33.33%;
color:white;
font-size:30px;
padding:20px 30px;
text-align:center;
background:green;
}
#equal{
background: #1f3d7a;
}
#sign:hover{
cursor: pointer;
}
</style>
</head>
<body onload="assignVariables()" >
<div class="container" >
<div id="displayResult" > </div>
<div class="container2" >
<div id="clear" onclick="clearResult()" > C </div>
<div id="sign" onclick="myfun('%')" > % </div>
<div id="sign" onclick="myfun('/')" > / </div>
</div>
<div class="container2" >
<div id="sign" onclick="myfun('7')" > 7 </div>
<div id="sign" onclick="myfun('8') " > 8 </div>
<div id="sign" onclick="myfun('9')" > 9 </div>
<div id="sign" onclick="myfun('*')" > * </div>
</div>
<div class="container2" >
<div id="sign" onclick="myfun('4')" > 4 </div>
<div id="sign" onclick="myfun('5')" > 5 </div>
<div id="sign" onclick="myfun('6')" > 6 </div>
<div id="sign" onclick="myfun('-')" > - </div>
</div>
<div class="container2" >
<div id="sign" onclick="myfun('1')" > 1 </div>
<div id="sign" onclick="myfun('2')" > 2 </div>
<div id="sign" onclick="myfun('3')" > 3 </div>
<div id="sign" onclick="myfun('+')" > + </div>
</div>
<div class="container2" >
<div id="zero" onclick="myfun('0')" > 0 </div>
<div id="dot" onclick="myfun('.')" > . </div>
<div id="equal" onclick="display()" > = </div>
</div>
</div>
<script>
var str, result;
function assignVariables()
{
str="";
}
function myfun(x)
{
str += x;
document.getElementById("displayResult").innerHTML = str;
}
function display()
{
result = eval(str);
document.getElementById("displayResult").innerHTML=result;
}
function clearResult()
{
str="";
document.getElementById("displayResult").innerHTML = " ";
}
</script>
</body>
</html>
Comments
Post a Comment