Skip to content

Instantly share code, notes, and snippets.

@janecakemaster

janecakemaster/index.html

Created March 28, 2017 16:36
Show Gist options
  • Save janecakemaster/3755eec09a18bd68c03c052d62bd5f3d to your computer and use it in GitHub Desktop.
Save janecakemaster/3755eec09a18bd68c03c052d62bd5f3d to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=3755eec09a18bd68c03c052d62bd5f3d
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>ScriptEd Unit 5 Project: Calculator</title>
</head>
<body>
<div class="container">
<h1>ScriptEd Unit 5 Project: Calculator</h1>
<hr/>
<div class="row">
<div class="col-md-12">
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">7</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">8</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">9</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">/</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">RAND</button>
</div>
</div>
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">4</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">5</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">6</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">x</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">SQRT</button>
</div>
</div>
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">1</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">2</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">3</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">-</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">^</button>
</div>
</div>
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">0</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">CLEAR</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">=</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">+</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">log</button>
</div>
</div>
</div>
</div>
<div id="question" class="text-center">
</div>
<div id="answer" class="text-center">
</div>
</div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery","bootstrap"]}
Raw
script.js
// All the code you will need to create for this project will be completed below
// Your functions must be called the following:
// multiply, divide, subtract, add, power, square_root, logBase10, generateRandomNumber
function divide(x,y){
//Write your code below this line
}
function multiply(x,y){
}
function subtract(x,y){
}
function add(x,y){
}
function power(x,y){
}
function square_root(x){
}
function logBase10(x){
}
function generateRandomNumber()
{
}
/* IGNORE AND DO NOT EDIT BELOW */
$(document).ready(function(){
var state = null;
var first_operand = null;
var second_operand = null;
var operator = null;
var rand_first_operand_flag = false;
var rand_second_operand_flag = false;
function clear(){
$('#question').empty();
$('#answer').empty();
state = 0;
first_operand = null;
second_operand = null;
operator = null;
rand_first_operand_flag = false;
rand_second_operand_flag = false;
}
clear();
function isNumeric(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
function isOneOperandOperator(n){
return n === "SQRT" || n === "log";
}
function isTwoOperandOperator(n){
return n === "/" || n === "x" || n === "-" || n === "+" || n === "^";
}
// Simple FSM
$('.calc-btn').click(function(){
var input = $(this).text();
var answer;
if (input === "CLEAR") {
clear();
}
if (state === 0){
if (input === "RAND" && first_operand === null){
rand_first_operand_flag = true;
var random_number = generateRandomNumber();
first_operand = random_number;
$('#question').append(random_number);
}else if (isNumeric(input) && rand_first_operand_flag === false)
{
first_operand = first_operand === null ? input: parseInt(first_operand.toString() + input);
$('#question').append(input);
}
else if (isTwoOperandOperator(input) && first_operand !== null){
operator = input;
$('#question').append(" " + input);
state = 1;
} else if (isOneOperandOperator(input) && first_operand !== null){
operator = input;
if (operator === "SQRT"){
answer = square_root(first_operand);
$('#question').prepend("sqrt(");
$('#question').append(")");
}else if (operator === "log"){
answer = logBase10(first_operand);
$('#question').prepend("log(");
$('#question').append(")");
}
$('#question').append(" =");
$('#answer').append(answer).hide().fadeIn(1000);
}
}
else if (state === 1){
if (input === "RAND" && second_operand === null){
rand_second_operand_flag = true;
var random_number = generateRandomNumber();
second_operand = random_number;
$('#question').append(" " + random_number);
}else if (isNumeric(input) && rand_second_operand_flag === false){
$('#question').append(second_operand === null ? " " + input : input);
second_operand = second_operand === null ? input: parseInt(second_operand.toString() + input);
}else if (input === "=" && second_operand !== null){
if (operator === '/') {
answer = divide(parseInt(first_operand), parseInt(second_operand));
} else if (operator === "x") {
answer = multiply(parseInt(first_operand), parseInt(second_operand));
} else if (operator === "-") {
answer = subtract(parseInt(first_operand), parseInt(second_operand));
} else if (operator === "+") {
answer = add(parseInt(first_operand), parseInt(second_operand));
} else if (operator === "^") {
answer = power(parseInt(first_operand), parseInt(second_operand));
}
$('#question').append(" =");
$('#answer').append(answer).hide().fadeIn(1000);
state = 2;
}
}
});
});
Raw
styles.css
.calc-row:not(:last-child){
margin-bottom: 10px;
}
.col-md-2 {
width: 20%;
float: left;
}
#question{
margin-top: 50px;
font-size: 60px;
}
#answer{
margin-top: 30px;
font-size: 60px;
}
.container{
max-width: 700px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment