acbrent25
9/2/2017 - 2:19 PM
jQuery Calculator
jQuery Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Calculator</title>
<!-- Added link to the jQuery Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Added a link to Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1 class="text-center">jQuery Calculator</h1>
<h3 class="text-center">Perform basic mathematic operations using the power of jQuery!</h3>
</div>
<div class="container">
<div class="row">
<!-- Calculator Panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Calculator</h3>
</div>
<div class="panel-body">
<button id="button-1" class="btn btn-primary number" value="1"><h1>1</h1></button>
<button id="button-2" class="btn btn-primary number" value="2"><h1>2</h1></button>
<button id="button-3" class="btn btn-primary number" value="3"><h1>3</h1></button>
<button id="button-plus" class="btn btn-danger operator" value="plus"><h1>+</h1></button>
<br><br>
<button id="button-4" class="btn btn-primary number" value="4"><h1>4</h1></button>
<button id="button-5" class="btn btn-primary number" value="5"><h1>5</h1></button>
<button id="button-6" class="btn btn-primary number" value="6"><h1>6</h1></button>
<button id="button-minus" class="btn btn-danger operator" value="minus"><h1>−</h1></button>
<br><br>
<button id="button-7" class="btn btn-primary number" value="7"><h1>7</h1></button>
<button id="button-8" class="btn btn-primary number" value="8"><h1>8</h1></button>
<button id="button-9" class="btn btn-primary number" value="9"><h1>9</h1></button>
<button id="button-multiply" class="btn btn-danger operator" value="times"><h1>×</h1></button>
<br><br>
<button id="button-0" class="btn btn-primary number" value="0"><h1>0</h1></button>
<button id="button-divide" class="btn btn-danger operator" value="divide"><h1>÷</h1></button>
<button id="button-power" class="btn btn-danger operator" value="power"><h1>^</h1></button>
<button id="button-equal" class="btn btn-success equal" value="equals"><h1>=</h1></button>
<br><br>
<button id="button-clear" class="btn btn-default clear" value="clear"><h1>clear</h1></button>
</div>
</div>
</div>
<!-- Result Panel -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Result</h3>
</div>
<div class="panel-body">
<h1 id="first-number"></h1>
<h1 id="operator"></h1>
<h1 id="second-number"></h1>
<hr>
<h1 id="result"></h1>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Variables
var firstNumber = "";
var secondNumber = "";
var operator = "";
var result = 0;
var hasNumber = false;
var firstNumberComplete = false;
var lockButtons = false;
// Check if any button is clicked...
$(document).on("click", "button", function() {
// Checks if it's a number and that its not the end of the calculation ("!lockButtons")
if ($(this).hasClass("number") && !lockButtons) {
// We'll then set our "hasNumber" variable to true to indicate that we can proceed in selecting an operator.
hasNumber = true;
// If we haven't received an operator yet...
if (firstNumberComplete === false) {
// Then grab the number of the value clicked and build a string with it
firstNumber += $(this).attr("value");
// Print the number to the firstPage
console.log(firstNumber);
// Print it to the div
$("#first-number").html(firstNumber);
}
// If we have received an operator already...
else {
// Grab the number of the value clicked and build a string with it
secondNumber += $(this).attr("value");
// Print the number to the firstPage
console.log(secondNumber);
// Print it to the div
$("#second-number").html(secondNumber);
}
}
// Checks if its an operator (but not "=")
if ($(this).hasClass("operator") && hasNumber && !lockButtons) {
firstNumberComplete = true;
// Set the visual to show the operator's symbol
$("#operator").html("<h1>" + $(this).text() + "</h1>");
operator = $(this).attr("value");
}
// Checks if the equal button has been pressed. If so...
if ($(this).hasClass("equal")) {
// Lock the keyboard from being clicked
lockButtons = true;
// Convert the numbers into integers
firstNumber = parseInt(firstNumber);
secondNumber = parseInt(secondNumber);
// Then figure out which operator was clicked and perform the necessary functions.
// Then show the result in the HTML
if (operator === "plus") {
result = firstNumber + secondNumber;
}
if (operator === "minus") {
result = firstNumber - secondNumber;
}
if (operator === "times") {
result = firstNumber * secondNumber;
}
if (operator === "divide") {
result = firstNumber / secondNumber;
}
if (operator === "power") {
result = Math.pow(firstNumber, secondNumber);
}
$("#result").html(result);
}
// If clear is selected then wipe away all of the content from the screen and unlock the buttons.
if ($(this).hasClass("clear")) {
firstNumber = "";
secondNumber = "";
operator = "";
result = 0;
hasNumber = false;
firstNumberComplete = false;
lockButtons = false;
$("#first-number, #second-number, #operator, #result").empty();
}
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Calculator</title>
<!-- Added link to the jQuery Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Added a link to Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1 class="text-center">jQuery Calculator</h1>
<h3 class="text-center">Perform basic mathematic operations using the power of jQuery!</h3>
</div>
<div class="container">
<div class="row">
<!-- Calculator Panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Calculator</h3>
</div>
<div class="panel-body">
<button id="button-1" class="btn btn-primary number" value="1"><h1>1</h1></button>
<button id="button-2" class="btn btn-primary number" value="2"><h1>2</h1></button>
<button id="button-3" class="btn btn-primary number" value="3"><h1>3</h1></button>
<button id="button-plus" class="btn btn-danger operator" value="plus"><h1>+</h1></button>
<br><br>
<button id="button-4" class="btn btn-primary number" value="4"><h1>4</h1></button>
<button id="button-5" class="btn btn-primary number" value="5"><h1>5</h1></button>
<button id="button-6" class="btn btn-primary number" value="6"><h1>6</h1></button>
<button id="button-minus" class="btn btn-danger operator" value="minus"><h1>−</h1></button>
<br><br>
<button id="button-7" class="btn btn-primary number" value="7"><h1>7</h1></button>
<button id="button-8" class="btn btn-primary number" value="8"><h1>8</h1></button>
<button id="button-9" class="btn btn-primary number" value="9"><h1>9</h1></button>
<button id="button-multiply" class="btn btn-danger operator" value="times"><h1>×</h1></button>
<br><br>
<button id="button-0" class="btn btn-primary number" value="0"><h1>0</h1></button>
<button id="button-divide" class="btn btn-danger operator" value="divide"><h1>÷</h1></button>
<button id="button-power" class="btn btn-danger operator" value="power"><h1>^</h1></button>
<button id="button-equal" class="btn btn-success equal" value="equals"><h1>=</h1></button>
<br><br>
<button id="button-clear" class="btn btn-default clear" value="clear"><h1>clear</h1></button>
</div>
</div>
</div>
<!-- Result Panel -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Result</h3>
</div>
<div class="panel-body">
<h1 id="first-number"></h1>
<h1 id="operator"></h1>
<h1 id="second-number"></h1>
<hr>
<h1 id="result"></h1>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Make our variables global to the runtime of our application
var firstNumber;
var secondNumber;
var operator;
var result;
var isOperatorChosen;
var isCalculated;
// Use a function to initialize our calculator.
// This way when the user hits clear, we can guarantee a reset of the app.
function initializeCalculator() {
firstNumber = "";
secondNumber = "";
operator = "";
isOperatorChosen = false;
isCalculated = false;
$("#first-number, #second-number, #operator, #result").empty();
}
// Add an on click listener to all elements that have the class "number"
$(".number").on("click", function() {
// Check if we've already run a calculation, if so... we'll just.
if (isCalculated) return;
// If operator is chosen, we should be writing the secondNumber, otherwise, the firstNumber
if (isOperatorChosen) {
secondNumber += this.value;
$("#second-number").html(secondNumber);
}
else {
firstNumber += this.value;
$("#first-number").html(firstNumber);
}
});
// Add an on click listener to all elements that have the class "operator"
$(".operator").on("click", function() {
// Check if a first number has already been selected
// Or we've already run a calculation, if so we just exit.
if (!firstNumber || isCalculated) return;
// Set isOperatorChosen to true so we start writing to secondNumber
isOperatorChosen = true;
// Store off the operator
operator = this.value;
// Set the HTML of the #operator to the text of what was clicked
$("#operator").html($(this).text());
});
// Add an on click listener to all elements that have the class "equal"
$(".equal").on("click", function() {
// If we already clicked equal, don't do the calculation again
if (isCalculated) return;
// Set isCalculated to true so that we don't get in a weird UI state by clicking buttons again
isCalculated = true;
// Use parseInt to convert our string representation of numbers into actual integers
firstNumber = parseInt(firstNumber);
secondNumber = parseInt(secondNumber);
// Based on the operator that was chosen.
// Then run the operation and set the HTML of the result of that operation
if (operator === "plus") {
result = firstNumber + secondNumber;
}
if (operator === "minus") {
result = firstNumber - secondNumber;
}
if (operator === "times") {
result = firstNumber * secondNumber;
}
if (operator === "divide") {
result = firstNumber / secondNumber;
}
if (operator === "power") {
result = Math.pow(firstNumber, secondNumber);
}
$("#result").html(result);
});
// Add an on click listener to all elements that have the class "clear"
$(".clear").on("click", function() {
// Call initializeCalculater so we can reset the state of our app
initializeCalculator();
});
// Call initializeCalculater so we can set the state of our app
initializeCalculator();
});
</script>
</body>
</html>