Simple calculator code using html, javascript css3

AS3, HTML5, CSS3, Flex, Convert

Home » CSS, CSS3, Design, HTML5, Javascript

Simple calculator code using html javascript css3

24 February 2013 No Comment

Share on Facebook

Tweet

Tweet

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

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.