Simple javascript and html coded calculator does simple operations like Addition, Subtraction, division and multiplication.
The code is free to use or modify.
I am distributing to code to be useful for beginners.
Simple Calculator (html, css, javascript)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
#wrapper
{
width:250px;
height:330px;
background:#333;
position:absolute;
}
#container{
width:95%;
height:95%;
position:relative;
left:5px;
top:7px;
border:1px solid #666;
background:#666;
}
.inputClass
{
padding:10px 0px;
margin:4px 0px 0px 4px;
text-align:right;
font-size:14px;
font-weight:600;
}
.numericBTN{
width:52px;
height:30px;
margin:20px 0px 0px 4px;
}
.controlBTN
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000;
background: -moz-linear-gradient(
top,
#f5c7d7 0%,
#ff5c5c);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f5c7d7),
to(#ff5c5c));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ff5c5c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
.indic{
position:absolute;top:4px;right:10px;
font-weight:100;
font-size:10px;
}
</style>
<script>
var control = "";
var temp = "";
function controlPressedfn(val){
temp = document.getElementById("screenTXT").value;
document.getElementById("screenTXT").value="";
document.getElementById("indic").innerHTML = temp+" "+val;
control = val;
}
function keyPressedfn(val){
if(document.getElementById("screenTXT").value=="0")
document.getElementById("screenTXT").value="";
document.getElementById("screenTXT").value+=val;
}
function resultfn(){
var byNum = document.getElementById("screenTXT").value;
var result=""
switch(control)
{
case '+':
result = parseInt(temp)+parseInt(byNum);
break;
case '-':
result = parseInt(temp)-parseInt(byNum);
break;
case 'x':
result = parseInt(temp)*parseInt(byNum);
break;
case '%':
result = parseInt(temp)/parseInt(byNum);
break;
}
document.getElementById("indic").innerHTML = "";
document.getElementById("screenTXT").value = result;
}
function clearfn(){
document.getElementById("screenTXT").value ="0";
document.getElementById("indic").innerHTML = "";
temp="";
control="";
indic
}
</script>
<body><div id="wrapper">
<div id="container">
<div id="indic" class="indic"></div>
<input id="screenTXT" type="text" size="28" class="inputClass" value="" disabled >
<div style="float:right;margin-right:3px;"><button class="numericBTN controlBTN" onClick="clearfn();">C</button></div><div style="clear:both"></div>
<button class="numericBTN" onClick="keyPressedfn(7)">7</button>
<button class="numericBTN" onClick="keyPressedfn(8)">8</button>
<button class="numericBTN" onClick="keyPressedfn(9)">9</button>
<button class="numericBTN controlBTN" onClick="controlPressedfn('+')">+</button>
<button class="numericBTN" onClick="keyPressedfn(4)">4</button>
<button class="numericBTN" onClick="keyPressedfn(5)">5</button>
<button class="numericBTN" onClick="keyPressedfn(6)">6</button>
<button class="numericBTN controlBTN" onClick="controlPressedfn('-')">-</button>
<button class="numericBTN" onClick="keyPressedfn(1)">1</button>
<button class="numericBTN" onClick="keyPressedfn(2)">2</button>
<button class="numericBTN" onClick="keyPressedfn(3)">3</button>
<button class="numericBTN controlBTN" onClick="controlPressedfn('x')">x</button>
<button class="numericBTN" onClick="keyPressedfn('.')">.</button>
<button class="numericBTN" onClick="keyPressedfn(0)">0</button>
<button class="numericBTN" onClick="resultfn()">=</button>
<button class="numericBTN controlBTN" onClick="controlPressedfn('%')">%</button>
</div>
</div>
</body>
</html>
Conclusion:
Simple calculator script to use in your project for free. created using html css javascript.
Related posts: