If you are learning javascript or you have learnt javascript and you want to make calculator

We know that to make calculator using any programming language is one of the basic need to know how strong your coding skills about that language

Here i am going to share javascript code to make calculator

if you have basic knowledge about javascript then easily you can understand my javascript code

     <script>
     class Yashpalcalculator{ 
     id(e1){
     return document.getElementById(e1) ;
    }
    create(e2){
       return document.createElement(e2);
    }
    body(e){
        return document.appendChild(e);
    }
    shownow(e3){
       return document.body.appendChild(e3);
    }
    hide(){
    document.getElementById("error").style.display="none";}
    message(error){
    this.id("error").style.display="block";
    this.id("error").style.color="white";
    this.id("error").innerHTML=error; 
    setTimeout(this.hide, 3000);}
    clickme(e){
    this.message("you have clicked" + "&nbsp;"+   e.value);}
    style(e,e1,e2,e3,e4,e5,e6,e7,e8,e9){
    e.style.borderRadius=e1;
    e.style.borderTop=e2 + " solid white";
    e.style.borderLeft=e3 + " solid white";
    e.style.borderRight=e4 + " solid white";
    e.style.borderBottom=e5 + " solid white";
    e.style.backgroundColor="blue";
    e.style.marginTop=e6;
    e.style.marginLeft=e7;
    e.style.marginRight=e8;
    e.style.height=e9;
    }
    textarea(){
        document.body=this.create("body");
        document.body.style.width="100%";
        document.body.style.height="100%";
        document.body.style.backgroundColor="blue";
        document.body.style.overflow="hidden" ;
        var div1=this.create("div");
        div1.style.position="fixed";
        div1.setAttribute("id","error");
         if(this.w>1000 && this.h>600){
        div1.style.top="90%";
        div1.style.left="45%";
         }
        else{
          div1.style.top="90%";
        div1.style.left="35%"; 
        }
        div1.style.textAlign="center";
        div1.style.fontWeight="bold";
        div1.style.display="none";
        this.shownow(div1);
        var div=this.create("div");
        if(this.w>1000 && this.h>600)
        this.style(div,"7px","5px","5px","2px","2px","5%","30%","30%","75%");
        else{
           this.style(div,"7px","5px","5px","2px","2px","10%","0%","7%","75%");  
        }
        div.setAttribute("id","div");
        div.style.textAlign="center";
        var input=this.create("INPUT");
        input.style.marginTop="8%";
        input.setAttribute("id","input");
        input.style.width="75%";
        input.style.paddingLeft="10px";
        input.style.fontWeight="bold";
        input.style.fontSize="25px";
        input.setAttribute("spellcheck","false");
        input.style.height="13%";
        input.style.backgroundColor="black";
        input.style.color="white";
        input.placeholder="yashpal calculatore";
        input.style.outline="none";
        input.style.borderTop="4px solid white";
       input.style.borderLeft="4px solid white";
       input.style.borderRight="2px solid white";
       input.style.borderBottom="2px solid white";
        input.style.borderRadius="7px";
        div.append(input);
        this.shownow(div);   }
    switchme(e){
        switch(e){
            case 10: return ".";
            case 11:return "+";
            case 12:return "-";
            case 13:return "*";
            case 14:return "/";
            case 15:return "=";
            case 16:return "clear";
        }  }
    loopbutton(){
        var j;
        for(var i=0;i<17;i++){
            if(i>0 && i%4==0)
            this.br();
            j=i;  
            if(i>9){
             i=this.switchme(i);
            }
        var button=this.create("button");
        if(i=="clear")button.setAttribute("onclick","clearr(this)");
        else
        button.setAttribute("onclick","clickme(this)");
        button.innerHTML=i;
        button.value=i;
        button.style.display="inline-block";
        button.style.marginTop="3%";
        button.style.width="15%";
        button.style.backgroundColor="blue";
        button.style.color="white";
        button.style.fontWeight="bold";
        button.style.marginLeft="4px";
        button.style.height="10%";
        this.id("div").appendChild(button); 
        i=j;
        }  }
     br(){
     var br=this.create("br");
        this.id("div").appendChild(br);        }
    button(){
    this.br();
        this.loopbutton();  }
    constructor(){
        try{
        this.h=window.screen.availHeight ;this.w=window.screen.availWidth ;
      this.textarea();
      this.button();
        }
        catch(err){
            this.message(err.message);
        }
    }}
    cal=new Yashpalcalculator();
    function clickme(e){
    if(e.value!="="){
    cal.id("input").value=cal.id("input").value + e.value;
    cal.clickme(e);}
    else{
    if(cal.id("input").value!=""){
    try{
        cal.id("input").value=eval(cal.id("input").value);
        cal.message("your result is"  + "&nbsp;" + cal.id("input").value);
    }
    catch(err){
    cal.message("Bad expression");
    }
    }
    else
    cal.message("input field is empty");
    }
    }
    function clearr(e){
     cal.id("input").value="";
    }
    </script>

click here to see the demo

2 thoughts on “How to make calculator using pure javascript”

Leave a Reply

Your email address will not be published. Required fields are marked *