matt-barker
8/5/2016 - 1:15 PM

Calculator gist

Calculator gist

styles.css
content_copyfile_download
body {
  font-size: 2em;
  background-color: #e8e8e8;
}

.calculator {
  width: 320px;
  margin: 0 auto;
  background-color: #939393;
  padding: 10px 5px;
}

#screen {
  width: 311px;
  margin: 5px auto;
  background-color: rgb(206, 237, 253);
  height: 50px;
  text-align:right;
  font-size: 120%;
  
}

.row {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
}

.button {
  background: #e8e8e8;
  display: inline-block;
  width: 70px;
  height: 60px;
  text-align: center;
  margin: 5px 0px;
  border-radius: 5%;
  cursor: default;
  box-shadow: 0px 0px 2px; #727272;
}

.button:hover {
  background: #fff;

}

.button:active {
  box-shadow: 0 0px #fff;
  transform: translateY(2px);
  transform: scale(0.95);
}

.button-clear {
  width: 312px;
  border-radius: 0%;
}

.button p {
  -webkit-margin-before: 2px;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin: 12px 0px 0px 0px;
}
scripts.js
content_copyfile_download
$(document).ready(function(){
  //Clear the screen
  $("#screen").html("");
  
  //Button clicked
  $(".button").on('click', function() {
    //Grab the value of the clicked button from it's nested <p> element
    var theValue = $("p", this).html();
    //Check what was clicked
    //If it's the = button, then evaluate contents of the #screen div
    if (theValue === "=") {
      var theResult = eval($("#screen").html());
      //Put put the result of the evaluation in the #screen div
      $("#screen").html(theResult);
      //If it's the CLEAR button, clear the screen div
    } else if (theValue === "CLEAR") {
        $("#screen").html("");
        $("#screen").css("border", "0");
      //Check we're not going outside the width of the screen div
    } else if($("#screen").html().length >= 14) {
        $("#screen").css("border", "1px solid red");
    } else {
      //If it's just a number or operator button, append the value of it's <p> element on #screen
        $("#screen").append(theValue.substr(0,14));
    }
        
    });
    
  });
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  
  <!--------------------------------------HEAD------------------------------------>
  <head>
    
    <!---------meta tags---------->
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-----------FONTS------------>
    
    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i" rel="stylesheet">
    
    <!------------CSS------------->
    
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <title>Home</title>
    
  </head>
  
  <!--------------------------------------BODY------------------------------------>
  <body>
    
    <div class="calculator">
      <div id="screen">
      </div>
      <div class="row">
        <div class="button">
        <p>7</p>
        </div>
        <div class="button">
        <p>8</p>
        </div>
        <div class="button">
        <p>9</p>
        </div>
        <div class="button">
        <p>&#47;</p>
        </div>
      </div>
      

      <div class="row">
        <div class="button">
        <p>4</p>
        </div>
        <div class="button">
        <p>5</p>
        </div>
        <div class="button">
        <p>6</p>
        </div>
        <div class="button">
        <p>*</p>
        </div>
      </div>
      
      
      <div class="row">
        <div class="button">
        <p>1</p>
        </div>
        <div class="button">
        <p>2</p>
        </div>
        <div class="button">
        <p>3</p>
        </div>
        <div class="button">
        <p>-</p>
        </div>
      </div>
      
      
      <div class="row">
        <div class="button">
        <p>0</p>
        </div>
        <div class="button">
        <p>.</p>
        </div>
        <div class="button">
        <p>=</p>
        </div>
        <div class="button">
        <p>+</p>
        </div>
      </div>
      
      <div class="row">
        <div class="button button-clear">
        <p>CLEAR</p>
        </div>
      </div>
      
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="js/scripts.js"></script>
  </body>

</html>