Skip to content

Instantly share code, notes, and snippets.

@sunghwan2789

sunghwan2789/calc.html

Last active July 26, 2019 04:30
Show Gist options
  • Save sunghwan2789/db4eab0578273a905ad41caa156e39e0 to your computer and use it in GitHub Desktop.
Save sunghwan2789/db4eab0578273a905ad41caa156e39e0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calc.html
<!DOCTYPE html>
<html lang="ko" class="min-vh-100">
<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>계산기</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="min-vh-100">
<div class="row no-gutters min-vh-100">
<div class="col"></div>
<div class="col-12 col-sm-8 col-md-6 col-lg-4 my-auto">
<form id="form">
<div class="form-group">
<label for="display">계산식 <small id="backup" class="text-muted"></small></label>
<input type="text" name="display" id="display" class="form-control">
</div>
<div class="form-group mb-0">
<div class="row no-gutters">
<div class="col">
<button type="button" id="backspace" class="btn btn-light btn-block">🗑</button>
</div>
<div class="col">
<button type="button" class="append btn btn-light btn-block" value="/">➗</button>
</div>
<div class="col">
<button type="button" class="append btn btn-light btn-block" value="*">✖</button>
</div>
<div class="col">
<button type="button" class="append btn btn-light btn-block" value="-">➖</button>
</div>
</div>
<div class="row no-gutters">
<div class="col-9">
<div class="row no-gutters">
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="7">7</button>
</div>
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="8">8</button>
</div>
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="9">9</button>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="4">4</button>
</div>
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="5">5</button>
</div>
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="6">6</button>
</div>
</div>
</div>
<div class="col-3">
<button type="button" class="append btn btn-light btn-block h-100" value="+">➕</button>
</div>
</div>
<div class="row no-gutters">
<div class="col-9">
<div class="row no-gutters">
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="1">1</button>
</div>
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="2">2</button>
</div>
<div class="col">
<button type="button" class="append btn btn-dark btn-block" value="3">3</button>
</div>
</div>
<div class="row no-gutters">
<div class="col-8">
<button type="button" class="append btn btn-dark btn-block" value="0">0</button>
</div>
<div class="col-4">
<button type="button" class="append btn btn-dark btn-block" value=".">.</button>
</div>
</div>
</div>
<div class="col-3">
<button type="submit" id="enter" class="btn btn-primary btn-block h-100">OK</button>
</div>
</div>
</div>
</form>
</div>
<div class="col"></div>
</div>
<script>
const form = document.querySelector('#form');
const displayInput = document.querySelector('#display');
const backupSmall = document.querySelector('#backup');
const backspaceButton = document.querySelector('#backspace');
const enterButton = document.querySelector('#enter');
const appendButton_click = (e) => {
displayInput.value += e.target.value;
}
let appendValueButtonMap = {};
for (let el of document.querySelectorAll('.append')) {
el.addEventListener('click', appendButton_click);
appendValueButtonMap[el.value] = el;
}
backspaceButton.addEventListener('click', (e) => {
const expr = displayInput.value;
displayInput.value = expr.slice(0, expr.length - 1);
});
form.addEventListener('submit', (e) => {
e.preventDefault();
const expr = displayInput.value;
backupSmall.textContent = expr;
displayInput.value = eval(expr);
});
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'Backspace': {
e.preventDefault();
backspaceButton.click();
break;
}
case 'Enter': {
e.preventDefault();
enterButton.click();
break;
}
default: {
const appendButton = appendValueButtonMap[e.key];
if (typeof appendButton !== 'undefined') {
e.preventDefault();
appendButton.click();
}
break;
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment