Skip to content

Instantly share code, notes, and snippets.

@alejandrolechuga

alejandrolechuga/index.html

Created November 29, 2017 10:03
Show Gist options
  • Save alejandrolechuga/bf1605e272f62a103403c8b6089125f0 to your computer and use it in GitHub Desktop.
Save alejandrolechuga/bf1605e272f62a103403c8b6089125f0 to your computer and use it in GitHub Desktop.
Download ZIP
Calculadora parte 3
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
</head>
<body>
<div id="calculator" class="calculator">
<div class="calculator-display">
<span id="calculator-output" class="calculator-output">0</span>
</div>
<div class="calculator-keyboard">
<div class="calculator-row">
<button data-type="number" data-value="7" class="calculator-key number">7</buttom>
<button data-type="number" data-value="8" class="calculator-key number">8</buttom>
<button data-type="number" data-value="9" class="calculator-key number">9</buttom>
<button data-type="operator" data-value="/" class="calculator-key operator">/</buttom>
</div>
<div class="calculator-row">
<button data-type="number" data-value="4" class="calculator-key number">4</buttom>
<button data-type="number" data-value="5" class="calculator-key number">5</buttom>
<button data-type="number" data-value="6" class="calculator-key number">6</buttom>
<button data-type="operator" data-value="*" class="calculator-key operator">X</buttom>
</div>
<div class="calculator-row">
<button data-type="number" data-value="1" class="calculator-key number">1</buttom>
<button data-type="number" data-value="2" class="calculator-key number">2</buttom>
<button data-type="number" data-value="3" class="calculator-key number">3</buttom>
<button data-type="operator" data-value="-" class="calculator-key operator">-</buttom>
</div>
<div class="calculator-row">
<button data-type="number" data-value="0" class="calculator-key number">0</buttom>
<button data-type="action" data-value="C" class="calculator-key operator">C</buttom>
<button data-type="action" data-value="=" class="calculator-key operator">=</buttom>
<button data-type="operator" data-value="+" class="calculator-key operator">+</buttom>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
/* jshint esnext: true */
var calculator = document.getElementById('calculator');
var output = document.getElementById('calculator-output');
calculator.addEventListener('click', calculatorClick);
function calculatorClick(event) {
var target = event.target;
var dataset = target.dataset;
var value = dataset.value;
var type = dataset.type;
if (type) {
calc.input(type, value)
}
}
// ES6
// Constants
// - States
const STATE_LEFT_OPERAND = 'left_operand';
const STATE_OPERATOR = 'operator';
const STATE_RIGHT_OPERAND = 'right_operand';
// - Inputs
const TYPE_ACTION = 'action';
const TYPE_OPERATOR = 'operator';
const TYPE_NUMBER = 'number';
// - Operators
const OPERATOR_DIVISION = '/';
const OPERATOR_MULTIPLICATION = '*';
const OPERATOR_ADDITION = '+';
const OPERATOR_SUBTRACTION = '-';
// - Actions
const ACTION_CLEAR = 'C';
const ACTION_RESULT = '=';
class BaseStrategy {
constructor(delegate) {
this.delegate = delegate;
}
onNumber(number) {}
onOperator(operator) {}
onResult(operator) {}
onClear() {
this.delegate.reset();
}
}
class LeftOperandStrategy {
onNumber(number) {}
onOperator(operator) {}
onResult(operator) {}
}
class RightOperandStrategy {
onNumber(number) {}
onOperator(operator) {}
onResult(operator) {}
}
class OperatorStrategy {
onNumber(number) {}
onOperator(operator) {}
onResult(operator) {}
}
class Calculator {
constructor() {
this.acc = [];
this.operator = null;
this.leftOperand = 0;
this.rightOperand = 0;
this.state = STATE_LEFT_OPERAND;
this.strategy = null;
this.transition(STATE_LEFT_OPERAND);
}
transition (state) {
this.state = state;
switch (state) {
case STATE_LEFT_OPERAND:
this.strategy = new LeftOperandStrategy(this);
break;
case STATE_OPERATOR:
this.strategy = new OperatorStrategy(this);
break;
case STATE_RIGHT_OPERAND:
this.strategy = new RightOperandStrategy(this);
break;
}
}
input(type, value) {
switch(type) {
case TYPE_ACTION:
if (value === ACTION_CLEAR) {
this.strategy.onClear();
}
if (value === ACTION_RESULT) {
this.strategy.onResult();
}
break;
case TYPE_OPERATOR:
this.strategy.onOperator(value);
break;
case TYPE_NUMBER:
this.strategy.onNumber(value);
break;
}
this.log();
}
clearAccumulator() {
this.acc = [];
}
output() {
let acc = 0;
if (this.acc.length > 0) {
acc = this.acc.join('');
}
return acc;
}
log() {
let {
acc,
operator,
leftOperand,
rightOperand,
state
} = this;
console.log({
'acc': acc,
'operator': operator,
'leftOperand': leftOperand,
'rightOperand': rightOperand,
'state': state
});
}
reset() {
Object.assign(this, new Calculator());
}
}
var calc = new Calculator();
Raw
style.css
*{
box-sizing: border-box;
}
.calculator {
/* w:298 x h:397 pt */
width: 298px;
height: 397px;
background-color: black;
color: white;
font-family: Helvetica;
}
.calculator-display {
/* h: 98 pt */
width: 100%;
height: 98px;
background-color: #4A5559;
font-size: 40px;
text-align: right;
padding-right: 20px;
}
.calculator-output {
line-height: 98px;
}
.calculator-key {
/* 73 x 72 pt */
width: 25%;
height: 75px;
border: 1px solid #789198;
background-color: black;
color: white;
font-size: 20px;
}
.calculator-key.number {
background-color: #8FB3BC;
}
.calculator-key.operator {
background-color: #8FC9D8;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment