LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
 
 
CSS
body{
  margin:40px auto;
  background-color: #413F40;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cg fill="%413F40AC" fill-opacity="0.1"%3E%3Cpath fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/%3E%3C/g%3E%3C/svg%3E');
  color: #B2B2B2;
}

.calc-body{
  position:relative;
  margin:0 auto;
  width: 270px;
  height: 425px;
  border-radius: 3%;
  background-color: #191919;
  box-shadow: 0px 0px 15px 8px #0A0A0A;
}
.atm{
/*   padding-top: 3px; */
  font-size: 55px;
}
.hist{
/*   padding-top: 3px; */
  font-size:20px;
}
.clear{
  position: absolute;
  left: 1px;
}
.kdel{
  width:30px;
  height:30px;
}
.clear,.keydel{
  font-size: 23px;
  font-weight:bold;
/*   top:0; */
/*   margin-top:1px; */
/*   padding:0; */
  height:35px;
  color: rgba(255, 63, 27, 0.598);
}
.display{
  position:absolute; 
/*   padding-top:10px; */
  padding: 1px;
  width: 270px;
  height: 180px;
  border-bottom: 2px solid #1E1D1E;
  font-family: PT Sans;  
/*   background-color: #1E1D1E; */
}
.keyb{
  position: absolute;
  left:10px;
  top: 190px;
  
  
}
button{
  position: relative;
  margin: 5px auto;
  width: 60px;
  height: 45px;
  background-color: transparent;
  border: none; 
  justify-content: center;
  font-family: PT Sans;
  font-size: 30px;
/*   color: #F8F8F8; */
}
button:hover.numbers{
  background-color: rgba(10, 10, 10, 0.21);
}
button:focus{
  outline: none;
}
svg{
  position: absolute;
  top: 5px;
  left: 13px; 
  width: 35px;
  height: 35px; 
}
JS
/*object: Equation
  var:
    arrEq: keep equation
    arrNum: auxiliar of arrEq. Used to join received numbers;
    result: store operator's result.
  function:
    setAddEqu: Add values to equation
    setUpEqu: Remove the last element
    setDelEqu: Empty all arrays and var result
    operators: object of math functions.  
    getEq: return arrEq.
    getResult: Calculate by calcResult() and return result;
    calcResult: 
*/
var Equation = function(value){
  var arrNum = [];
  var arrEq = [];
  var arrRes = [];
  var result;
  
  var operators = {
    '+': function(a, b) { return parseFloat(a) + parseFloat(b) },
    '-': function(a, b) { return parseFloat(a) - parseFloat(b) },
    '/': function(a, b) { return parseFloat(a) / parseFloat(b) },
    '*': function(a, b) { return parseFloat(a) * parseFloat(b) }
  };
  
  this.setAddEqu = function(value){
    
    if(isNaN(value) && arrNum.length===0 && arrEq.length===0){
      return false;
    }
    if(value === "." && arrNum[arrNum.length-1]==="."){
      return false;
    }
    
    if(!isNaN(value) || value === "."){
      
      
      arrNum.push(value);
      
      if(!isNaN(arrEq[arrEq.length-1]) || arrEq[arrEq.length-1] === "."){
        arrEq.splice(arrEq.length-1,1,arrNum.join(''));
      }else{
        arrEq.push(arrNum.join(''));
      }
    }else{
      arrNum = [];
      if(!isNaN(arrEq[arrEq.length-1])){
       arrEq.push(value); 
      }else{  
       arrEq.splice(arrEq.length-1,1);
       arrEq.push(value);
       //Return false to inform an operator's update.
       return false; 
      }
    }
  };
  this.setUpEqu = function(){
    if(!isNaN(arrEq[arrEq.length-1]) || arrEq[arrEq.length-1] ==="."){
      arrNum.splice(arrNum.length-1,1);
      arrEq.splice(arrEq.length-1,1,arrNum.join(''));
    }else{
      return false;
      //arrEq.splice(arrEq.length-1,1);
    }
  };
  this.setDelEqu = function(){
    arrEq =[];
    arrNum = [];
    result = undefined;
  };
  
  this.getAtm = function(){
    return arrEq[arrEq.length -1];
  }
  
  this.getEq = function(){
    return arrEq.join('');
  };
  this.calcResult = function(){
    
    result === undefined?
      (result = operators[arrEq[arrEq.length-3]](arrEq[arrEq.length-4], arrEq[arrEq.length-2]))
    :(result = operators[arrEq[arrEq.length-3]](result, arrEq[arrEq.length-2]));
    return result;
    
  };
  this.getResult = function(){
    if(arrEq.length > 3){
      var calc = this.calcResult();
      if (Number.isInteger(calc)){
        return calc;
      }else{ return calc.toFixed(2);}
      
    }else{
      return undefined;
    }
    
  }
  
  
}

// events 


var equat = new Equation();
$(document).ready(function() {
  
  var cont = 0;
  var result;
  $('.numbers').on("click",function(){
    
    if(result!==undefined){
      result=undefined;
    }
    
    equat.setAddEqu($(this).val());
    
    
    var test = display('.atm');
    var test1 = display('.hist');
    
    if(test === false || test1 === false){
      equat.setDelEqu();
      cont = 0;
      result=undefined;
    }
    // $('.atm').text(equat.getAtm());
    //$('.hist').text(equat.getEq());
    
    
  });
  $('.oper').on("click",function(){
    
    if(cont===0 && $(this).val()==="="){
      return;   
    }
    
    if(cont===0 && result!==undefined){      
      equat.setAddEqu(result);
      result = undefined;
    }
    
    cont ++;    
    var test = equat.setAddEqu($(this).val());
    // console.log(test);
    
    if(test === false){
      cont=1;
    }
    
    if(cont>1){
      
      result = equat.getResult();
      
        
      $('.atm').text(result);  
      
      
      
      if($(this).val()==='='){
        equat.setDelEqu();
        cont = 0;
        $('.hist').empty();
                
      }else{
        var test = display('.hist');
        if(test === false){
          equat.setDelEqu();
          cont = 0;
          result=undefined;
        }
        //$('.hist').text(equat.getEq());
      }
      
    }else{
      var test = display('.hist');
      if(test === false){
        equat.setDelEqu();
        cont = 0;
        result=undefined;
      }
      //$('.hist').text(equat.getEq());
      
    } 
    
  });
  
  $('.keydel').on("click",function(){
    var foo = equat.setUpEqu();
    if(foo !== false){
      $('.atm').text(equat.getAtm());
      $('.hist').text(equat.getEq());  
    }
    
  });
  
  $('.clear').on("click",function(){
    equat.setDelEqu();
    $('.atm').empty();
    $('.hist').empty();
    cont = 0;
  });
})

function display(atri){
  //console.log(atri);
  //var value = equat.getEq();
  //console.log(value);
  if(atri === '.atm'){
    
    var value = equat.getAtm();
    
    if(value.length > 9 && value.length < 20){
      $(atri).css('font-size', '25px');
    }else if(value.length > 19 && value.length < 33){
      $(atri).css('font-size', '15px');
    }else if(value.length > 32 && value.length < 42){
      $(atri).css('font-size', '12px');      
    }else if(value.length > 41){
      $(atri).text("Sorry. Digit Limit Met");
      return false;     
    }else{
      $(atri).css('font-size', '55px');
    }  
    
    
  }
  
  if(atri === '.hist'){
    
    var value = equat.getEq();
    
    if(value.length > 24 && value.length < 33){
      $(atri).css('font-size', '15px');
    }else if(value.length > 32 && value.length < 50){
       $(atri).css('font-size', '10px');
    }else if(value.length > 49){
      $(atri).text("Sorry. Digit Limit Met");
      return false;
    }else{
      $(atri).css('font-size', '20px');
    }   
  }
  
  $(atri).text(value);
  
}
Term
Sat, 01/13/2018 - 07:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv