[์๋ฐ์คํฌ๋ฆฝํธ] html/css/js๋ก ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ ์ 1ํ
์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ฐ๋จํ๊ฒ ๊ณ์ฐ๊ธฐ ๋ง๋ค์ด ๋ณด๊ธฐ ใ ใ ใ ๊นํ๋ธ์ ์ฌ๋ ค์ผ ํ๋๋ฐ ๊นํ๋ธ ํ ๋ฒ ์ ๋ฆฌํ๊ณ ์๋ด์ผ ๋์ ๊ทธ๋ฅ ๋ธ๋ก๊ทธ์ ์ฌ๋ฆฐ๋ค.๋์ค์ ์ ์ฒด ์์ค๋ง ๊นํ๋ธ๋ก ๋ณด๋ด๊ธฐ 1. ๋ฒํผ 16๊ฐ ๋ง
awesomepossum.tistory.com
์ฌ๊ธฐ์ ์์ ์ข ๋๊ฒ ์ต๋๋ค ใ
ใ
ใ
๊ธฐ๋ฅ ์ถ๊ฐ๋ ๊ณ์ฐ๊ธฐ ์์ ์ถ๊ฐ
1. ์ซ์ ์ง์ธ ์ ์๋ backspace ๋ฒํผ
2. ๊ทธ๋ฆฌ๊ณ ๋ค์ค ๊ณ์ฐ์ ์ํด ์ซ์์ ์ฐ์ฐ์ ์
๋ ฅ์ ์ด์ด์ ๋ฐ์ ์ ์๋๋ก ๋ก์ง ๊ฐ์ .
3. ๊ณ์ฐ๊ธฐ์ ์์ ์
ํ๊ธฐ
1. backspace ๊ธฐ๋ฅ ์ถ๊ฐ
๋ฒํผ์ ์ด๋๋ค ๋ฃ์๊น div ํ๊ทธ ํ ์ค ๋ ์จ์ ์ถ๊ฐํ ๊น ํ๋ค๊ฐ ๊ทธ๋ฅ ์ฒซ๋ฒ์งธ row์ ์ง์ด ๋ฃ์ด์ฃผ๊ธฐ๋ก ํจ...
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
<button id="backspace">←</button>
</div>
์คํฌ๋ฆฝํธ ํ๊ทธ ๋งจ ๋ฐ์ backspace ์ด๋ฒคํธ ํธ๋ค๋ฌ ์์ค ์ถ๊ฐํ๊ธฐ
document.querySelector('#backspace').addEventListener('click', () => {
if (!operator) {
numOne = numOne.slice(0, -1);
$result.value = numOne;
} else {
numTwo = numTwo.slice(0, -1);
$result.value = numTwo;
}
});
2. ๋ค์ค ๊ณ์ฐ
- ์ ๋ ฅ๋ ์ซ์์ ์ฐ์ฐ์๋ฅผ ๋ฐฐ์ด์ ์ ์ฅ.
- = ๋ฒํผ์ ๋๋ฅด๋ฉด ๋ฐฐ์ด์ ์์ฐจ์ ์ผ๋ก ์ฐ์ฐ.
- ๋ค์ค ๊ณ์ฐ์ ์ํด ์ซ์์ ์ฐ์ฐ์ ์ ๋ ฅ์ ์ด์ด์ ๋ฐ์ ์ ์๋๋ก ๋ก์ง ๊ฐ์ .
์ผ๋จ ๊ธฐ์กด ์ฝ๋์์ ๊ฐ์ ํด์ผ ํ ๊ธฐ๋ฅ์ด ์ธ ๊ฐ์ง๊ฐ ์๋๋ฐ
1. ๊ธฐ์กด ์ฝ๋๋ ๋ ๊ฐ์ง ์ซ์์ ์ฐ์ฐ๋ง ๊ฐ๋ฅํจ. => ๋ค์ค ์ซ์ ์ฐ์ฐ์ด ๊ฐ๋ฅํด์ผ ํจ
2. ๊ณ์ฐ๊ธฐ ํ๋ฉด์ ๋ณด์ฌ์ง๋ ๊ฐ์ ์ฐ์ฐ์๋ฅผ ๋๋ฅธ ๊ฒฝ์ฐ => ์ฐ์ ์ฐ์ฐ
3. ๊ณ์ฐ๊ธฐ ํ๋ฉด์ ๋ณด์ฌ์ง๋ ๊ฐ์ ์ซ์๋ฅผ ์
๋ ฅํ ๊ฒฝ์ฐ => ๋ฌธ์์ด์ฒ๋ผ ์์ผ๋ก ๋ถ์ด์ผ ํจ.
์ด๊ฒ ๋ฌด์จ ๋ง์ด๋ ์ฆ, 5+7์ ๊ณ์ฐํด์ ๊ฒฐ๊ณผ๊ฐ 12๊ฐ ํ๋ฉด์ ๋ณด์ฌ์ก์ ๋
+5๋ฅผ ๋๋ฅด๋ฉด 12๋ฅผ ๋ฐ์์ 12+5 ์ฐ์ฐ์ ์ํํด์ผ ํจ
๊ทธ๋ฅ 5๋ฅผ ๋๋ฅด๋ฉด 125๊ฐ ํ๋ฉด์ ๋ณด์ฌ์ ธ์ผ ํจ.
๊ธฐ์กด์ numOne, operator, numTwo๋ฅผ currentNumber์ equation(๋ฐฐ์ด)์ผ๋ก ๋์ฒด, calculateEquation ํจ์๋ก ๋ฐฐ์ด์ ์ ์ฅ๋ ๊ฐ์ ์์ฐจ์ ์ผ๋ก ๊ณ์ฐํ ์ ์๋๋ก ๊ฐ์ ํจ.
currentNumber๋ ํ์ฌ ์
๋ ฅ๋ ์ซ์๋ฅผ ์ ์ฅํ๋ ๋ณ์, ์ฌ์ฉ์๊ฐ ์ซ์ ๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค ์ด ๋ณ์์ ๊ฐ ์ถ๊ฐ
equation์ ์
๋ ฅ๋ ์ฐ์ฐ์ ์ ์ฒด๋ฅผ ์ ์ฅํ๋ ๋ฐฐ์ด, ์ซ์์ ์ฐ์ฐ์๊ฐ ์์ฐจ์ ์ผ๋ก ์ ์ฅ
calculateEquation ํจ์๊ฐ ๋ฐฐ์ด์ ์ ์ฅ๋ ๊ฐ์ ์์ฐจ์ ์ผ๋ก ๊ณ์ฐํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ํ๋ฉด์ ํ์ํด ์ค
๊ธฐ์กด์ ์๋ onClickNumber ํจ์๋ ์ซ์ ๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค currentNumber์ ์ซ์๋ฅผ ์ถ๊ฐํ๊ณ , ํ๋ฉด์ ํ์
์ฐ์ฐ์๊ฐ ์ด๋ฏธ ์
๋ ฅ๋ ๊ฒฝ์ฐ, currentNumber์ ์ซ์๊ฐ ์ถ๊ฐ๋๋ฉด์ ํ๋ฉด์ ์ฐ์ฐ์ ๋ค๋ก ๊ฐ์ ์ถ๊ฐ
์ฐ์ฐ์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด, ํ์ฌ๊น์ง ์
๋ ฅ๋ ์ซ์๋ฅผ equation ๋ฐฐ์ด์ ์ ์ฅํ๊ณ ์ฐ์ฐ์๋ฅผ ๋ฐฐ์ด์ ์ถ๊ฐํ ํ currentNumber๋ฅผ ์ด๊ธฐํ
์ด๋ฐ ๋ฐฉ์์ผ๋ก ํ๋ฉด ์ฐ์ฐ์์ ์ซ์๊ฐ ๋ถ๋ฆฌ๋ ์ํ๋ก ๋ฐฐ์ด์ ์ ์ฅ์ด ๋จ!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
* { box-sizing: border-box; }
#result { width: 240px; height: 50px; margin: 5px; text-align: right; font-size: 1.5em; }
button { width: 50px; height: 50px; margin: 5px; font-size: 1.2em; }
</style>
</head>
<body>
<input readonly id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
<button id="backspace">←</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">C</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
<script>
let currentNumber = '';
let equation = [];
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
currentNumber += event.target.textContent;
$result.value += event.target.textContent;
};
const onClickOperator = (op) => () => {
if (currentNumber) {
equation.push(currentNumber);
equation.push(op);
currentNumber = '';
$result.value += ` ${op} `;
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํด๋ผ!');
}
};
const calculateEquation = () => {
if (currentNumber) {
equation.push(currentNumber);
}
let result = parseFloat(equation[0]);
for (let i = 1; i < equation.length; i += 2) {
const operator = equation[i];
const nextNumber = parseFloat(equation[i + 1]);
switch (operator) {
case '+':
result += nextNumber;
break;
case '-':
result -= nextNumber;
break;
case 'x':
result *= nextNumber;
break;
case '/':
result /= nextNumber;
break;
default:
break;
}
}
$result.value = result;
currentNumber = result.toString();
equation = [];
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-4').addEventListener('click', onClickNumber);
document.querySelector('#num-5').addEventListener('click', onClickNumber);
document.querySelector('#num-6').addEventListener('click', onClickNumber);
document.querySelector('#num-7').addEventListener('click', onClickNumber);
document.querySelector('#num-8').addEventListener('click', onClickNumber);
document.querySelector('#num-9').addEventListener('click', onClickNumber);
document.querySelector('#num-0').addEventListener('click', onClickNumber);
document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
document.querySelector('#multiply').addEventListener('click', onClickOperator('x'));
document.querySelector('#calculate').addEventListener('click', calculateEquation);
document.querySelector('#clear').addEventListener('click', () => {
currentNumber = '';
equation = [];
$result.value = '';
});
document.querySelector('#backspace').addEventListener('click', () => {
if (currentNumber) {
currentNumber = currentNumber.slice(0, -1);
$result.value = $result.value.slice(0, -1);
}
});
</script>
</body>
</html>
3. ๋ฒํผ์ ํ์คํ ํค ์์ ์ ํ๊ธฐ
์ด ๊ณผ์ ์์ ๋ฒํผ์ flex๋ ์ค์ผ ๊ฒ ๋ค๊ณ ์๊ฐ์ด ๋ค์๋ค.
์์์ ์
ํ๋๋ฐ ๋ฐ๋๋ฆฌ๊ฐ ์์ด๋ป์ ๋ญ๊ฐ ์์์๋ค์...
๊ทธ๋์ CSS ๋ค์ ํ์ต๋๋ค~
์๋ ์ฝ๋๋ก ์
ํ์ฃผ๋๊น ํจ์ฌ ์ด์จ
/ ํ์คํ ํค ๋ฒํผ CSS
* { box-sizing: border-box; }
#result { width: 240px; height: 50px; margin: 5px; text-align: right; font-size: 1.5em; }
.row { display: flex; }
button {
width: 50px;
height: 50px;
margin: 5px;
border: none;
border-radius: 8px;
font-size: 18px;
color: #333;
}
/* Pastel colors for buttons */
#num-0 { background-color: #ffebcd; }
#num-1 { background-color: #ffe4e1; }
#num-2 { background-color: #e6e6fa; }
#num-3 { background-color: #d1cfe2; }
#num-4 { background-color: #bfefff; }
#num-5 { background-color: #d5f5e3; }
#num-6 { background-color: #f5f5dc; }
#num-7 { background-color: #fafad2; }
#num-8 { background-color: #ffdab9; }
#num-9 { background-color: #e0ffff; }
#plus, #minus, #multiply, #divide, #calculate, #clear, #backspace {
background-color: #f0e68c;
}
#calculate { background-color: #f4a460; }
#clear { background-color: #ffcccb; }
#backspace { background-color: #b0e0e6; }
์ฌ๊ธฐ๊น์ง ํ๊ณ ๋๋๊น ์์ฌ์ด...
๋ฒํผ์ ๋๋ ์ ๋ ์ํน ๋ค์ด๊ฐ๋ ๊ฒ๋ ๊ตฌํ์ ํด์ฃผ๋ฉด ์ข๊ฒ ๋ค ><
hover๋ก ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ๋ฒํผ์ ์์์ด ์๊ธฐ๊ฒ ํ๋ ค๋ค๊ฐ
๊ทธ๋ฅ ํด๋ฆญํ์ ๋ ๋ฒํผ์ด ์์์ง๋ ๊ฑธ๋ก ๊ตฌํํจ....
/ ๋ฒํผ ๋๋ฅด๋ฉด ๋ฒํผ์ด ์์์ง๋ CSS
button {
width: 50px;
height: 50px;
margin: 5px;
border: none;
border-radius: 8px;
font-size: 18px;
color: #333;
cursor: pointer;
transition: transform 0.1s ease-in-out; /* ์ ๋๋ฉ์ด์
ํจ๊ณผ ์ถ๊ฐ */
}
button:active {
transform: scale(0.9); /* ๋๋ ์ ๋ ๋ฒํผ์ด ์์์ง๋ ํจ๊ณผ */
}
4. ์ ์ฒด ์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
* { box-sizing: border-box; }
#result { width: 240px; height: 50px; margin: 5px; text-align: right; font-size: 1.5em; }
.row { display: flex; }
button {
width: 50px;
height: 50px;
margin: 5px;
border: none;
border-radius: 8px;
font-size: 18px;
color: #333;
cursor: pointer;
transition: transform 0.1s ease-in-out; /* ์ ๋๋ฉ์ด์
ํจ๊ณผ ์ถ๊ฐ */
}
button:active {
transform: scale(0.9); /* ๋๋ ์ ๋ ๋ฒํผ์ด ์์์ง๋ ํจ๊ณผ */
}
/* Pastel colors for buttons */
#num-0 { background-color: #ffebcd; }
#num-1 { background-color: #ffe4e1; }
#num-2 { background-color: #e6e6fa; }
#num-3 { background-color: #d1cfe2; }
#num-4 { background-color: #bfefff; }
#num-5 { background-color: #d5f5e3; }
#num-6 { background-color: #f5f5dc; }
#num-7 { background-color: #fafad2; }
#num-8 { background-color: #ffdab9; }
#num-9 { background-color: #e0ffff; }
#plus, #minus, #multiply, #divide, #calculate, #clear, #backspace {
background-color: #f0e68c;
}
#calculate { background-color: #f4a460; }
#clear { background-color: #ffcccb; }
#backspace { background-color: #b0e0e6; }
</style>
</head>
<body>
<input readonly id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
<button id="backspace">←</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">C</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
<script>
let currentNumber = '';
let equation = [];
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
currentNumber += event.target.textContent;
$result.value += event.target.textContent;
};
const onClickOperator = (op) => () => {
if (currentNumber) {
equation.push(currentNumber);
equation.push(op);
currentNumber = '';
$result.value += ` ${op} `;
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํด๋ผ!');
}
};
const calculateEquation = () => {
if (currentNumber) {
equation.push(currentNumber);
}
let result = parseFloat(equation[0]);
for (let i = 1; i < equation.length; i += 2) {
const operator = equation[i];
const nextNumber = parseFloat(equation[i + 1]);
switch (operator) {
case '+':
result += nextNumber;
break;
case '-':
result -= nextNumber;
break;
case 'x':
result *= nextNumber;
break;
case '/':
result /= nextNumber;
break;
default:
break;
}
}
$result.value = result;
currentNumber = result.toString();
equation = [];
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-4').addEventListener('click', onClickNumber);
document.querySelector('#num-5').addEventListener('click', onClickNumber);
document.querySelector('#num-6').addEventListener('click', onClickNumber);
document.querySelector('#num-7').addEventListener('click', onClickNumber);
document.querySelector('#num-8').addEventListener('click', onClickNumber);
document.querySelector('#num-9').addEventListener('click', onClickNumber);
document.querySelector('#num-0').addEventListener('click', onClickNumber);
document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
document.querySelector('#multiply').addEventListener('click', onClickOperator('x'));
document.querySelector('#calculate').addEventListener('click', calculateEquation);
document.querySelector('#clear').addEventListener('click', () => {
currentNumber = '';
equation = [];
$result.value = '';
});
document.querySelector('#backspace').addEventListener('click', () => {
if (currentNumber) {
currentNumber = currentNumber.slice(0, -1);
$result.value = $result.value.slice(0, -1);
}
});
</script>
</body>
</html>
