Create A Calculator Using JavaScript CSS HTML

AS we all know that mathematics is very important for us and we can create any calculation using calculator and we can also create and develop calculator by using all of the programming language like C, C++, Java, etc. bt today we willl give the Calculator which is made by HTML CSS and JavaScript.


You can easily use calculator on your Blog/website very easily.This Calculator is made by using JavaScript, CSS, HTML.

Live Demo

Codes of  Calculator 

<style>
/*----- Calculator By www.widgetgenerators.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.widgetgenerators.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>

Use These Codes in Our HTML Editor

If Any Problem Comes, Ask in Comments