Skip to content

Instantly share code, notes, and snippets.

@alexrobaina

alexrobaina/index.html

Created April 28, 2018 14:34
Show Gist options
  • Save alexrobaina/4b4258cfbfc86dfb63f651f5479ce96f to your computer and use it in GitHub Desktop.
Save alexrobaina/4b4258cfbfc86dfb63f651f5479ce96f to your computer and use it in GitHub Desktop.
Download ZIP
Calculator // source https://jsbin.com/tovaqix
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
<style id="jsbin-css">
*{
box-sizing: border-box;
}
.calculator {
/* 298 x 397*/
width: 300px;
height: 394px;
background-color: rgba(256, 202, 64);
color: white;
font-family: Helvetica;
}
.calculator-display {
/* h: 98pt*/
width: 100%;
height: 98px;
background-color: rgb(41, 94, 88);
font-size: 40px;
text-align: right;
padding-right: 20px;
}
.calculator-output {
line-height: 98px;
}
.calculator-keyboard {}
.calculator-row {}
.calculator-key {
/* 73 x 72*/
width: 71.6px;
height: 74px;
background-color: rgb(86, 144, 160);
color: white;
font-size: 20px;
}
.calculator-key.number {
background-color: teal
}
.calculator-key.operator {
background-color: steelblue
}
</style>
</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</button>
<button data-type="number" data-value="8" class="calculator-key number">8</button>
<button data-type="number" data-value="9" class="calculator-key number">9</button>
<button data-type="number" data-value="/" class="calculator-key operator">/</button>
</div>
<div class="calculator-row">
<button data-type="number" data-value="4" class="calculator-key number">4</button>
<button data-type="number" data-value="5" class="calculator-key number">5</button>
<button data-type="number" data-value="6" class="calculator-key number">6</button>
<button data-type="number" data-value="X" class="calculator-key operator">X</button>
</div>
<div class="calculator-row">
<button data-type="number" data-value="1" class="calculator-key number">1</button>
<button data-type="number" data-value="2" class="calculator-key number">2</button>
<button data-type="number" data-value="3" class="calculator-key number">3</button>
<button data-type="operator" data-value="-" class="calculator-key operator">-</button>
</div>
<div class="calculator-row">
<button data-type="number" data-value="0" class="calculator-key number">0</button>
<button data-type="action" data-value="C" class="calculator-key oparato">C</button>
<button data-type="action" data-value="=" class="calculator-key operator">=</button>
<button data-type="oparator" data-value="+" class="calculator-key operator">+</button>
</div>
</div>
</div>
<script id="jsbin-javascript">
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){
console.log(dataset);
if (type === "number"){
output.innerHTML = value;
}
}
// [] Constants
// [x] States
// [] Input Types
// [] Operator types
// [] Actions
// states
const STATE_LEFT_OPERAND = 'left_operand';
const STATE_RIGHT_OPERAND = 'right_operand';
const STATE_OPERAND = 'operator';
const STATE_RESULT = 'result';
// Inputs
const TYPE_NUMBER = 'number';
const TYPE_ACTION = 'action';
const TYPE_OPERATOR = 'operator';
// Operators
const OPERATOR_DIVISION = '/';
const OPERATOR_MULTIPLICATION = '*';
const OPERATOR_ADDITION = '+';
const OPERATOR_SUBTRACTION = '-';
// Actions
const ACTION_CLEAR = 'C';
const ACTION_RESULT =
// ES6
class Calculator {
constructor() {
this.init();
}
int(){
this.acc =[];
this.operator = null;
this.leftOperand = 0;
this.rightOperand = 0;
this.state = null;
this.strategy = null;
}
input(type, value) {
}
output() {
let result = 0;
if (this.acc.length > 0) {
result = this.acc.join('');
}
return result;
}
}
</script>
<script id="jsbin-source-css" type="text/css">*{
box-sizing: border-box;
}
.calculator {
/* 298 x 397*/
width: 300px;
height: 394px;
background-color: rgba(256, 202, 64);
color: white;
font-family: Helvetica;
}
.calculator-display {
/* h: 98pt*/
width: 100%;
height: 98px;
background-color: rgb(41, 94, 88);
font-size: 40px;
text-align: right;
padding-right: 20px;
}
.calculator-output {
line-height: 98px;
}
.calculator-keyboard {}
.calculator-row {}
.calculator-key {
/* 73 x 72*/
width: 71.6px;
height: 74px;
background-color: rgb(86, 144, 160);
color: white;
font-size: 20px;
}
.calculator-key.number {
background-color: teal
}
.calculator-key.operator {
background-color: steelblue
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">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){
console.log(dataset);
if (type === "number"){
output.innerHTML = value;
}
}
// [] Constants
// [x] States
// [] Input Types
// [] Operator types
// [] Actions
// states
const STATE_LEFT_OPERAND = 'left_operand';
const STATE_RIGHT_OPERAND = 'right_operand';
const STATE_OPERAND = 'operator';
const STATE_RESULT = 'result';
// Inputs
const TYPE_NUMBER = 'number';
const TYPE_ACTION = 'action';
const TYPE_OPERATOR = 'operator';
// Operators
const OPERATOR_DIVISION = '/';
const OPERATOR_MULTIPLICATION = '*';
const OPERATOR_ADDITION = '+';
const OPERATOR_SUBTRACTION = '-';
// Actions
const ACTION_CLEAR = 'C';
const ACTION_RESULT =
// ES6
class Calculator {
constructor() {
this.init();
}
int(){
this.acc =[];
this.operator = null;
this.leftOperand = 0;
this.rightOperand = 0;
this.state = null;
this.strategy = null;
}
input(type, value) {
}
output() {
let result = 0;
if (this.acc.length > 0) {
result = this.acc.join('');
}
return result;
}
}</script></body>
</html>
Raw
jsbin.tovaqix.css
*{
box-sizing: border-box;
}
.calculator {
/* 298 x 397*/
width: 300px;
height: 394px;
background-color: rgba(256, 202, 64);
color: white;
font-family: Helvetica;
}
.calculator-display {
/* h: 98pt*/
width: 100%;
height: 98px;
background-color: rgb(41, 94, 88);
font-size: 40px;
text-align: right;
padding-right: 20px;
}
.calculator-output {
line-height: 98px;
}
.calculator-keyboard {}
.calculator-row {}
.calculator-key {
/* 73 x 72*/
width: 71.6px;
height: 74px;
background-color: rgb(86, 144, 160);
color: white;
font-size: 20px;
}
.calculator-key.number {
background-color: teal
}
.calculator-key.operator {
background-color: steelblue
}
Raw
jsbin.tovaqix.js
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){
console.log(dataset);
if (type === "number"){
output.innerHTML = value;
}
}
// [] Constants
// [x] States
// [] Input Types
// [] Operator types
// [] Actions
// states
const STATE_LEFT_OPERAND = 'left_operand';
const STATE_RIGHT_OPERAND = 'right_operand';
const STATE_OPERAND = 'operator';
const STATE_RESULT = 'result';
// Inputs
const TYPE_NUMBER = 'number';
const TYPE_ACTION = 'action';
const TYPE_OPERATOR = 'operator';
// Operators
const OPERATOR_DIVISION = '/';
const OPERATOR_MULTIPLICATION = '*';
const OPERATOR_ADDITION = '+';
const OPERATOR_SUBTRACTION = '-';
// Actions
const ACTION_CLEAR = 'C';
const ACTION_RESULT =
// ES6
class Calculator {
constructor() {
this.init();
}
int(){
this.acc =[];
this.operator = null;
this.leftOperand = 0;
this.rightOperand = 0;
this.state = null;
this.strategy = null;
}
input(type, value) {
}
output() {
let result = 0;
if (this.acc.length > 0) {
result = this.acc.join('');
}
return result;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment