· What?

계산기 만들기

배운것을 기록은 했으나 틀릴 가능성이 매우 높고 수정할 내용이 대다수입니다.

Bare Minimum Requirements

과제에서는 html, css를 모두 주었고 js에 TODO 리스트를 주석으로 넣어 계산기를 만듬으로써 그동안 배웠던 js 문법을 정확하게 파악하고 있는지 확인하고 싶었던 것 같다.

calculate 함수 만들기

function calculate(n1, operator, n2) {
  let result = 0;
  if (operator === '+') {
    result = parseFloat(n1) + parseFloat(n2);
  } else if (operator === '-') {
    result = parseFloat(n1) - parseFloat(n2);
  } else if (operator === '*') {
    result = parseFloat(n1) * parseFloat(n2);
  }  else if (operator === '/') {
    result = parseFloat(n1) / parseFloat(n2);
  }
    return String(result);
}

계산기를 만들기 전 계산을 담당하는 함수를 제작하고 소수점 밑으로 계산할 것으로 생각해서 parseFloat()를 이용했다.

0 + 0 = 0 이 기본형인 계산기 만들기

let operb = true; //operator가 존재하는지 존재하지 않는지 여부를 따지기 위한 변수
buttons.addEventListener('click', function (event) {
// 버튼을 눌렀을 때 작동하는 함수입니다.

const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.


if (target.matches('button')) {
  if (action === 'number') {
    if (operb === true) {// operator가 존재하지 않는다면 첫번째 숫자에 숫자를 넣는다
      firstOperend.textContent = buttonContent;
    } else {// 존재한다면 두번째 숫자에 숫자를 넣는다
      secondOperend.textContent = buttonContent;
    }
  if (action === 'operator') {
    if (operb === true) {
      operator.textContent = buttonContent;
      operb = false; //operator 가 존재한다로 바꿔줌
    }
  if (action === 'decimal') {      
  }

  if (action === 'clear') {
    firstOperend.textContent = 0;
    secondOperend.textContent = 0;
    operator.textContent = '+';
    calculatedResult.textContent = 0;
    operb = true; //operator가 존재하지 않는것으로 바꿈)  
  }
  if (action === 'calculate') {
    calculatedResult.textContent = calculate(Number(firstOperend.textContent), operator.textContent, Number(secondOperend.textContent));
  }
}
});

정신나간 생각이지만 첫 숫자를 0으로 지정하고 싶어할수도 있다고 생각했기 때문에(계산기 가지고 놀때 많이 그랬다) if (action === 'number') 숫자부분을 코딩할 때 숫자 0이 아닌 연산자의 여부로 숫자를 넣고 싶었고 실제로 그렇게 넣었지만 군더더기가 많아졌다.

check list

• clear 버튼을 눌렀을 때, 화면에 0, +, 0, =, 0 순서로 보여야 합니다.
• 처음 숫자 버튼을 눌렀을 때, 첫 번째 화면에 누른 숫자가 보여야 합니다.
• 숫자 버튼과 연산자 버튼을 눌렀을 때, 첫 번째 화면는 숫자, 두 번째 화면에는 연산자가 보여야 합니다.
• 숫자 버튼, 연산자 버튼, 숫자 버튼을 눌렀을 때, 화면에 숫자, 연산자, 순자의 순서로 보여야 합니다.
• 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 눌렀을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과의 순서로 보여야 합니다.
• 연산 시 script.js의 calculate 함수를 활용해야 합니다.
• clear 버튼을 눌렀을 때, 화면에 0, +, 0, =, 0 순서로 보여야 합니다.

체크리스트는 모두 통과했기 때문에 Bare minimum test는 통과 했다.

Advanced Challenge Test

//코드는 삭제, 똑같은 코딩을 올리는 것은 지양해야한다는 메시지를 받음

Step 1 - 숫자 버튼을 누르고 화면에 숫자를 입력하기
Step 2 - Enter 버튼을 눌러 계산하고, AC 버튼으로 초기화 시키기
AC 버튼이 잘 클릭 되는지 테스트 합니다.
등 다양한 종류의 계산기에 관련된 문제가 있었고 별 문제 없이 예외사항을 제외하고 모두 풀어냈다.

그 뒤 심화 문제를 풀 때, 문제의 조건마다 계속해서 if를 추가하거나 기존에 있는 것에 새로운 것을 더해주다보니 완성된 것이 난잡하고 지저분한것을 확인할 수 있었다. 결론적으로 몇번이고 다시풀어보고 reference를 확인해봐야겠지만 처음 문제를 보고 문제에서 원하는것을 확인하여 정확한 수도코드를 짜는 것이 최우선으로 해야한다고 생각한다. 일단 말로 먼저 풀어놔야 코드를 작성할때 번잡한것도 줄어들고 정확하게 원하는 것을 만들어 낼 수 있을 것 같다.