Skip to content

Instantly share code, notes, and snippets.

@bmikol

bmikol/index.html

Created February 7, 2017 21:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bmikol/07c429ca47b0ea29e457cc7e8c9ee331 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bmikol/07c429ca47b0ea29e457cc7e8c9ee331 to your computer and use it in GitHub Desktop.
Download ZIP
CareerFoundry Ex 2.11 Bonus
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Calculate!</title>
<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]-->
</head>
<body>
<div class="container">
<div class="controls">
<input type="text" id="screen" />
<div class="column">
<a class="seven button" href="#">7</a>
<a class="four button" href="#">4</a>
<a class="one button" href="#">1</a>
<a class="zero button" href="#">0</a>
</div><!-- end column -->
<div class="gap">
</div><!-- end gap -->
<div class="column">
<a class="eight button" href="#">8</a>
<a class="five button" href="#">5</a>
<a class="two button" href="#">2</a>
<a class="decimal button" href="#">.</a>
</div><!-- end column -->
<div class="gap">
</div><!-- end gap -->
<div class="column">
<a class="nine button" href="#">9</a>
<a class="six button" href="#">6</a>
<a class="three button" href="#">3</a>
<a class="equals-button" href="#">=</a>
</div><!-- end column -->
<div class="gap">
</div><!-- end gap -->
<div class="column">
<a class="divide func-button" href="#">/</a>
<a class="multiply func-button" href="#">*</a>
<a class="subtract func-button" href="#">-</a>
<a class="add func-button" href="#">+</a>
</div><!-- end controls -->
</div><!-- end column -->
</div><!-- end container -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
Raw
scripts.js
// Courtesy of https://code.tutsplus.com/tutorials/creating-an-incredible-jquery-calculator--pre-8813
$(document).ready(function(){
function resetCalculator(curValue) { // This function resets the value in #screen in many ways
$("#screen").val(curValue);
$(".func-button").removeClass("pendingFunction");
$("#screen").data("isPendingFunction", false); // Has a function been selected?
$("#screen").data("thePendingFunction", ""); // Which function was selected?
$("#screen").data("valueOneLocked", false); // Is 1st number complete? (after func-button activated)
$("#screen").data("valueTwoLocked", false); // Is 2nd number complete? (after equals-button activated)
$("#screen").data("valueOne", curValue); // First number in equation
$("#screen").data("valueTwo", 0); // Second number in equation
$("#screen").data("fromPrevious", false); // Has a calc just been performed?
}
resetCalculator("0");
$(".button").click(function(){
if ($("#screen").data("fromPrevious") === true) {
resetCalculator($(this).text());
// Clicking a number before 1st number is locked
} else if (($("#screen").data("isPendingFunction") === true) && ($("#screen").data("valueOneLocked") === false)) {
$("#screen").data("valueOne", $("#screen").val());
$("#screen").data("valueOneLocked", true);
$("#screen").val($(this).text());
$("#screen").data("valueTwo", $("#screen").val());
$("#screen").data("valueTwoLocked", true);
// Clicking a number after 1st number is locked & already value for 2nd
} else if (($("#screen").data("isPendingFunction") === true) && ($("#screen").data("valueOneLocked") === true)) {
var curValue = $("#screen").val();
var toAdd = $(this).text();
var newValue = curValue + toAdd;
$("#screen").val(newValue);
$("#screen").data("valueTwo", $("#screen").val());
$("#screen").data("valueTwoLocked", true);
// Clicking on a number while calc is in fresh state
} else {
var curValue = $("#screen").val();
if (curValue === "0") {
curValue = "";
}
var toAdd = $(this).text();
var newValue = curValue + toAdd;
$("#screen").val(newValue);
}
});
$(".func-button").click(function(){
if ($("#screen").data("fromPrevious") === true) {
resetCalculator($("#screen").val());
$("#screen").data("valueOneLocked", false);
$("#screen").data("fromPrevious", false)
}
// Indicate function has been selected
var pendingFunction = $(this).text();
$("#screen").data("isPendingFunction", true);
$("#screen").data("thePendingFunction", pendingFunction);
// Show selected function
$(".func-button").removeClass("pendingFunction");
$(this).addClass("pendingFunction");
});
$(".equals-button").click(function(){
if (($("#screen").data("valueOneLocked") === true) && ($("#screen").data("valueTwoLocked") === true)) {
if ($("#screen").data("thePendingFunction") === "+") {
var finalValue = parseFloat($("#screen").data("valueOne")) + parseFloat($("#screen").data("valueTwo"));
} else if ($("#screen").data("thePendingFunction") === "-") {
var finalValue = parseFloat($("#screen").data("valueOne")) - parseFloat($("#screen").data("valueTwo"));
} else if ($("#screen").data("thePendingFunction") === "*") {
var finalValue = parseFloat($("#screen").data("valueOne")) * parseFloat($("#screen").data("valueTwo"));
} else if ($("#screen").data("thePendingFunction") === "/") {
var finalValue = parseFloat($("#screen").data("valueOne")) / parseFloat($("#screen").data("valueTwo"));
}
$("#screen").val(finalValue);
resetCalculator(finalValue);
$("#screen").data("fromPrevious", true);
} else {
// both numbers are not locked, so do nothing
}
});
});
Raw
styles.css
/* ----------------------------------------
1. Base Styles
2. Page Elements
2.1 Nav
2.2 Carousel
2.3 Intro
2.4 About
2.5 Work
2.6 Contact
2.7 Learn More
2.8 Footer
3. Typography
---------------------------------------- */
/* 1. Base Styles ---------------------- */
body {
background-color: gray;
}
a {
color: black;
text-decoration: none;
}
#screen {
display: inline-block;
height: 30px;
width: 268px;
border: 1px solid black;
background-color: white;
margin-bottom: 10px;
}
.container {
width: 320px;
height: 360px;
margin: 10px auto 0 auto;
border: 1px solid black;
border-radius: 15px;
position: relative;
background-color: blue;
}
.controls {
height: 320px;
width: 270px;
margin: 20px auto;
}
.column {
display: inline-block;
float: left;
width: 60px;
}
.gap {
display: inline-block;
float: left;
height: 270px;
width: 10px;
}
.button,
.func-button,
.equals-button {
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 58px;
height: 58px;
width: 58px;
border: 1px solid black;
border-radius: 15px;
margin: 5px auto;
position: relative;
background-color: gray;
}
.button:hover,
.func-button:hover,
.equals-button:hover {
background-color: white;
cursor: pointer;
}
.button:active,
.func-button:active,
.equals-button:active {
background-color: black;
color: white;
cursor: pointer;
}
.pendingFunction {
background-color: orange;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment