[자바스크립트] 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>
'JavaScript' 카테고리의 다른 글
| [JavaScript] JSON 데이터 다룰때 기본적인 JS 사용법(배열, 객체 등) (41) | 2024.12.28 |
|---|---|
| [JavaScript] 서버 통신과 JSON (7) | 2024.12.22 |
| [자바스크립트] html/css/js로 계산기 만들기 제1탄 🧙🏻♀️✨ (5) | 2024.11.08 |
| [JavaScript] 자바스크립트 비동기 처리 promise then vs async await 차이점 (1) | 2024.05.23 |
| [Javascript] screen, location, history, navigator 객체와 속성 (+메서드) (0) | 2024.04.29 |
