<div class="container-fluid calculator">
    <h2 class="text-center">FCC</h2>
    <h4 class="text-center">Electronic Calculator</h4>
    <div class="row row-centered">
      <div class="screen col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">

      </div>
    </div>

    <div class="row row-centered">
      <div class="button col-md-2 col-xs-2">AC</div>
      <div class="button col-md-2 col-xs-2">CE</div>
      <div class="button col-md-2 col-xs-2">%</div>
      <div class="button col-md-2 col-xs-2">/</div> 
    </div>
    <div class="row row-centered">
      <div class="button col-md-2 col-xs-2">7</div>
      <div class="button col-md-2 col-xs-2">8</div>
      <div class="button col-md-2 col-xs-2">9</div>
      <div class="button col-md-2 col-xs-2">*</div> 
    </div>
    <div class="row row-centered">
      <div class="button col-md-2 col-xs-2">4</div>
      <div class="button col-md-2 col-xs-2">5</div>
      <div class="button col-md-2 col-xs-2">6</div>
      <div class="button col-md-2 col-xs-2">-</div> 
    </div>

    <div class="row row-centered">
      <div class="col-md-9 col-xs-9">
        <div class="row row-centered">
          <div class="buttonBottom col-md-2 col-xs-2">1</div>
          <div class="buttonBottom col-md-2 col-xs-2">2</div>
          <div class="buttonBottom col-md-2 col-xs-2">3</div>
        </div>
        <div class="row row-centered">
          <div class="buttonBottom col-md-2 col-xs-2">0</div>
          <div class="buttonBottom col-md-2 col-xs-2">.</div>
          <div class="buttonBottom col-md-2 col-xs-2">=</div>
        </div>
      </div>
      <div class="col-md-3 col-xs-3">
        <div class="buttonBottom col-md-2 col-xs-2" style="margin-left:-5px; height:85px; line-height:85px;">+</div>
      </div>
    </div>

</div>

/*
font-family: 'Lobster', cursive;
font-family: 'Slabo 27px', serif;
*/

body{
  background-color: #005E6E;
}

.calculator{
  background-color: #F3EEE7;
  height: 410px;
  width:300px;
  margin-top: 50px;
  box-shadow: black 10px 10px 10px ;
  border: 5px solid black;
  border-top-left-radius:2em;
  border-top-right-radius:2em;
}

.calculator h2{
  font-family: 'Lobster', cursive;
  margin-top: 2px;
}

.calculator h4{
  font-family: 'Slabo 27px', serif;
  margin-top: -5px;
}

.screen{
  height: 35px;
  background-color: #C7C7B0;
  border-radius: 5%;
  color: black;
  font-size: 23px;
  text-align: right;
  vertical-align: middle;
  line-height: 35px;
}

.button{
  height: 30px;
  background-color: #3B3645;
  box-shadow: black 3px 3px 3px;
  border-radius: 20%;
  margin: 5px;
  margin-left: 17px;
  margin-top: 20px;
  border: 1px solid black;
  font-family: font-family: 'Slabo 27px', serif;
  font-weight: bold;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  cursor: pointer;
}

.buttonBottom{
  height: 30px;
  width:49px;
  background-color: #3B3645;
  box-shadow: black 3px 3px 3px;
  border-radius: 20%;
  margin: 5px;
  margin-left: 17px;
  margin-top: 20px;
  border: 1px solid black;
  font-family: font-family: 'Slabo 27px', serif;
  font-weight: bold;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  cursor: pointer;
}

$(document).ready(function(){
  //To print on the screen
  $(".button").click(function(){
    var t = $(this).text();
    var scr = $(".screen");
    if(t != 'AC' && t!= 'CE' && t!= '='){
      var S = scr.text();
      //console.log(S.length);
      if (S.length <= 21){
        S = S + t;
        scr.html(S);
      }
    }
    else{
      if(t == "AC"){
        scr.html("");
      }
      else if(t == "CE"){
        var S = scr.text();
        var res = S.slice(0, S.length-1);
        scr.html(res);
      }
    }
  });
  $(".buttonBottom").click(function(){
    var t = $(this).text();
    var scr = $(".screen");
    if(t != 'AC' && t!= 'CE' && t!= '='){
      var S = scr.text();
      //console.log(S.length);
      if (S.length <= 21){
        S = S + t;
        scr.html(S);
      }
    }
    else{
      var S = scr.text();
      var ans = eval(S);
      //console.log(ans); 
      scr.html(ans);
      
    }
  });
  
});