tutorial: How to create Calculator In Javascript,html5 and css3

<html>
<head>
<style>

html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}

/* Using box shadows to create 3D effects */
#calculator {
width: 325px;
height: auto;

margin: 100px auto;
padding: 20px 20px 9px;

background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

/* Top portion */
.top span.clear {
float: left;
}

/* Inset shadow on the screen to create indent */
.top .screen {
height: 40px;
width: 245px;

float: right;

padding: 0 10px;

background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);

/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}

/* Clear floats */
.keys, .top {overflow: hidden;}

/* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0;

cursor: pointer;

width: 66px;
height: 36px;

background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);

margin: 0 7px 11px 0;

color: #888;
line-height: 36px;
text-align: center;

/* prevent selection of text inside keys */
user-select: none;

/* Smoothing out hover and active states using css3 transitions */
transition: all 0.2s ease;
}

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
}

.keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}

.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}

/* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}

.keys span.eval:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
}

.top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}

.keys span.eval:active {
box-shadow: 0px 0px #717a33;
top: 4px;
}

.top span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}

</style>
<script>
function sign()
{
if(Calc.input.value > 0)
{
Calc.input.value=-(Calc.input.value);
}
else
{
Calc.input.value=Math.abs(Calc.input.value);
}
}
</script>

</head>
<body>
<form name="Calc">

<div id="calculator">

<div class="top">
<span class="clear" OnCLick="Calc.input.value = ''">C</span>
<div><INPUT TYPE="text" class="screen" NAME="input" Size="20"></div>
</div>

<div class="keys">

<span OnCLick="Calc.input.value = Math.cos(Calc.input.value);">cos</span>
<span OnCLick="Calc.input.value = Math.sin(Calc.input.value);">sin</span>
<span OnCLick="Calc.input.value = Math.tan(Calc.input.value);">tan</span>
<span ONCLICK="Calc.input.value = Calc.input.value.substring(0, Calc.input.value.length - 1)"><-</span>

<span OnCLick="Calc.input.value = Math.sqrt(Calc.input.value);">sqrt</span>
<span OnCLick="Calc.input.value *=Calc.input.value;">x<sup>2</sup></span>
<span OnCLick="Calc.input.value = Math.pow(Calc.input.value, 3);">x<sup>3</sup></span>
<span OnCLick="sign();">+/-</span>

<span OnCLick="Calc.input.value += '7'">7</span>
<span OnCLick="Calc.input.value += '8'">8</span>
<span OnCLick="Calc.input.value += '9'">9</span>
<span class="operator" OnCLick="Calc.input.value += '+'">+</span>

<span OnCLick="Calc.input.value += '4'">4</span>
<span OnCLick="Calc.input.value += '5'">5</span>
<span OnCLick="Calc.input.value += '6'">6</span>
<span class="operator" OnCLick="Calc.input.value += '-'">-</span>

<span OnCLick="Calc.input.value += '1'">1</span>
<span OnCLick="Calc.input.value += '2'">2</span>
<span OnCLick="Calc.input.value += '3'">3</span>
<span class="operator" OnCLick="Calc.input.value += '/'">/</span>

<span OnCLick="Calc.input.value += '0'">0</span>
<span OnCLick="Calc.input.value += '.'">.</span>
<span class="eval" OnCLick="Calc.input.value=eval(Calc.input.value)">=</span>
<span class="operator" OnCLick="Calc.input.value += '*'">x</span>

</div>
</div>

</form>
</body>

</html>

tutorial

Saturday, 29 June 2013

How to create Calculator In Javascript,html5 and css3

No comments:

Post a Comment