본문 바로가기
개발 일지

S1: JS계산기 만들기

by StelthPark 2021. 9. 3.

계산기 만들기

1. 숫자버튼을 누르면 화면에 그 해당하는 숫자가 출력된뒤 연속으로 누르면 이어 붙여져야한다.

버튼 종류중 number버튼인 숫자버튼을 누를시 현재화면(display.textcontent)가 0이거나 이전에 누른 키가 operator일시 첫 숫자를 화면에 출력한다. 이후 다시 버튼을 누를시 첫if문에 해당하는 내용아니면 현재 숫자에 숫자를 이어붙인다. 숫자버튼은 누를때마다 이전에 누른키가 number로 전환 된다.

 

2. 첫 숫자 입력후 연산자 입력시 현재 화면에 있던 숫자를 변수에 기억한뒤 사라진다.

화면에 있던 첫 숫자는 firstNum에 저장하며 현재 연산자는 operatorForAdvanced에 저장시킨다. 이후 연산자버튼을 눌렀으니 이전에 누른키는 operator로 전환된다.

 

3. 소수점 버튼을 누르게 되면 우선 현재 화면에 있는 숫자가 .을 포함하는지 검사한뒤 있으면 return으로 종료 없으면 그 숫자가 무엇인지에 따라 처리하게 0.으로 표현을것인가 .을 붙여 숫자를 이어붙이게 해줄것인가 판단한다.

현재화면에 있는 숫자가 0이거나 이전에 누른키가 operator(연산자버튼을 눌렀으니 두번째 숫자를 입력받을차례)였거나 calculator(엔터로 계산했으니 새로운 첫숫자를 받을 차례) 일 시 화면에 0.을 출력하고 그외에는 현재 화면에 1,2,3등 0이상의 자연수이니 .을 붙여준다.

 

4. AC버튼을 누를 시 전체 변수와 처음상태로 초기화 시켜야 한다.

화면에 보이는 숫자, 첫번째로 저장한 숫자, 현재 연산자, 이전에 누른키를 모두 초기화한다.

 

5. Enter버튼을 누를 시 firstNum(첫번째 수)와 화면에 있는 숫자를 previousNum에 저장하여 calculate함수에 의해 계산하여 화면에 다시 뿌린다.

엔터를 연속으로 입력할시 calculate가 끝날때 마다 이전에 누른키를 calculate로 전환하니 if문으로 이전의 키가 calculate인지 검사하여 맞으면 첫번째로 넣은 값을 계속 연산하여 뿌려줄수 있도록 한다.

 

6. 연산자를 누를 시 background-color가 초록색으로 변하고 AC나 Enter을 누를시 원색으로 초기화 되도록 한다.

연산자 누를 시 색 변환속성을 추가

 

AC나 Enter 누를시 원색으로 돌리는 속성 추가

댓글