VALEEDANJUM

Ad 468 X 60

Monday, 18 March 2013

Widgets

How To Make A Calculator In HTML,JavaScript And Css Language

Posted by Unknown , 23:23 Be the first to comment!

How To Make A beautiful Calculator In HTML,JavaScript And Css Language


You can easily use calculator on your Blog/website very easily.This Calculator is made by using JavaScript, CSS, HTML.
-->
<!-- OUTER MARGIN


Calculator






How to Add This Calculator To Blog Or Web Page Copy below Code

<style>
/*----- Calculator By www.allinone789.blogspot.com ------ */

.btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
/*----- Calculator By www.allinone789.blogspot.com ------ */
</style>



  <script language='JavaScript'>
  <!--------------------------------------------------------------------
    Memory  = "0";      // initialise memory variable
    Current = "0";      //   and value of Display ("current" value)
    Operation = 0;      // Records code for eg * / etc.
    MAXLENGTH = 30;     // maximum number of digits before decimal!

function AddDigit(dig)          //ADD A DIGIT TO DISPLAY (keep as 'Current')
 { if (Current.indexOf("!") == -1)  //if not already an error
    { if (    (eval(Current) == 0)
              && (Current.indexOf(".") == -1)
         ) { Current = dig;
           } else
           { Current = Current + dig;
           };
      Current = Current.toLowerCase(); //FORCE LOWER CASE
    } else
    { Current = "Hint! Press 'AC'";  //Help out, if error present.
    };
   if (Current.indexOf("e0") != -1)
     { var epos = Current.indexOf("e");
       Current = Current.substring(0,epos+1) + Current.substring(epos+2);
     };
  if (Current.length > MAXLENGTH)
     { Current = "Aargh! Too long"; //don't allow over MAXLENGTH digits before "." ???
     };
   document.Calculator.Display.value = Current;
 }

function Dot()                  //PUT IN "." if appropriate.
 {
  if ( Current.length == 0)     //no leading ".", use "0."
    { Current = "0.";
    } else
    {  if (   ( Current.indexOf(".") == -1)
            &&( Current.indexOf("e") == -1)
          )
         { Current = Current + ".";
    };   };
  document.Calculator.Display.value = Current;
 }

function DoExponent()
 {
  if ( Current.indexOf("e") == -1 )
       { Current = Current + "e0";
         document.Calculator.Display.value = Current;
       };
 }

function PlusMinus()
 {
  if  (Current.indexOf("e") != -1)
    { var epos = Current.indexOf("e-");
      if (epos != -1)
         { Current = Current.substring(0,1+epos) + Current.substring(2+epos); //clip out -ve exponent
         } else
         { epos = Current.indexOf("e");
           Current = Current.substring(0,1+epos) + "-" + Current.substring(1+epos); //insert -ve exponent
         };
    } else
    {  if ( Current.indexOf("-") == 0 )
         { Current = Current.substring(1);
         } else
         { Current = "-" + Current;
         };
       if (    (eval(Current) == 0)
            && (Current.indexOf(".") == -1 )
          ) { Current = "0"; };
    };
  document.Calculator.Display.value = Current;
 }

function Clear()                //CLEAR ENTRY
 { Current = "0";
   document.Calculator.Display.value = Current;
 }

function AllClear()             //Clear ALL entries!
 { Current = "0";
   Operation = 0;                //clear operation
   Memory = "0";                  //clear memory
   document.Calculator.Display.value = Current;
 }

function Operate(op)            //STORE OPERATION e.g. + * / etc.
 {
 if (Operation != 0) { Calculate(); }; //'Press "=" if pending operation!
 // note that design is not good for showing *intermediate* results.

  if (op.indexOf("*") > -1) { Operation = 1; };       //codes for *
  if (op.indexOf("/") > -1) { Operation = 2; };       // slash (divide)
  if (op.indexOf("+") > -1) { Operation = 3; };       // sum
  if (op.indexOf("-") > -1) { Operation = 4; };       // difference

  Memory = Current;                 //store value
  // note how e.g. Current.value gives neither error nor value! ***
  Current = "";
  document.Calculator.Display.value = Current;
 }

function Calculate()            //PERFORM CALCULATION (= button)
 {
  if (Operation == 1) { Current = eval(Memory) * eval(Current); };
  if (Operation == 2)
    { if (eval(Current) != 0)
      { Current = eval(Memory) / eval(Current)
      } else
      { Current = "Aargh! Divide by zero"; //don't allow over MAXLENGTH digits before "." ???
      }
    };
  if (Operation == 3) { Current = eval(Memory) + eval(Current); };
  if (Operation == 4) { Current = eval(Memory) - eval(Current); };
  Operation = 0;                //clear operation
  Memory = "0";                  //clear memory
  Current = Current + "";       //FORCE A STRING!
  if (Current.indexOf("Infinity") != -1)        //eg "1e320" * 1
    { Current = "Aargh! Value too big";
    };
  if (Current.indexOf("NaN") != -1)        //eg "1e320" / "1e320"
    { Current = "Aargh! I don't understand";
    };
  document.Calculator.Display.value = Current;
  // NOTE: if no operation, nothing changes, Current is left the same!
 }

function FixCurrent()
 {
  Current = document.Calculator.Display.value;
  Current = "" + parseFloat(Current);
  if (Current.indexOf("NaN") != -1)
    { Current = "Aargh! I don't understand";
    };
  document.Calculator.Display.value = Current;
 }

  //--------------------------------------------------------------->
  </script>

</head>
<body>

<div align="center"><table width="95%"><tr><td> <!-- OUTER MARGIN -->
<font face="Verdana, Arial, Helvetica">

<div align="center"><table border="0"><tr><td width="15%" align="center"><p>&nbsp;</p>
<div align="center">
<FORM name="Calculator">
<table width="30%" border="4" bgcolor="#809FFE"><tr>      <!--OUTER MARGIN OF CALCULATOR-->
<td colspan="2" align="center">

  <p><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3">Calculator</font></b><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3"><br>
    </font>
          <font face="Courier" size="5">
          <input type="text" maxlength="40" size="25" name="Display" onChange="FixCurrent()">
                  </font></b>    </p>
  </td></tr>
<tr><td width="65%" align="center">                   <!--left panel------>

<br><table><tr>
  <td><input type="button" class="btnLogin" name="seven" value="   7    " OnClick="AddDigit('7') "></td>
  <td><input type="button" class="btnLogin" name="eight" value="   8    " OnClick="AddDigit('8')"></td>
  <td><input type="button" name="nine"  class="btnLogin" value="   9    " OnClick="AddDigit('9')"></td>
</tr><tr>
  <td><input type="button" name="four"  class="btnLogin" value="   4    " OnClick="AddDigit('4')"></td>
  <td><input type="button" name="five"  class="btnLogin" value="   5    " OnClick="AddDigit('5')"></td>
  <td><input type="button" name="six"  class="btnLogin"  value="   6    " OnClick="AddDigit('6')"></td>
</tr><tr>
  <td><input type="button" name="one"  class="btnLogin" value="   1    " OnClick="AddDigit('1')"></td>
  <td><input type="button" name="two"  class="btnLogin" value="   2    " OnClick="AddDigit('2')"></td>
  <td><input type="button" name="three"  class="btnLogin"  value="   3    " OnClick="AddDigit('3')"></td>
</tr><tr>
  <td><input type="button" name="plusmin"  class="btnLogin" value="  +/-  " OnClick="PlusMinus()"></td>
  <td><input type="button" name="one"  class="btnLogin" value="   0    " OnClick="AddDigit('0')"></td>
  <td><input type="button" name="two"  class="btnLogin" value="    .    " OnClick="Dot()"></td>
</tr>
</table><br/>


</td>                                   <!--end left panel-->
<td width="35%" align="center">                     <!--right panel----->

<br><table><tr>
  <td><input type="button" name="clear"  class="btnLogin" value="    C     " OnClick="Clear()"></td>
  <td><input type="button" name="AC"  class="btnLogin" value="   AC    " OnClick="AllClear()"></td>
</tr><tr>
  <td><input type="button" name="mul"  class="btnLogin" value="     *     " OnClick="Operate('*')"></td>
  <td><input type="button" name="div"  class="btnLogin" value="     /      " OnClick="Operate('/')"></td>
</tr><tr>
  <td><input type="button" name="add"  class="btnLogin" value="    +     " OnClick="Operate('+')"></td>
  <td><input type="button" name="sub"  class="btnLogin" value="     -      " OnClick="Operate('-')"></td>
</tr><tr>
  <td><input type="button" name="result"  class="btnLogin" value="     =    " OnClick="Calculate()"></td>
  <td align="right"><input type="button" name="exp"  class="btnLogin" value="  E X P  " OnClick="DoExponent()"></td>
</tr></table><br/>


</td>                                   <!--end right panel-->
</tr></table>                          <!--END OUTER MARGIN CALC------->
</FORM></div>
-->

SHARE THIS POST   

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Labels:

0 comments:

Subscribe to: Post Comments (Atom)