계산기 구현하기

계산기 구현 - User flow에 따라 기능 구현하기 개요

기본적인 계산기의 기능을 구현하는 것이 과제인데, 특히 신경써서 구현해야 할 부분은 아래와 같다.

. 버튼을 활용하여 소수를 입력받기
. 버튼을 연속적으로 눌러도 .은 처음 단 한 번만 입력되어야 함
정수 부분 없이 . 버튼과 숫자를 눌러 작동시키는 경우는 소수가 나타나야 함 (.5 === 0.5)
Enter 버튼을 여러 번 클릭했을 때, 변수 previousNum을 활용하여 이전 숫자를 계속 더할 수 있어야 함
연산자 버튼을 누르기 전 숫자 버튼을 누른 후, 실수로 Enter를 여러 번 눌러도 정상 작동해야 함
연산자 버튼을 연속적으로 눌러도 계산 값에 영향이 없어야 함

CSS에서 신경써야 할 부분은 다음과 같다.

연산자 버튼을 눌렀을 때 적절한 클래스를 추가하여 연산자 버튼의 색 변경

계산기 구현 js파일

스크립트 파일은 무슨 버튼을 눌렀느냐에 따라 진행이 달라진다. 우선 숫자 버튼이다. 숫자 버튼을 눌렀을 경우 고려해야 할 경우는 크게 두 가지이다. 우선 숫자를 처음 누르거나, 연산자 다음 누르거나, 계산이 다 끝난 후 누른 경우이다. 이 경우는 디스플레이의 숫자를 방금 누른 숫자로 바꿔준 후, 숫자 버튼을 눌렀다는 사실을 기록하면 된다. 그리고 이미 디스플레이에 숫자가 있는 경우인데 이는 그저 디스플레이의 숫자 뒤에 누른 숫자를 덧붙이면 된다.

그 다음은 연산자 버튼이다. 연산자 버튼의 경우, 우선 연산자 입력 전에 숫자를 입력했으면서 누른 연산자가 첫 연산자가 아닌 경우를 고려한다. 만약, 그렇다면 firstNum 변수에는 이미 기록되어 있던 숫자와 이전의 연산자를 통해 계산을 진행한다. 혹은 이전에 누른 키가 연산자가 아닐 경우도 있다. 이 경우에는 디스플레이의 숫자가 연산자 기준의 왼쪽 수라는 뜻이므로 디스플레이의 숫자를 firstNum 이라는 변수에 기록한다. 미리 고려해야 할 사항들을 체크한 후, 누른 연산자 버튼을 저장한다.

그 다음은 소수점 버튼이다. 만약 이전에 누른 키가 소수점이 아니라 연산자라면 디스플레이를 비운다. 그 후, 디스플레이에 .을 추가한 후 소수점 버튼을 눌렀음을 기록한다. 만약, 이전에 누른 버튼이 소수점 버튼이라면 아무 일도 일어나지 않게 한다.

그리고 clear 버튼의 경우, 다른 것을 고료할 필요 없이 모든 값들을 초기화시킨다.

마지막으로 calcultae 버튼이다. 전에 누른 버튼이 똑같이 calculate 버튼이라면 전술하였던 조건을 충족시키기 위하여 디스플레이에 이전에 활용했던 값들을 이용해 계산한 값을 띄운다. 만약 그렇지 않을 경우, 연산자 기준 왼쪽 수가 있을 경우는 계산을 진행한다.

그리고 각 버튼들이 눌렸을 경우, html 코드 내의 모든 pressed 클래스를 지우고 눌린 버튼에 pressed 클래스를 추가한다.

계산기 구현 - CSS

계산기 목업의 css와 다른 점은 pressed 클래스가 있을 때는 색과 크기를 다르게 해준다는 것이다.