์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ฐ๋จํ๊ฒ ๊ณ์ฐ๊ธฐ ๋ง๋ค์ด ๋ณด๊ธฐ ใ ใ ใ
๊นํ๋ธ์ ์ฌ๋ ค์ผ ํ๋๋ฐ ๊นํ๋ธ ํ ๋ฒ ์ ๋ฆฌํ๊ณ ์๋ด์ผ ๋์ ๊ทธ๋ฅ ๋ธ๋ก๊ทธ์ ์ฌ๋ฆฐ๋ค.
๋์ค์ ์ ์ฒด ์์ค๋ง ๊นํ๋ธ๋ก ๋ณด๋ด๊ธฐ
1. ๋ฒํผ 16๊ฐ ๋ง๋ค๊ธฐ
<!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: 180px; height: 50px; margin: 5px; text-align: right }
#operator { width: 50px; height: 50px; margin: 5px; text-align: center }
button { width: 50px; height: 50px; margin: 5px }
</style>
</head>
<body>
<input readonoly id="operator">
<input readonly type="number" 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>
</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">4</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>
</script>
</body>
</html>
์ฌ๊ธฐ๊น์ง html๋ก ๋ฒํผ 16๊ฐ ๋ง๋ค๊ธฐ
์ด์ script ํ๊ทธ ์์ ๊ฐ ๋ฒํผ๋ง๋ค ์ด๋ฒคํธ ๋ฆฌ์ค๋ ๋ฌ์์ค์ผ ํจ
#num-0๊ณผ #num-1์ ๋ํด์๋ง ์ด๋ฒคํธ ๋ฆฌ์ค๋ ๋ฌ์์ฃผ๋ฉด ์ด๋ฐ ์์ผ๋ก ๋์ํจ
document.querySelector('#num-0').addEventListener('click', () => {
if (operator) {
numTwo += '0';
} else {
numOne += '0';
}
});
document.querySelector('#num-1').addEventListener('click', () => {
if (operator) {
numTwo += 1;
} else {
numOne += 1;
}
$result.value += '1';
});
์ด๊ฑธ 16๋ฒ ํด ์ค์ผ ํ๋๋ฐ ์ด๋ป๊ฒ ํ๋ฉด ๊ฐ๋จํ๊ฒ ์ค์ผ ์ ์์๊น?
ํจ์๋ฅผ ๋ง๋๋ ๊ณ ์ฐจํจ์๋ฅผ ์จ์ผ ํจ...
0๋ถํฐ 9๊น์ง ์ ์ฅํ๋ ๋ถ๋ถ์ ๋งค๊ฐ๋ณ์๋ก ๋ง๋ค๊ณ ๋ค๋ฅธ ๋ถ๋ถ์ ํจ์๋ก ๋ง๋ค์ด ์ค์ผ ํ๋ค.
๋ ธ๊ฐ๋ค์ค
2. ์ซ์ ๋ฒํผ ์ด๋ฒคํธ ๋ฆฌ์ค๋
let numOne = '';
let operator = '';
let numTwo = '';
const $Operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickButton = (number) => (event) => {
if (operator) {
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
};
document.querySelector('#num-0').addEventListener('click', onClickButton('0'));
document.querySelector('#num-1').addEventListener('click', onClickButton('1'));
document.querySelector('#num-2').addEventListener('click', onClickButton('2'));
document.querySelector('#num-3').addEventListener('click', onClickButton('3'));
document.querySelector('#num-4').addEventListener('click', onClickButton('4'));
document.querySelector('#num-5').addEventListener('click', onClickButton('5'));
document.querySelector('#num-6').addEventListener('click', onClickButton('6'));
document.querySelector('#num-7').addEventListener('click', onClickButton('7'));
document.querySelector('#num-8').addEventListener('click', onClickButton('8'));
document.querySelector('#num-9').addEventListener('click', onClickButton('9'));
์ฌ๊ธฐ๊น์ง ์ซ์ ๋ฒํผ addEventListener ์ค์ธ๊ฑฐ
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
if (operator) {
numTwo += event.target.textContent;
} else {
numOne += event.target.textContent;
}
$result.value += event.target.textContent;
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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);
3. ์คํผ๋ ์ดํฐ ๋ฒํผ ์ด๋ฒคํธ ๋ฆฌ์ค๋
const onClickOperator = (op) => () => {
if (numOne) {
operator = op;
$operator.value = op;
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํ์ธ์.')
}
};
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', () => {});
document.querySelector('#clear').addEventListener('click', () => {});
4. onClickNumber ์ด์ค if๋ฌธ ์๋ณด๊ธฐ
์ด์ onClickNumer๋ฅผ ์๋ด์ผ ํจ
if ๋ฌธ์ด 2๊ฐ๋ผ์ ์์๋ฅผ ์กฐ์ ํด์ 1๊ฐ๋ก ๋ง๋ค์ด์ผ ํ๋ค
const onClickOperator = (event) => {
if (operator) {
if (!numTwo) {
$result.value = '';
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
} else {
numOne += event.target.textContent;
$result.value += event.target.textContent;
}
}
๊ทธ๋ฅ operator์ด ์กด์ฌํ๋ ๊ฒฝ์ฐ์ ์กด์ฌํ์ง ์๋ ๊ฒฝ์ฐ๋ก ๋ถ๊ธฐ์ ์ ์ก์์ผ ํจ
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
if (!operator) {
numOne += event.target.textContent;
$result.value += event.target.textContent;
return;
} else {
$result.value = '';
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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);
5. clear ๋ฒํผ, = ๋ฒํผ ์ด๋ฒคํธ ํธ๋ค๋ฌ
document.querySelector('#calculate').addEventListener('click', () => {
if(numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = parseInt(numOne) - parseInt(numTwo);
break;
case 'x':
$result.value = parseInt(numOne) * parseInt(numTwo);
break;
case '/':
$result.value = parseInt(numOne) / parseInt(numTwo);
break;
default:
break;
}
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํด๋ผ~');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = '';
$result.value = '';
});
์ ์ฒด ์์ค
<!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: 180px; height: 50px; margin: 5px; text-align: right }
#operator { width: 50px; height: 50px; margin: 5px; text-align: center }
button { width: 50px; height: 50px; margin: 5px }
</style>
</head>
<body>
<input readonoly id="operator">
<input readonly type="number" 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>
</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">4</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 numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
if (!operator) {
numOne += event.target.textContent;
$result.value += event.target.textContent;
return;
} else {
$result.value = '';
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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);
const onClickOperator = (op) => () => {
if(numOne) {
operator = op;
$operator.value = op;
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํด๋!');
}
};
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', () => {
if(numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = parseInt(numOne) - parseInt(numTwo);
break;
case 'x':
$result.value = parseInt(numOne) * parseInt(numTwo);
break;
case '/':
$result.value = parseInt(numOne) / parseInt(numTwo);
break;
default:
break;
}
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํด๋ผ~');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = '';
$result.value = '';
});
</script>
</body>
์ฌ๊ธฐ๊น์ง ์ผ๋จ ์์ฑ
ํ ์คํธ ๋๋ ค๋ณด๋ 5+7 ํด๋ณด๋๊น ๊ฒฐ๊ณผ๊ฐ์ด 12 ์ ๋จ
C๋ฒํผ์ด ์ ๋จนํ์ ํด๋ฆฌ์ด ์ด๋ฒคํธ ํธ๋ค๋ฌ ์คํ ์์ ํจ~
์์ ์ ์ฒด ์ฝ๋์๋ ์คํ ์์ ํ ์์ฑ๋ณธ ์ฌ๋ ค ๋์
์ 2ํธ์์๋
1. ์ซ์ ์ง์ธ ์ ์๋ backspace ๋ฒํผ
2. ๊ณ์ฐ๊ธฐ์ ํ์คํ ํค ์ ํ๊ธฐ
3. ๋ค์ค ๊ณ์ฐ์ ์ํด ์ซ์์ ์ฐ์ฐ์ ์ ๋ ฅ์ ์ด์ด์ ๋ฐ์ ์ ์๋๋ก ๋ก์ง ๊ฐ์ .
์๊ฐ ํด ๋ณด๋ ํ์คํ ํค ์ ํ๋ ๊ฑธ ๊ฐ์ฅ ๋ง์ง๋ง์ ํด์ผ ํ ๊ฒ ๊ฐ๋ค~
https://awesomepossum.tistory.com/315
[์๋ฐ์คํฌ๋ฆฝํธ] โจ html/css/js๋ก ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ ์ 2ํ ๐ง๐ปโ๏ธโจ
https://awesomepossum.tistory.com/314 [์๋ฐ์คํฌ๋ฆฝํธ] html/css/js๋ก ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ ์ 1ํ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ฐ๋จํ๊ฒ ๊ณ์ฐ๊ธฐ ๋ง๋ค์ด ๋ณด๊ธฐ ใ ใ ใ ๊นํ๋ธ์ ์ฌ๋ ค์ผ ํ๋๋ฐ ๊นํ๋ธ ํ ๋ฒ ์ ๋ฆฌํ๊ณ ์๋ด์ผ ๋์
awesomepossum.tistory.com
