계산기 (구현편)
기본 동작
- 숫자 버튼을 눌렀을 때, 계산기 화면에 숫자가 보여야 한다.
- 숫자를 연속으로 눌렀을 경우 숫자가 이어 붙어야 한다.
- 연산자 기호를 누르면 계산기 화면에 보이는 숫자는 사라진다.
- 첫번째 숫자, 연산자 기호, 두번째 숫자를 입력받은 후,
=오퍼레이터 버튼을 누르면 계산을 한다. - 계산된 결과 값을 화면에 출력한다.
AC버튼을 누르면 모든 값이 초기화된다.
응용 동작
- 소수점은
0아닌 다른 수 뒤에만 한번 붙어야 한다. - 소수점을 포함한 (실수) 연산을 할 수 있다.
- 숫자, 연산자, 숫자를 입력 후, 다시 연산자를 누르면 앞서 입력한 수를 계산하고 결과를 출력한다.
1+3를 누른 후+를 누르면4+가 출력. - 초기화하지 않고 결과 값에 연속적으로 연산을 수행 할 수 있다.
- 연산자를 누를 경우
isPressed클래스를 추가하고 다음 버튼을 누를 때까지 유지한다. - 계산을 수행 후
=를 연속해서 누를 경우, 마지막 연산자로 두번째 숫자를 누적 연산한다.1+3enterenter를 누를 경우 7이 결과값으로 출력된다.
Bare, Advanced, Nightmare 로 진행이 되고 결과는 통과!
하지만 모든 경우의 수를 막기에는 아직 부족한 것 같다. 이것 저것 테스트 해보던 중에 연산자를 정정하고 같은 값을 계속 반복하면 기댓값과는 다르게 나온다던지.. 이렇게.
89*-9=결과: 80 (기댓값 80) 이어서..
80*-9=결과: -9 (기댓값 71)
아직 너무 욕심 부리지 말고, 이번 계산기는 여기까지. 케이스 바이 케이스로 적용하다보니 if문 조건식도 매우 복잡하다. 한눈에 이해하기가 더럽 어렵다.
내가 만들었던 계산기에 적용하기
화면이 너무 커서 0.5x 배수로 보셔야 합니다!
코드펜에서 어떻게 적용하는지 모르겠당
기본 계산기
뉴모피즘 테마 계산기
첫번째 기본 계산기는 문제없이 잘 적용됐는데, 두번째 계산기는 쓸데없이 누적된 숫자를 보여주는 기능을 넣어서 추가로 작업을 해주었다. display.textContent에 입력하는 것과 동일한 방식이지만, = 버튼을 누를 때 초기화하고 결과값을 보여주는 것과, 연산자를 누른 후 다시 연산자를 누르면 slice()를 사용해 전에 넣은 연산자를 삭제 후 새로운 연산자를 누적하는 등의 식이었다.
테스트를 계속 해보다가 점점 이상한 동작이 많이 발견되어서 그만해야겠다. 계산기의 늪에 빠져드는 이 느낌.. 일단 여기까지 정리하고 회고하자면, 페어와 실시간 세션을 거쳐, 내가 디자인(?)한 계산기를 구현하다니 역시 이 맛 흥미롭다.
끗
XD