Simple Calculator

calculator.markdown

Calculator

A simple calculator w/ HTML, CSS. & jQuery

A Pen by Chris Dodds on CodePen.

License.

index.html

<div class='container'>
  <div class='col-xs-4 col-md-offset-4' id='calculator'>
    <div class='row'>
      <h1 class='text-center'> Calculator</h1>
    </div>
    <div class='row' id='display'>
      <div class='col-xs-10' id='screen'>
      </div>
    </div>
    <div class='row calc-row' id='row1'>
      <div class='col-xs-4 calc-button text-center' id='clear'>Clear</div>
       <div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='divide'>/</div>
       <div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='multiply'>*</div>
    </div>
        <div class='row calc-row' id='row2'>
      <div class='col-xs-2 calc-button text-center' id='7'>7</div>
       <div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='8'>8</div>
       <div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='9'>9</div>
                 <div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='subtract'>-</div>
    </div>
            <div class='row calc-row' id='row3'>
      <div class='col-xs-2 calc-button text-center' id='4'>4</div>
       <div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='5'>5</div>
       <div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='6'>6</div>
                 <div class='col-xs-3 col-xs-offset-1 calc-button text-center' id='add'>+</div>
    </div>
                <div class='row calc-row' id='row4'>
      <div class='col-xs-2 calc-button text-center' id='1'>1</div>
       <div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='2'>2</div>
       <div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='3'>3</div>
                 <div class='col-xs-3 col-xs-offset-1 eq-button text-center' id='equal' >=</div>
    </div>
               <div class='row calc-row' id='row5'>
      <div class='col-xs-5 calc-button text-center' id='0'>0</div>
       <div class='col-xs-2 col-xs-offset-1 calc-button text-center' id='decimal'>.</div>
      </div>
    </div>
  </div>
</div>

script.js

$(document).ready(function () {
  var toCalc = '';
  $('#clear').click(function (){
    $('#screen').empty()
    toCalc = '';
  });
 
  $('.calc-button:gt(0)').click(function () {
    if ($('#screen').text().length < 12) {
      $('#screen').append($(this).text())
      toCalc += $(this).text();
    }else {
      $('#screen').text('Number Limit')
    }
  })
  $('.eq-button').click(function(){
    toCalc = eval(toCalc);
    $('#screen').empty();
    $('#screen').text(toCalc);
    toCalc = toCalc;
  });
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body {
  background-color: #264653;
  color: #264653;
}

#calculator {
  margin-top:100px;
  background-color: #E76F51;
  min-width:300px;
}

h1 {

  text-transform: uppercase;
}

#display {
  margin: 20px;
  border: 2px solid #264653;
  height:60px;
  padding: 9px 0px;
  font-size: 2em;
  background-color:#F4A261;
  color: #000;
  text-align:right;
}

.eq-button {
  height:120px; 
  margin-bottom:-60px;
  border: 2px solid #264653;
  padding-top:45px;
  font-weight:bold;
  font-size: 1.2em;
}
.eq-button:hover {
  background-color: #E9C46A;
}

.eq-button:active {
  background-color: #E9C46A;
  border: 4px solid #264653;
  font-size: 1.3em;
}

.calc-button {
  margin-bottom:20px;
  border: 2px solid #264653;
  height:50px;
  padding: 12px;
  font-weight: bold;
  font-size: 1.2em;
}

.calc-button:hover {
  background-color: #E9C46A;
}
.calc-button:active {
  background-color: #E9C46A;
  border: 4px solid #264653;
  font-size: 1.3em;
}

.calc-row {
  margin:0px 20px 0px ;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />