Skip to content

Instantly share code, notes, and snippets.

@alejandrolechuga

alejandrolechuga/index.html

Created November 27, 2017 06:38
Show Gist options
  • Save alejandrolechuga/e95534e2c710a63a8c84a92a37443df9 to your computer and use it in GitHub Desktop.
Save alejandrolechuga/e95534e2c710a63a8c84a92a37443df9 to your computer and use it in GitHub Desktop.
Download ZIP
Calculator LOL 2
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="X" 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
main.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;
}
}
}
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