Javascript-Calculator With Numeric Keyboard

-

Javascript-Calculator With Numeric Keyboard
calc.html
---------------

<html>
    <head>
        <script type="text/javascript" src="calc.js">
        </script>

         <link rel=stylesheet href="calc.css">
    </head>
    <body>
        <div id=st align=center>
            <form>
                <table>   

                     <tr>
                        <td colspan="4"><div id=top align=center>
                                <b>Javascript Calculator By Anandhu Arjunan</b>

                             </div></td>

                     </tr>

                     <tr>
                        <td colspan="4"><input type="number" id=num></td>

                     </tr>
                    <tr>
                        <td><input type=button  id=nums value=1 name=- onclick="assN(1)"></td>
                        <td ><input type=button  id=nums value=2 onclick="assN(2)"></td><td ><input type=button value=3 onclick="assN(3)" id=nums></td>  
                        <td><input type=button id=ope value=+ name=+ onclick="addition()"></td>

                     </tr>

                     <tr>
                        <td ><input type=button value=4  id=nums onclick="assN(4)"></td><td ><input type=button value=5 name=- onclick="assN(5)"  id=nums></td>
                        <td ><input type=button value=6  id=nums onclick="assN(6)"></td>  <td ><input type=button id=ope value=- name=- onclick="subtraction()"></td>
                    </tr>

                     <tr>
                        <td ><input type=button id=nums value=7 onclick="assN(7)"></td>

                         <td ><input type=button  id=nums value=8 onclick="assN(8)"></td>
                        <td ><input type=button  id=nums value=9 onclick="assN(9)"></td>
                        <td><input type=button value=* id=ope name=* onclick="multiplication()"></td>

                     </tr>
                    <tr>
                        <td><input type=button value=n! onclick="fact()"></td>
                        <td><input type=button  id=nums value=0 onclick="assN(0)"></td>
                        <td><input type=button value=c onclick="clr()"></td><td><input type=button id=ope value=/ name=/ onclick="division()"/></td>

                     </tr>

                     <tr>

                         <td><input type=button value=^ onclick="expon()"></td>    
                        <td><input type=button value=sqrt onclick="sqrtf()"></td>  
                        <td><input type=button value=pi onclick="assN(Math.PI)"></td>     <td><input type=button value=% id=ope onclick="remainder()"></td>

                     </tr>     

                     <tr>
                        <td colspan="4"><input type="button" id="eq" value="=" onclick="findq()"></td>

                     </tr>
                </table>
            </form>
        </div>

     </body>

</html>
calc.js
----------------
var num1,num2,sign,temp;
        function addition(){
         
          clrnm2();
            num1=document.getElementById('num').value;
            document.getElementById('num').value="";
            sign="+";
           document.getElementById('num').focus();

         }  function subtraction(){
             clrnm2();
            num1=document.getElementById('num').value;
            document.getElementById('num').value="";
            sign="-";
           document.getElementById('num').focus();

         }  function multiplication(){
             clrnm2();
            num1=document.getElementById('num').value;
            document.getElementById('num').value="";
            sign="*";
           document.getElementById('num').focus();

         }  function division(){
              clrnm2();
            num1=document.getElementById('num').value;
            document.getElementById('num').value="";
            sign="/";
           document.getElementById('num').focus();

         }
            function remainder(){
              clrnm2();
            num1=document.getElementById('num').value;
            document.getElementById('num').value="";
            sign="%";
           document.getElementById('num').focus();

         }
             function expon(){
                clrnm2();
            num1=document.getElementById('num').value;
            document.getElementById('num').value="";
            sign="^";
           document.getElementById('num').focus();
            }
               function fact(){
                clrnm2();
            num1=document.getElementById('num').value;
                   ans=factorial();
            num1=ans;
                    document.getElementById('num').value=ans;
            }
            
            function findq(){

                 if(num2==null){
                    num2=document.getElementById('num').value;
                }

                 if(sign=="+"){
                   var ans=parseFloat(num1)+parseFloat(num2);
                    num1=ans;
                    document.getElementById('num').value=ans;

                    }
                else if(sign=="-"){
                            var ans=parseFloat(num1)-parseFloat(num2);
                    num1=ans;
                    document.getElementById('num').value=ans;

                         }
                else if(sign=="*"){
     var ans=parseFloat(num1)*parseFloat(num2);
                    num1=ans;
                    document.getElementById('num').value=ans;

                         }
                else if(sign=="/"){
                    
                   
                    if(document.getElementById('num').value=="0"){
                      alert("Cannot Divid By Zero");
                   document.getElementById('num').value="";
                       }
                    else{
                         var ans=parseFloat(num1)/parseFloat(num2);
                    num1=ans;
                    document.getElementById('num').value=ans;
                        
                    }
                    

                 }
                 else if(sign=="%"){
                     var ans=parseFloat(num1)%parseFloat(num2);
                    num1=ans;
                    document.getElementById('num').value=ans;

                 }
                 else if(sign=="^"){
                     
                
                     var ans=parseInt(Math.pow(parseFloat(num1),parseFloat(num2)));
                    
                    num1=ans;
                    document.getElementById('num').value=ans;
                }
               
            }

             
        function factorial(){
            var as=parseInt(num1);
            var fact=1;
            var int=1;
            for(i=1;i<=as;i++){
                fact=fact*i;
            }
            return fact;
        }
            
        function clrnm2(){
              if(num2==null){

                }
            else{
                num2=null;
            }
            return true;
        }
            function clr(){
                num1=num2=sign=temp="";
                    document.getElementById('num').value="";
            }
           
function assN(n){
    
    document.getElementById('num').value=document.getElementById('num').value+n;
    
    
    
}
function sqrtf(){
      document.getElementById('num').value=Math.sqrt(document.getElementById('num').value);

}

calc.css
--------------

 body{
                font-family: sans-serif;
            }
            input[type='number']{
                width: 509px;
                height: 50px;
                font-size: 20px;
                border:3px solid black;
                border-radius: 3px;

            }
            #eq{
                width: 509px;
            }
          input[type='button']{
                width:125px;
              height: 45px;
              
              background-color: black;
              color: white;
              font-size: 25px;
            }
            #st{
margin-top: 50px;
            }
#nums{
     background-color: dodgerblue;
              color: black;     font-size: 25px;
}
#ope{
     background-color: deeppink;
              color: black;
    font-size: 25px;
}
#top{;
    padding:20px;
    background-color: darkolivegreen;
    color:white;
    
}
#eq{
  background-color: white;
    color: black;
    border: 2px inset black;
    font-size: 30px;
}
#eq:hover{
  background-color: black;
    color: white;
    font-size: 30px;
    border: 2px inset white;
}

Output
-----------------------

Comments

Post a Comment

Popular posts from this blog

Introduction to C++ Programming Language

-
Image
Introduction to C++ Programming Language   C++ is a general-purpose programming language. It has imperative, object-oriented and generic programming features, while also providing facilities for low-level memory manipulation. It was designed with a bias toward system programming and embedded, resource-constrained and large systems, with performance, efficiency and flexibility of use as its design highlights. C++ has also been found useful in many other contexts, with key strengths being software infrastructure and resource-constrained applications,including desktop applications, servers (e.g. e-commerce, web search or SQL servers), and performance-critical applications (e.g. telephone switches or space probes).C++ is a compiled language, with implementations of it available on many platforms. Many vendors provide C++ compilers, including the Free Software Foundation, Microsoft, Intel, and IBM. C++ is standardized by the International Organization for Standardization (IS...
View Full

The Assembly Process Of 8086 Microprocessor-Two Pass Assembling Steps

-
Image
The Assembly Process Of 8086 Microprocessor Assembler Assembler is a translator which converts Assembly language into object file (Machine Codes ) It translate each of the instruction to its corresponding object code line by line Assembling Steps Two Pass Assembling Steps Two Pass Assembling means that the assembler passes  through the source code two times Step1: On First Pass             Assembler Look for the labels and defintions and pass them into the symbol table for later use             after assigning memory address to the labels Step2: On Second Pass            Normal translation of source code into object code occurs
View Full

Installing 8086 Assembler on a Computer

-
Image
Installing 8086 Assembler In Windows     Step1:Download emu8086 software from http://www.emu8086.com/files/emu8086v408r11.zip Step2:open it after installation and start writing your codes Step3:Click Compile to assemble it -------------------------------------------------------------------- Installing 8086 Assembler In Ubuntu     for the Linux Ubuntu users you type the following code in the terminal and hit enter to download the Dos Box for the Ubuntu:   sudo apt-get update  sudo apt-get install dosbox Download the Tasm folder from https://drive.google.com/file/d/0BxFfQqBvZCltMHdNbFFCZVJkUlE/view?usp=sharing After downloading the TASM Folder for the linux extract the file to any destination folder and open it. You can mount as:   mount c /home/your extracted location for assembling a program file within the Tasm folder type tasm filename.asm for linking the program file to generate object tlink filen...
View Full