Opt In (Do Not Edit Here)

Sep 5, 2016

Simple & Clean design of Calculator using JavaScript


 The Code: 

<!-- Title: Calculator using JavaScript -->

<html>
<head>

<!-- --------------CSS Properties for Calculator--------------- -->
<style type="text/css">

h2{ text-align:center; color: red; font-size: 22px;}

.btn {
width: 60px; height:50px;
font-weight:bold;
font-size: 20px;
margin:5px;
}
#calcuator{
    border: 2px solid black;
    background: lightblue;
    margin: 5px; padding: 10px;
    font-family:verdana;

    position: absolute;
    left:50px; top:20px;
}
#equal    {width : 135px;}
#clr    {width: 158px;}
#backspace    {width: 185px;}
#txtDisplay    {
width: 370px; height:80px;
font-face:verdana;
font-size: 30px;
padding:0px; text-align:right;
border: 1px solid black;
}
</style>

<!-- -------------Java script code for Calculator------------- -->
<script language=javascript>
var first, second, temp, operator;
var count=0, result;

function clearALL(){
first=seconde=temp=count=result=0;
document.getElementById("txtDisplay").value ="";
}

function clearONE(){
var len =document.getElementById("txtDisplay").value.length;
document.getElementById("txtDisplay").value = document.getElementById("txtDisplay").value.substr(0, len-1);
}

function getNumber(digit){
    document.getElementById("txtDisplay").value += digit; }

function getOperator(value){
first = document.getElementById("txtDisplay").value;
count++;
operator = value;
document.getElementById("txtDisplay").value ="";
}

function getUnaryResult(value){
first = document.getElementById("txtDisplay").value;

switch(operator=value){
    case 'onebyX': result = 1/eval(first);
            break;
   
    case 'sqrt': result = Math.sqrt(eval(first));
            break;   
    default: result="Wrong Input(s)...!!!"; break;
        }
document.getElementById("txtDisplay").value = result;
}

function getResult(){
second = document.getElementById("txtDisplay").value;

switch(operator){
    case 'plus': result = eval(first) + eval(second);
            break;

    case 'minus': result = eval(first) - eval(second);
            break;
   
    case 'divide': result = eval(first) / eval(second);
            break;
   
    case 'multiple': result = eval(first) * eval(second);
            break;
   
    case 'modulus': result = eval(first) % eval(second);
            break;

    default: result="Wrong Input(s)...!!!"; break;
    }
document.getElementById("txtDisplay").value = result;
}
</script>
</head>

<!-- -------------User Interface of Calculator------------- -->

<body>
<div id="calcuator">
<h2>Calculator using Java Script</h2>
<input type=text id=txtDisplay><br>

<input type=button class=btn id=clr value="Clear" onClick=clearALL()>
<input type=button class=btn id=backspace value="Backspace" onClick=clearONE()><br>

<input type=button class=btn id=seven value=7 onClick=getNumber('7')>
<input type=button class=btn id=eight value=8 onClick=getNumber('8')>
<input type=button class=btn id=nine value=9 onClick=getNumber('9')>

<input type=button class=btn id=divide value=/ onClick=getOperator('divide')>
<input type=button class=btn id=sqrt value=&radic; onClick=getUnaryResult('sqrt')>
<br>

<input type=button class=btn id=four value=4 onClick=getNumber('4')>
<input type=button class=btn id=five value=5 onClick=getNumber('5')>
<input type=button class=btn id=six value=6 onClick=getNumber('6')>

<input type=button class=btn id=multiple value=* onClick=getOperator('multiple')>
<input type=button class=btn id=modulus value=%  onClick=getOperator('modulus')>
<br>

<input type=button class=btn id=one value=1 onClick=getNumber('1')>
<input type=button class=btn id=two value=2 onClick=getNumber('2')>
<input type=button class=btn id=trhee value=3 onClick=getNumber('3')>

<input type=button class=btn id=minus value=- onClick=getOperator('minus')>
<input type=button class=btn id=onebyX value=1/x  onClick=getUnaryResult('onebyX')>
<br>

<input type=button class=btn id=zero value=0 onClick=getNumber('0')>
<input type=button class=btn id=dot value=. onClick=getNumber('.')>

<input type=button class=btn id=plus value=+ onClick=getOperator('plus')>
<input type=button class=btn id=equal value== onClick=getResult()>
<br>

</div>
</body>
</html>

Output:

Snapshot  1 : Addition Operation

Snapshot  1 : Addition Operation
Snapshot  2:Multiplication Operation

Snapshot  2:Multiplication Operation

Snapshot  3: Square Root Operation

Snapshot  3: Square Root Operation

Snapshot  4: Equal Operator

Snapshot  4: Equal Operator

About The Author :

Freelancer and IT Engineer
Softwares Developed by Mayur Dighe ImmortalDotNet.WordPress.com

0 comments :

All Rights Reserved. 2014 Copyright SIMPLITONA

Powered By Blogger | Published By Gooyaabi Templates Designed By : BloggerMotion

Top