2
\$\begingroup\$

I am new to Javascript and jQuery. I made a calculator by looking at other calculators, codes. I don't know so much Javascript methods, so I stick to eval method because I have no idea to produce answer in another way. I didn't create any function. Instead I lock buttons with Booleans changed by pushing buttons.

I think that there is an order that you must follow, I mean you must type number after operator or dot button is pushed or you must type number + operator + number to type dot button two times and you must type operator button at least once to be able to push equal button v.s. but there is difficulty in designing remove buttons logic and adding new feature. So I want to hear something about my algorithm, whether use eval or don't and how I can add new features to calculator. I mean, should I continue designing calculator with this logic or turn it into normal calculator that checking every situation each time and find solution.

$(document).ready(function()  {
  var sayac = 0;  // number of operators in screen
  var lastdot = 0; // last index of dot button
  var opeleman = "+-*/";
  var yazi=""; // text on screen
  var yedek="";  // container for returning last value after equal is pushed
  var oprtknm = []; // indexes of operators 
  var   sayi=false, // changing by number buttons to lock other buttons
      noktakilit=true, // lock dot buttons if it is pushed 
      sonuckilit=false; // lock of equal buttons. open if operator is typed


  // clicking on number buttons
  $(".sayi").on("click", function() {
    // open locks of other buttons 
     if (yazi.length < 22) {
          yazi += $(this).text();
          $(".ustekran").text(yazi);
          sayi=true;
    } 
  });

  // clicking on operator buttons
  $(".operator").on("click", function() {
     // open equal and dot buttons lock if number is pushed before
      if (sayi)  {
        // checking if equal is pushed if so get back last value
         if(yazi.length < 1) {
          yazi = yedek;
        }
        // insert its index in array to use in comparison indexes of it, dot
      // to change booleans when C is pushed and open locks of dot, equal
      // and make sayi false to put you in situation you must type number     button
         yazi += $(this).text();
         $(".ustekran").text(yazi);        
         oprtknm.push(yazi.length);
         sayi = false;
         noktakilit = true;
         sonuckilit = true;
         sayac++;
    }
  });

  // clicking on dot buttons
   $(".nokta").on("click", function() {
       // lock himself until operator button is pushed
       if(yazi.length > 0)  {

          if (sayi && noktakilit)   {

               yazi += $(this).text();
               $(".ustekran").text(yazi);
               sayi = false;
               noktakilit = false;
         }
       }
   });

  // clicking on equal buttons
   $(".sonuc").on("click", function() {

  // checking if you type at least 1 operator 
      if (sayi && sonuckilit)  {

            var son = eval(yazi); 
            yazi = "" + son;     
  // removing digits more than five after dot 
            var dotind = yazi.indexOf (".") ;


            if ( dotind >-1 ) {
              yazi= yazi.slice(0, dotind+5);
            }

            if (yazi.length > 22) {
                yazi = yazi.substring(0, 22);
            }
     // lock itself until operator is pushed
                yedek = yazi;
                $(".ustekran").text(yazi); 
                sonuckilit = false;
                noktakilit = true;     

          if (!isFinite(son) || isNaN(son)) {      
            sayi = false;
            noktakilit = true;
          }           
            oprtknm = [];
            sayac = 0;
            yazi = "";
       }
   });

  // clicking on CE button
   $("#tamsilme").on("click", function() {
    // all booleans return their first state 
       yazi = "";
       sayi=false;
       noktakilit=true;
       sonuckilit = false;
       oprtknm = [];
       sayac=0;
       $(".ustekran").text(yazi);
  });

  // REMOVİNG SİNGLE CHARACTER
  $("#teksilme").on("click", function() {
    if(yazi.length > 0) {
           var soneleman = yazi[yazi.length-1];
        // removing dot 
          if (soneleman === ".") 
             { 
                 sayi = true;           
                 noktakilit = true;
             }
       // removing operators
          else  if (opeleman.indexOf(soneleman) >-1)         { 
           // changing dot operators lock   
// investigate that whether last dot come after last second operator 
             lastdot =  yazi.lastIndexOf(".");

             if(sayac > 1) {
                  if ( lastdot > 
                       oprtknm[sayac-2]-1 ) { 
                       noktakilit = false;
                  }
              }
         // text contain one operator and one dot 
              else if (lastdot > -1) {
                noktakilit = false;
              }         
            //  changing equal operators lock if there is no other operator 
              if(sayac < 2) {
                  sonuckilit = false;
              }  
              sayi = true;
              sayac--;
              oprtknm.pop();
         }
     // removing number 
         else {  
    // if number immedieatly come after operator or dot, they are locked 
              if(yazi.length > 2) {
                  if( isNaN ( yazi[yazi.length-2]) ) {
                     sayi = false;
                  }
              }
         } 
         yazi = yazi.slice(0,-1);     
         $(".ustekran").text(yazi);
   }  
 }); 
            }) ;
body {
      font-family: 'Comic Sans Ms', sans-serif;
      background:#133;
        -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
      width:100%;
      height:100%;
    }

.hesapmakine {
  display:block;
  position:relative;
  width:50%;  
  margin-top: 5%; 
  margin-right: auto;
  margin-left: auto;
  user-select: none;

}

.ekran {

  position:relative;
  background: #fa3;
  padding : 20px;
  height:140px;
  border: 5px solid rgba(#559,0.5);
  border-radius: 25px;
   box-shadow: 0px 5px 20px rgba(#000, 0.5);
}

.ustekran {
  padding: 10px 15px 0px 0px;
  color: #121;
  align-self: center;
  background: #ede;
  width:90%;
  height:80px;
  border: 5px solid rgba(#363,0.5);
   box-shadow: 0px 5px 20px rgba(#000, 0.5);
  border-radius: 20px; 
  margin: auto;
  text-align:right;
  font-size:40px;
}

.hesap {
  display:inline-block; 
  background:#c68945;
  position:relative;  
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  border-radius: 25px;
  box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #634422;

}

button{

  float: left;
  background: #1f1f2e;
  margin: 10px;
  width:80px;
  height:80px;
  border-radius:25%;

  font-size:35px;
  color:#cfa;
  outline: none;
   box-shadow: 0px 3px 0px 0px #222121, inset -1px -3px 10px 1px #515151;
}

button:hover {
  background:#6f3;
  color: #313;
}

button:active {
   transform: scale(1.2,1.2);

}

.silme {
  background: #35d;
  align-self: center;
  color:#fa7;
  font-size:25px;
  width:160px;
  height:80px;
  margin-left:25px;
  border-radius:10px;
}
.silme:hover {
  background: #f21;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="container-fluid">

       <div class="hesapmakine">

          <div class="ekran">
            <div class="ustekran">           
            </div >
          </div >   

        <div class="hesap">
          <button class="sayi"><b>1</b></button>
          <button class="sayi"><b>2</b></button>
          <button class="sayi"><b>3</b></button>
          <button class="operator"><b>/</button>
          <button class="operator"><b>*</b></button>           </br>
          <button class="sayi"><b>4</b></button>
          <button class="sayi"><b>5</b></button>
          <button class="sayi"><b>6</b></button>
          <button class="operator"><b>+</b></button>
         <button class="operator"><b>-</b></button>
            </br>
          <button class="sayi"><b>7</b></button>
          <button class="sayi"><b>8</b></button>
           <button class="sayi"><b>9</b></button>           
          <button class="nokta"><b>.</b></button>
          <button class="sonuc"><b>=</b></button>
         </br>
          <button class="sayi"><b>0</b></button>
          <div>
   <button class="silme" id="tamsilme"><b>CE</b></button>
   <button class="silme" id="teksilme"><b>C</b></button>
          </div>  
          </div>
        </div >

   </div>
</body>

\$\endgroup\$
  • 1
    \$\begingroup\$ Comic Sans for a calculator? Please don't. \$\endgroup\$ – 200_success Oct 3 '16 at 0:42
  • \$\begingroup\$ The non-english variable names makes reading and thus reviewing the code very difficult. \$\endgroup\$ – RoToRa Oct 5 '16 at 10:22
  • \$\begingroup\$ so i added informations next them. and i couldnt find eng word matching their meaning exactly. what do you propose for changing these names to english. I mean for those two consecutive word like sayikilit. kilit = lock , sayi = number , nokta = dot , sonuc = equal @RoToRa \$\endgroup\$ – yuga Oct 5 '16 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.