index.html
<!-- 버튼 기반 계산기 -->
<div class="row">
<input id="top-input" class="input" type="text" value="" disabled>
</div>
<div class="row">
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">=</button>
</div>
<div class="row">
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">+</button>
</div>
<div class="row">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">-</button>
</div>
<div class="row">
<button class="btn btn-lg">0</button>
<button class="btn">/</button>
<button class="btn">*</button>
</div>
main.css
.row {display:flex;flex-direction:row;gap:4px;margin-bottom:4px;}
.btn {width:48px;height:48px;background-color:#2699FB;color:#FFF;border-radius:4px;display:flex;justify-content:center;align-items:center;border:none;font-size:12px;font-weight:700;}
.btn:active {background-color:#007FEB;}
.btn-lg {width:100px;height:48px;}
.input {margin:0;margin-bottom:4px;padding:0 12px;width:204px;height:48px;box-sizing:border-box;outline:none;}
.input:disabled {background-color:#FFF;border:1px solid #BCE0FD;color:#BCE0FD;font-size:14px;}
CSS의 gap 속성 활용
grid, flex 및 column 레이아웃 내의 행과 열 사이의 공간인 여백의 크기를 지정
버튼을 통해 숫자, 연산기호 등을 통해 입력하여 실제 결과가 나오도록 로직 구현
index.html
<!-- 버튼 입력 시 input에 숫자, 연산 등이 입력되어 계산기 기능 구현 -->
<div class="row">
<input id="top-input" class="input" type="text" value="" disabled>
</div>
main.js
let left = null,
right = null,
oper = null;
function inputNum(num) {
if (oper === null) {
if (left === null) {
left = `${num}`
}
else {
left += `${num}`
}
}
else {
if (right === null) {
right = `${num}`
}
else {
right += `${num}`
}
}
}
${num}
: formatting (or num.toString())index.html
각각의 btn div에 onclick 이벤트 넣어주기
<div class="row">
<input id="top-input" class="input" type="text" value="" disabled>
</div>
<div class="row">
<button class="btn" onclick="inputNum(7)">7</button>
<button class="btn" onclick="inputNum(8)">8</button>
<button class="btn" onclick="inputNum(9)">9</button>
<button class="btn">=</button>
</div>
<div class="row">
<button class="btn" onclick="inputNum(4)">4</button>
<button class="btn" onclick="inputNum(5)">5</button>
<button class="btn" onclick="inputNum(6)">6</button>
<button class="btn">+</button>
</div>
<div class="row">
<button class="btn" onclick="inputNum(1)">1</button>
<button class="btn" onclick="inputNum(2)">2</button>
<button class="btn" onclick="inputNum(3)">3</button>
<button class="btn">-</button>
</div>
<div class="row">
<button class="btn btn-lg" onclick="inputNum(0)">0</button>
<button class="btn">/</button>
<button class="btn">*</button>
</div>
main.js
function inputNum(num) {
if (oper === null) {
if (left === null) {
left = `${num}`
}
else {
// !
if (num === 0 && parseInt(left) === 0)
return;
left += `${num}`
}
}
else {
if (right === null) {
right = `${num}`
}
else {
// !
if (num === 0 && parseInt(right) === 0)
return;
right += `${num}`
}
}
}
main.js
let left = null,
right = null,
oper = null,
res = false;
function save() {
const inp = document.getElementById("top-input");
let value = "" // 값(상수)
if (left === null)
return;
value += left + " "
inp.value = value // 결과값
if (oper === null)
return;
value += oper + " "
inp.value = value // 결과값
if (right === null)
return;
value += right + " "
inp.value = value // 결과값
// 참이면
if (res) {
let res = "";
// 사칙연산
switch (oper) {
case "+":
res = parseInt(left) + parseInt(right)
break;
case "-":
res = parseInt(left) - parseInt(right)
break;
case "*":
res = parseInt(left) * parseInt(right)
break;
case "/":
res = parseInt(left) / parseInt(right)
break;
}
value += `= ` + res;
inp.value = value // 결과값
}
}
function inputNum(num) {
...
...
save();
}
index.html
<div class="row">
<input id="top-input" class="input" type="text" value="" disabled>
</div>
<div class="row">
<button class="btn" onclick="inputNum(7)">7</button>
<button class="btn" onclick="inputNum(8)">8</button>
<button class="btn" onclick="inputNum(9)">9</button>
<button class="btn">=</button>
</div>
<div class="row">
<button class="btn" onclick="inputNum(4)">4</button>
<button class="btn" onclick="inputNum(5)">5</button>
<button class="btn" onclick="inputNum(6)">6</button>
<button class="btn" onclick="inputOper('+')">+</button> <!-- 더하기 -->
</div>
<div class="row">
<button class="btn" onclick="inputNum(1)">1</button>
<button class="btn" onclick="inputNum(2)">2</button>
<button class="btn" onclick="inputNum(3)">3</button>
<button class="btn" onclick="inputOper('-')">-</button> <!-- 빼기 -->
</div>
<div class="row">
<button class="btn btn-lg" onclick="inputNum(0)">0</button>
<button class="btn" onclick="inputOper('/')">/</button> <!-- 나누기 -->
<button class="btn" onclick="inputOper('*')">*</button> <!-- 곱하기 -->
</div>
main.js
function inputOper(op) {
if(left === null && op === "-") {
left = "-"
save();
return;
}
if(left === "-" && op === "-") {
return;
}
oper = op;
save();
}
main.js
function inputOper(op) {
if(left === null && op === "-") {
left = "-"
save();
return;
}
if(left === "-" && op === "-") {
return;
}
if(op === "-" && op !== null && right === null) {
right = "-"
save();
return;
}
oper = op;
save();
}
main.js
let left = null,
right = null,
oper = null,
res = false,
resValue = null;
function save() {
...
if (res) {
// let resValue = "";
switch (oper) {
case "+":
resValue = parseInt(left) + parseInt(right)
break;
case "-":
resValue = parseInt(left) - parseInt(right)
break;
case "*":
resValue = parseInt(left) * parseInt(right)
break;
case "/":
resValue = parseInt(left) / parseInt(right)
break;
}
value += `= ` + resValue;
inp.value = value
}
}
index.html
<button class="btn" onclick="inputEqu()">=</button>
main.js
function inputEqu() {
if(res) {
left = resValue
right = null
resValue = null
oper = null
res = false
}
else {
res = true
}
save();
}
로직부분은 어려워서 2번 봄..