Last active
August 5, 2016 13:27
-
-
Save matt-barker/6562e79577ce035f4adac170d5837dc1 to your computer and use it in GitHub Desktop.
Calculator gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>/</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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)); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment