Prompt Calculator

var f_no=eval(prompt("Enter First No","Type here"));
var op=prompt("Enter airthmatic Operator","type here");
var s_no=eval(prompt("Enter Second No","Type here"));
document.write('<table id=tablei border="1"><tr><th id=thi>value 1</th><th id=thi>operator</th><th id=thi>value 2</th></tr>','<td id=tdi>',f_no,'</td>','<td id=tdi>',op,'</td>','<td id=tdi>',s_no,'</td></tr>',"<br>");
switch(op)
{
 case '+':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=tdi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no+s_no,'</td></tr></table>');
 break;
 
 case '-':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=tdi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no-s_no,'</td></tr></table>');
 break;
 
 case '*':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=thi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no*s_no,'</td></tr></table>');
 break;
 
 case '/':
 document.write('<table id=tablei border="1"><tr><th id=thi>',"Result",'<td id=tdi>',"=",'</td>' ,'</th>','<td id=tdi>',f_no /s_no,'</td></tr></table>');
 break;
 
 default:
 document.write("Invalid Operators");
}

#tdi {width:2in;text-align:center;font-size:18px; border:groove; border-radius:20px; background-color:#CCCCFF; color:#FFF; border-radius:12px; box-shadow:2px 4px 8px #FFFFFF; }
#thi {width:1in;text-align:center;font-size:18px; border-radius:20px; background-color:#369; color:#FFFFFF; border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}
#tablei{border:none; padding:2px; width:2in; border-top-right-radius:12px; border:outset; border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}
.butt{border-radius:30px; background-color:#000; color:#FFF; border:none; box-shadow:4px 4px 8px #999999;}
.tde {width:2in;text-align:center;font-size:18px; border:groove; border-radius:20px; background-color:#CCCCFF; color:#FFF; }
.the {width:1in;text-align:center;font-size:18px; border-radius:20px; background-color:#369; color:#FFFFFF;}
.tble{border:none; padding:2px; width:2in; border-top-right-radius:12px;}
.box{border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}

4-Function Calculator

<center><table class="tble">
<td class="tde">
<form name="calculator">  
Value 1: <input class="box" type="text" name="number1">   
Value 2: <input class="box" type="text" name="number2">   
Result: <input class="box" type="text" name="total"></td>  
<input class="butt" type="button" value="+" onclick="javascript:addition();">  
<input class="butt" type="button" value="-" onclick="javascript:subtraction();">  
<input class="butt" type="button" value="x" onclick="javascript:multiply();">  
<input class="butt" type="button" value="/" onclick="javascript:division();">  
<input class="butt" type="button" value="%" onclick="javascript:modulus();">  
</form></table></center>

.butt{border-radius:30px; background-color:#000; color:#FFF; border:none; box-shadow:4px 4px 8px #999999;}
.tde {width:2in;text-align:center;font-size:18px; border:groove; border-radius:20px; background-color:#CCCCFF; color:#FFF; }
.the {width:1in;text-align:center;font-size:18px; border-radius:20px; background-color:#369; color:#FFFFFF;}
.tble{border:none; padding:2px; width:2in; border-top-right-radius:12px;}
.box{border-radius:12px; box-shadow:2px 4px 8px #FFFFFF;}

All-Function Calculator

<table class="calculator" id="calc"><tr><td colspan="4" class="calc_td_result "><input type="text" readonly="readonly" name="calc_result" id="calc_result" class="calc_result bar" onkeydown="javascript:key_detect_calc('calc',event);" /></td>
</tr><tr><td class="calc_td_btn"><input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="←" onclick="javascript:f_calc('calc','nbs');" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" /></td></tr><tr>
<td class="calc_td_btn"><input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" /></td></tr><tr><td class="calc_td_btn"><input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" /></td><td class="calc_td_btn"><input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" /></td></tr><tr><td class="calc_td_btn"><input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="÷" onclick="javascript:f_calc('calc','');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="±" onclick="javascript:f_calc('calc','+-');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
                </td>
            </tr>
        </table>
        <script type="text/javascript">
                document.getElementById('calc').onload=init_calc('calc');
        </script>

.calculator
{
        width:300px;
        height:300px;
        background-color:#eeeeee;
        border:2px solid #CCCCCC;
        margin:auto;
        padding-left:5px;
        padding-bottom:5px; background-color:#CCCCFF; border-radius:15px;
}
.calculator td
{
        height:16.66%;
}
.calc_td_result
{
        text-align:center;
}
.calc_result
{
        width:90%;
        text-align:right;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:25%;
        height:100%; 
}
.calc_btn
{
        width:90%;
        height:90%;
        font-size:20px; border-radius:15px; background-color:#000000; color:#FFF; box-shadow:4px 6px 8px #FFF;
}

.bar{border-radius:15px; box-shadow:2px 4px 8px #FFFFFF;}

calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
        return document.getElementById(id);
}
function f_calc(id,n)
{
        if(n=='ce')
        {
                init_calc(id);
        }
        else if(n=='=')
        {
                if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                {
                        eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                        calc_array[id][0] = '=';
                        $id(id+'_result').value=calcul;
                        calc_array[id][2]=calcul;
                        calc_array[id][3]=0;
                }
        }
        else if(n=='+-')
        {
                $id(id+'_result').value=$id(id+'_result').value*(-1);
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
                pas_ch = 1;
        }
        else if(n=='nbs')
        {
                if($id(id+'_result').value<10 && $id(id+'_result').value>-10)
                {
                        $id(id+'_result').value=0;
                }
                else
                {
                        $id(id+'_result').value=$id(id+'_result').value.slice(0,$id(id+'_result').value.length-1);
                }
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_result').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_result').value;
                }
        }
        else
        {
                        if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                        {
                                eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                                $id(id+'_result').value=calcul;
                                calc_array[id][2]=calcul;
                                calc_array[id][3]=0;
                        }
                        calc_array[id][0] = n;
        }
        if(pas_ch==0)
        {
                calc_array[id][1] = 1;
        }
        else
        {
                pas_ch=0;
        }
        document.getElementById(id+'_result').focus();
        return true;
}
function add_calc(id,n)
{
        if(calc_array[id][1]==1)
        {
                $id(id+'_result').value=n;
        }
        else
        {
                $id(id+'_result').value+=n;
        }
        if(calc_array[id][0]=='=')
        {
                calc_array[id][2] = $id(id+'_result').value;
                calc_array[id][3] = 0;
        }
        else
        {
                calc_array[id][3] = $id(id+'_result').value;
        }
        calc_array[id][1] = 0;
        document.getElementById(id+'_result').focus();
        return true;
}
function init_calc(id)
{
        $id(id+'_result').value=0;
        calc_array[id] = new Array('=',1,'0','0',0);
        document.getElementById(id+'_result').focus();
        return true;
}
function key_detect_calc(id,evt)
{
        if((evt.keyCode>95) && (evt.keyCode<106))
        {
                var nbr = evt.keyCode-96;
                add_calc(id,nbr);
        }
        else if((evt.keyCode>47) && (evt.keyCode<58))
        {
                var nbr = evt.keyCode-48;
                add_calc(id,nbr);
        }
        else if(evt.keyCode==107)
        {
                f_calc(id,'+');
        }
        else if(evt.keyCode==109)
        {
                f_calc(id,'-');
        }
        else if(evt.keyCode==106)
        {
                f_calc(id,'*');
        }
        else if(evt.keyCode==111)
        {
                f_calc(id,'');
        }
        else if(evt.keyCode==110)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==190)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==188)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==13)
        {
                f_calc(id,'=');
        }
        else if(evt.keyCode==46)
        {
                f_calc(id,'ce');
        }
        else if(evt.keyCode==8)
        {
                f_calc(id,'nbs');
        }
        else if(evt.keyCode==27)
        {
                f_calc(id,'ce');
        }
        return true;
}

Scientific Calculator

.bar{border-radius:12px; background-color:#69C; box-shadow:2px 2px 6px #FFFFFF; border:ridge; border-color:#FFFFFF;}
.cos{border-radius:12px; background-color:#000000; box-shadow:2px 2px 4px #FFFFFF; color:#FFFFFF; border:ridge;}
.del{border-radius:12px; background-color:#F00; box-shadow:2px 2px 4px #FFFFFF; border:ridge; border-color:#CCC;}
.num{border-radius:12px; background-color:#FFF; box-shadow:2px 2px 4px #FFFFFF; border:ridge;}
.num:hover{border:none; border-radius:5px; background-color:#CCFFFF; transition:ease-out 0.2s}
.del:hover{border:none; border-radius:5px; background-color:#F69; transition:ease-out 0.2s}
.cos:hover{border:none; border-radius:5px; background-color:#99C; transition:ease-out 0.2s}

function addChar(input, character) {
if(input.value == null || input.value == "0")
  input.value = character
else
  input.value += character
}

function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)}

function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
 input.value = "-" + input.value
}

function compute(form) {
 form.display.value = eval(form.display.value)
}

function square(form) {
 form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
 for (var i = 0; i < str.length; i++) {
  var ch = str.substring(i, i+1)
  if (ch < "0" || ch > "9") {
   if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
    && ch != "(" && ch!= ")") {
    alert("invalid entry!")
    return false
    }
   }
  }
  return true
}

Sample !

AS Program's

Thursday 22 March 2018

CALCULATOR :

Prompt Calculator

4-Function Calculator

All-Function Calculator

Scientific Calculator

Sample !

No comments:

Post a Comment

Animations :