[Java Script_ Calculator]
아이폰 계산기와 유사하게 만들어보자!
<STUDY>
🔢 변수 만들기
❔ 숫자, 문자를 저장할 변수 만들기
- 첫번째 숫자, 연산자, 두번쨰 숫자를 저장할 세 가지 변수가 필요하다.
- 숫자를 입력할 떄마다 바뀌어야 하기 때문에 const 대신 let을 사용한다.
let number1 = ''; //첫번째 숫자
let number2 = ''; //두번째 숫자
let operator = ''; //연산자
🔢 버튼 이벤트 만들기
❔ 숫자 버튼 클릭 이벤트 만들기
- 연산자가 저장되어 있는지를 기준으로 number1과 number2의 기능을 나누었다.
- 버튼을 누르는 순간 textContent를 이용하여 계산기 화면(result)에도 값을 출력한다.
const click_num = (event) => {
//operator_empty
if (!operator) {
number1 += event.target.textContent;
result.value = number1;
if (number1 != 0) {
reset.textContent = 'C';
} else if (event.target.textContent == '0') {
number1 = '0';
result.value = '0';
}
return;
}
//operator_full
if (number2 == '0' && event.target.textContent == '0') {
number2 = '0';
result.value = '0';
return;
}
if (!number2) {
result.value = '';
}
number2 += event.target.textContent;
result.value += event.target.textContent;
};
❔ '=' 버튼 클릭 이벤트 만들기
- 연산자가 저장된 변수 operator를 기준으로 switch를 사용한다.
- 연산된 값을 number1에 저장하고 operator와 number2을 비운다. (다음 계산 준비)
switch (operator) {
case '÷':
result.value = Number(number1) / Number(number2);
break;
case '×':
result.value = Number(number1) * Number(number2);
break;
case '-':
result.value = Number(number1) - Number(number2);
break;
case '+':
result.value = Number(number1) + Number(number2);
break;
}
number1 = result.value;
number2 = '';
operator = '';
❔ 부호(+/-) 버튼 클릭 이벤트 만들기
- 값(value)이 0이거나 없는 경우에 '-0', 값이 있는 경우에는 부호가 바뀌도록 한다.
if (!number1 || result.value == '0') {
number1 += '-0';
result.value = '-0';
} else {
number1 = String(-result.value);
result.value = number1;
number2 = '';
}
🔢 결과물
거의 처음으로 함수를 사용하여 만들었던 결과물이라 어려웠던 부분이 많았지만 몇 가지를 간추려서 정리해 보았다.
사칙연산 기능만 넣었을 뿐인데도 생각보다 복잡했고 많이 부족하다는 것을 느꼈다.
아이폰 계산기와 유사하게 만들기 위해 css로 디테일에 신경을 많이썼는데 나름 비슷하게 나온 것 같아서 뿌듯하다 💪
복잡한 코드들은 조금 더 간결하게 정리할 예정이다.
뚝딱뚝딱 코딩할 수 있는 그날까지 오늘도 화이팅!
코드 전체보기는 🔗ez1n_github 클릭하기!
ttugttag-coding
'RECORD' 카테고리의 다른 글
[Expo] 권한 설정 / Play Console 버전 검토, 기본 권한 설정 (0) | 2022.09.13 |
---|---|
[HTML] 파일 다운로드_📂 / a 태그, download, HTML (0) | 2022.08.20 |
[CKEditor5] 리액트에서 CKEditor5 사용하기_타입스크립트, 선언 파일 오류 (0) | 2022.08.13 |
[파이썬] for~else문 (0) | 2022.04.01 |
[웹게임_자바스크립트] 숫자 야구_⚾ (0) | 2022.02.11 |