LpLXyX

Scumworth

10/9/2015 - 9:05 PM

LpLXyX.markdown

Rendered
Source

LpLXyX

A Pen by Daniel McNinch on CodePen.

License.

index.html

<head>
  <title>Woodculator</title>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bevan">
</head>
<body>
<span id="title-span"><h1>Created for freeCodeCamp</h1>
</span>

<div id="container">
    <div class="row">
      <div class="col-xs-2"></div>
      <div id="displayWindow" class="col-xs-8 well">
      </div>
      <div class="col-xs-2"></div>
    </div>
    <div class="row">
      <div class="col-xs-6">
        <button type="button" class="btn btn-block" id="clear-btn">clear</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="percent-btn">%</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="divide-btn">/</button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="seven-btn">7</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="eight-btn">8</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="nine-btn">9</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="multiply-btn">x</button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="four-btn">4</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="five-btn">5</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="six-btn">6</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="minus-btn">-</button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="one-btn">1</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="two-btn">2</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="three-btn">3</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="plus-btn">+</button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="zero-btn" >0</button>
      </div>
      <div class="col-xs-3">
        <button type="button" class="btn btn-block" id ="point-btn">.</button>
      </div>
      <div class="col-xs-6">
        <button type="button" class="btn btn-block" id ="equal-btn">=</button>
      </div>
    </div>
</div>
</body>

script.js

$(document).ready(function() {
  var exp = 0;
  var display = 0;
  var wipeObj = {};
  var pointObj = {};
  var mathObj = {};
  $('#displayWindow').text(display);
  $('#equal-btn').click(function(){
    var solution = eval(exp);
    exp = solution.toString();
    display = exp;
    pointObj.point = false;
    wipeObj.wipe = true;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(solution.toPrecision(8));}
  });
  
  $('#clear-btn').click(function() {
    display = 0;
    exp = 0;
    pointObj.point = false;
    $('#displayWindow').text(display);   
  });
  
  $('#percent-btn').click(function(){
    if (exp !== 0 && mathObj.sign !== true) {
      exp = display/100;
      display = exp;
      pointObj.point = false;
      wipeObj.wipe = false;
      if (display.length <= 14) {$('#displayWindow').text(display);}
      else {$('#displayWindow').text(display.substring(0,14));}
    }
  });
  
  $('#divide-btn').click(function(){
    if (exp !== 0 && mathObj.sign !== true) {
      exp += '/';
      wipeObj.wipe = true;
      pointObj.point = false;
      mathObj.sign = true;
    }
  });
  
  $('#multiply-btn').click(function(){
    if (exp !== 0 && mathObj.sign !== true) {
      exp += '*';
      wipeObj.wipe = true;
      pointObj.point = false;
      mathObj.sign = true;
    }
  });
  
   $('#minus-btn').click(function(){
    if (exp !== 0 && mathObj.sign !== true) {
      exp += '-';
      wipeObj.wipe = true;
      pointObj.point = false;
      mathObj.sign = true;
    }
  });
  
   $('#plus-btn').click(function(){
    if (exp !== 0 && mathObj.sign !== true) {
      exp += '+';
      wipeObj.wipe = true;
      pointObj.point = false;
      mathObj.sign = true;
    }
  });
  
  $('#point-btn').click(function() {
    if (pointObj.point !== true) {
      display += '.';
    }
    if (pointObj.point !== true) {
        exp += '.';
        pointObj.point = true;
    }
    if (display === 0 || wipeObj.wipe == true) {
      display = "0.";
      wipeObj.wipe = false;
    } 
    
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
  $('#one-btn').click(function() {
    if (exp === 0) {
      exp = '1';
    } else {
      exp += '1';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '1';
    } else {
      display += '1';
      mathObj.sign = false;
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
    
  });
 
  $('#two-btn').click(function() {
    if (exp === 0) {
      exp = '2';
    } else {
      exp += '2';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '2';
    } else {
      display += '2';
      mathObj.sign = false;
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  

  $('#three-btn').click(function() {
    if (exp === 0) {
      exp = '3';
    } else {
      exp += '3';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '3';
    } else {
      display += '3';
      mathObj.sign = false;
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });

  $('#four-btn').click(function() {
    if (exp === 0) {
      exp = '4';
    } else {
      exp += '4';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '4';
    } else {
      display += '4';
      mathObj.sign = false;
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
  $('#five-btn').click(function() {
    if (exp === 0) {
      exp = '5';
    } else {
      exp += '5';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '5';
    } else {
      display += '5';
      mathObj.sign = false;
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
  $('#six-btn').click(function() {
    if (exp === 0) {
      exp = '6';
    } else {
      exp += '6';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '6';
    } else {
      display += '6';
      mathObj.sign = false;
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
  $('#seven-btn').click(function() {
    if (exp === 0) {
      exp = '7';
    } else {
      exp += '7';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '7';
    } else {
      display += '7';
      mathObj.sign = false;
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
  $('#eight-btn').click(function() {
    if (exp === 0) {
      exp = '8';
    } else {
      exp += '8';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '8';
      wipeObj.wipe = false;
    } else {
      display += '8';
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
  $('#nine-btn').click(function() {
    if (exp === 0) {
      exp = '9';
    } else {
      exp += '9';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '9';
      wipeObj.wipe = false;
    } else {
      display += '9';
    }
    wipeObj.wipe = false;
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
  $('#zero-btn').click(function() {
    if (exp === 0) {
      exp = '0';
    } else {
      exp += '0';
      mathObj.sign = false;
    }
    if (display === 0 || wipeObj.wipe === true) {
      display = '0';
      wipeObj.wipe = false;
    } else {
      display += '0';
    }
    if (display.length <= 14) {$('#displayWindow').text(display);}
    else {$('#displayWindow').text(display.substring(0,14));}
  });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

body {
  background: url('https://farm8.staticflickr.com/7600/17270674212_9a680b3327_k.jpg');
}

.btn {
  background: url('https://farm1.staticflickr.com/717/20167178734_baf79aaa3b_z.jpg');
  margin: 6px;
  font-family: "Bevan";
  font-size: 14px;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
    background: url('https://farm1.staticflickr.com/717/20167178734_baf79aaa3b_z.jpg'); 
    
}

#displayWindow {
  font-family: "Bevan";
  font-size: 30px
}

#title-span {
  text-align: center;
  font-family: 'Bevan';
  color: gray;
}

#container {
  margin: 0 auto;
  width: 500px;
  text-align: center;
  background-image:   url('https://farm8.staticflickr.com/7782/18163062751_41e94ca2b9_b.jpg');
  height: 400px;
  padding: 30px;
}

#main-row {
  text-align: center;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

LpLXyX

LpLXyX