<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JavaScript Calculator(FreeCodeCamp)</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="calculator">
<h4 class="title"> JavaScript Calculator </h4>
<div class="display well text-right">
<h2 id="display">0</h2>
<h5 id="log">0<h5>
</div>
<button id="AC" class="pushLeft redButton"> AC </button>
<button id="CE" class="redButton" > CE </button>
<button id="/"> / </button>
<button id="*"> * </button>
<button id="7" class="pushLeft"> 7 </button>
<button id="8"> 8 </button>
<button id="9"> 9 </button>
<button id="-"> - </button>
<button id="4" class="pushLeft"> 4 </button>
<button id="5"> 5 </button>
<button id="6"> 6 </button>
<button id="+"> + </button>
<button id="1" class="pushLeft"> 1 </button>
<button id="2"> 2 </button>
<button id="3"> 3 </button>
<button id="=" class="equalButton"> = </button>
<button id="0" class="zeroButton pushLeft"> 0 </button>
<button id="." class="pushDown"> . </button>
</div>
<footer class="text-center">
<h6> Design and Code by Juan Gonzalez</h6>
</footer>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1Moosey1/javascript-calculatorfreecodecamp-XjrLgK */
@font-facxe {
font-family: 'Orbitron';
src: url('https://fonts.googleapis.com/css?family=Orbitron');
}
body {
background-color: #6f7685;
}
footer {
color: white;
}
.calculator {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #babbb5;
width: 23em;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
border-style: solid;
border-width: 2px;
border-color: #949590;
border-radius: 10px;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
}
button {
width: 4em;
height: 4em;
margin: .5em;
border-radius: 12px;
box-shadow: 1px 1px 1px 1px;
outline: none;
background-color: #d0c7a8;
}
.title {
margin: 2em auto 0.5em auto;
font-family: impact;
}
.display {
width: 19em;
margin: 1em auto 1em auto;
box-shadow: inset 0px 0px 8px 1px;
background-color: rgba(255, 255, 255, 0.4);
font-family: Obitron;
overflow: hidden;
}
.pushLeft {
margin-left: 2em;
}
.pushDown {
margin-bottom: 2em;
}
.equalButton {
height: 9em;
margin-bottom: -4.5em;
}
.zeroButton {
width: 9em;
}
.redButton {
background-color: #AA7473;
}
/*Downloaded from https://www.codeseek.co/1Moosey1/javascript-calculatorfreecodecamp-XjrLgK */
const DISPLAYMAX = 8;
const LOGMAX = 32;
var displayElement, logElement, answer;
var leftOperand, operator, rightOperand;
$(document).ready(function() {
displayElement = $("#display");
logElement = $("#log");
leftOperand = "";
operator = "";
rightOperand = "";
answer = false;
$("button").click(handleClick);
});
function handleClick() {
var symbol = $(this).attr("id");
switch(symbol) {
case '/':
case '*':
case '-':
case '+':
appendOperator(symbol);
break;
case '.':
decimal();
break;
case '=':
compute();
break;
case 'AC':
allClear();
break;
case 'CE':
clearEntry();
break;
default:
appendNumber(symbol);
}
}
function appendNumber(number) {
var displayText = displayElement.text();
var logText = logElement.text();
if(displayText.length < DISPLAYMAX &&
logText.length < LOGMAX) {
var operand;
if(operator)
operand = rightOperand += number;
else {
if(answer) {
clearEntry();
answer = false;
}
operand = leftOperand += number;
}
updateDisplay(operand);
}
}
function appendOperator(symbol) {
if(!operator || !rightOperand) {
operator = symbol;
updateDisplay(operator);
}
else {
compute();
operator = symbol;
}
}
function decimal() {
var operand;
if(operator) {
if(!rightOperand.includes("."))
operand = rightOperand += ".";
}
else {
if(!leftOperand.includes("."))
operand = leftOperand += ".";
}
updateDisplay(operand);
}
function isInt(number) {
return number % 1 === 0;
}
function compute() {
if(leftOperand && operator &&
rightOperand) {
leftOperand = parseFloat(leftOperand);
rightOperand = parseFloat(rightOperand);
if(operator == "/")
leftOperand /= rightOperand;
else if(operator == "*")
leftOperand *= rightOperand;
else if(operator == "-")
leftOperand -= rightOperand;
else if(operator == "+")
leftOperand += rightOperand;
if(!isInt(leftOperand))
leftOperand = leftOperand.toFixed(1);
leftOperand = leftOperand.toString();
answer = true;
operator = "";
rightOperand = "";
updateDisplay(leftOperand);
}
}
function allClear() {
leftOperand = operator = rightOperand = "";
displayElement.text("0");
logElement.text("0");
}
function clearEntry() {
if(rightOperand) {
rightOperand = "";
updateDisplay(operator);
}
else if(operator) {
operator = "";
updateDisplay(leftOperand);
}
else
allClear();
}
function updateDisplay(displayString) {
displayElement.text(displayString);
logElement.text(leftOperand + operator + rightOperand);
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
jQuery
v2.1.3
