[2주차] 💻🏃‍♂️ - 계산기 구현하기

오늘은 3일동안 배운 js 기초를 활용하여 계산기가 구현이 되도록 코드를 입력해보았다.

오늘도 하면서 정말 많은 멘붕이 있었다... 그래도 Pair와 함께해서 좀 더 수월하게 풀어나갈 수 있었던 것 같았다. 

---

✍️  계산기 구현

Bare Minimum Requirements

 

계산기에는 5가지 종류의 버튼이 있습니다.

1. 숫자 버튼
2. 연산자 (+, -, *, /) 버튼
3. 소수점 버튼
4. 계산 (Enter) 버튼
5. 초기화 (AC) 버튼

⭐️  기능 구현 순서

1.  화면의 첫 번째 칸에 숫자 나타내기

2. 화면의 두 번째 칸에 숫자 나타내기

3. 화면에 출력된 숫자와 연산자로 계산하기

4. 화면 상의 값을 초기화하기

 

코드 실행

calculate 함수

 

계산기 작동

 

해설

1. 연산시 script.js의 calculate 함수를 활용할 수 있도록 calculate를 작성한다.

2. 첫번째 입력이 0이면 첫번째 화면에 0이 들어가고 첫번째 입력에 0이 아니면 두번째 입력으로 넘어간다. 

3. 처음 숫자 버튼을 클릭했을 때, 첫번째 화면에 클릭한 숫자가 나타나야 한다.

4. 숫자 버튼과 연산자 버튼을 순서대로 클릭을 하면, 첫번째 화면에는 숫자, 두번째 화면에는 연산자가 나타나야 한다.

5. AC버튼을 클릭 했을 때, 화면에 초기값인 0 + 0 = 0 이 순서대로 나타나야한다. 

 

✍️  User flow에 따라 기능 구현하기

Advanced Challenges 테스트

Step1 - 숫자를 클릭하여 화면에 입력하기

• 연산자(operator)를 눌러도 첫번째 입력한 수는 화면에 그대로 출력된다.
• textContent를 활용한다.

Step2 - 연산자 버튼을 클릭하여 계산을 준비하기

• 변수 previousKey를 이용하여 이전에 클릭한 버튼이 숫자인지, 연산자인지 구분하여 코드를 작성.
• 연산자(operator)를 입력 후 두번째 수를 입력하면 두번째 수는 화면에 나타나고 첫번째 수는 변수에 담긴다. 
• 입력된 연산자는 임의의 변수에 담긴다.

Step3 - Enter로 계산하고, AC로 초기화하기

• enter가 클릭되면 calculate함수에 의한 결과값이 계산기의 화면에 출력된다.

 

⭐️  Step1 - 숫자를 클릭하여 화면에 입력하기

 

 

⭐️  Step2 - 연산자 버튼을 클릭하여 계산을 준비하기

 

⭐️  Step3 - Enter로 계산하고, AC로 초기화하기

 

⭐️ 중요

previouskey는 이전값을 설정해주는 값으로 꼭 할당을 해줘야 한다. 

초기화 해줄때는 undefined