RECORD

[웹게임_자바스크립트] 계산기 만들기_🔢

ez1n 2022. 2. 12. 17:30

[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 = '';
}

 

 

🔢 결과물

연산 예시 (5 * 6 = 30)

 


 

거의 처음으로 함수를 사용하여 만들었던 결과물이라 어려웠던 부분이 많았지만 몇 가지를 간추려서 정리해 보았다.

 

사칙연산 기능만 넣었을 뿐인데도 생각보다 복잡했고 많이 부족하다는 것을 느꼈다.

 

아이폰 계산기와 유사하게 만들기 위해 css로 디테일에 신경을 많이썼는데 나름 비슷하게 나온 것 같아서 뿌듯하다 💪

 

복잡한 코드들은 조금 더 간결하게 정리할 예정이다.

 

뚝딱뚝딱 코딩할 수 있는 그날까지 오늘도 화이팅!

 

코드 전체보기는 🔗ez1n_github 클릭하기!

 

 


 

ttugttag-coding