[CS] JavaScript 계산기 만들기 Day-6

Bare Minimum Requirements란?

소프트웨어가 그 역할을 하기에 필요한 최소한의 요구사항입니다. 프로토타입으로 빠르게 만들어진 것을 뜻하며 이후 기획자, 디자이너와 함께 UX를 개선해야 합니다. 이후 테스트를 하면서 소프트웨어에서 생길 수 있는 오류를 좀 더 빠르게 예측할 수 있습니다.

Basic Project

1. 기존 틀 CSS 수정하기
2. 버튼을 클릭했을 때, 버튼이 잘 동작하는지 개발자 도구의 콘솔 탭 확인
3. 연산 시 JavaScript 함수를 활용할 수 있도록 함수 작성

CSS 수정

1. font-family 변경하기
2. width, border-radius 속성의 값을 변경
3. background-color 속성 변경
4. padding 속성의 값을 변경
5. border, border-bottom 속성 추가해보기
6. margin 삭제 또는 주석처리
7. HTML 적용된 CSS 변경해보기

버튼 동작 확인

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

계산기 함수 기능 구현하기

기존틀

function calculate(n1, operator, n2) {
  let result = 0;
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  return String(result);
}

pseudocode 적용

function calculate(n1, operator, n2) {
  let result = 0;
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  if(operator === '+'){
    result = Number(n1) + Number(n2);
  } else if(operator === '-'){
    result = Number(n1) - Number(n2);
  } else if(operator === '*'){
    result = Number(n1) * Number(n2);
  } else if(operator === '/'){
    result = Number(n1) / Number(n2)
  }
  return String(result);
}

textContent를 활용한 텍스트 값 읽어오기

기존틀

buttons.addEventListener('click', function (event) {
  // 버튼을 눌렀을 때 작동하는 함수입니다.

  const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
  // ! 위 코드(Line 19 - 21)는 수정하지 마세요.

  if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      // 그리고 버튼의 클레스가 number이면
      // 아래 코드가 작동됩니다.
      console.log('숫자 ' + buttonContent + ' 버튼');
    }

    if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
    }

    if (action === 'decimal') {
      // console.log('소수점 버튼');
    }

    if (action === 'clear') {
      console.log('초기화 버튼');
    }

    if (action === 'calculate') {
      console.log('계산 버튼');
    }
  }
});

pseudocode 적용

buttons.addEventListener('click', function (event) {
  // 버튼을 눌렀을 때 작동하는 함수입니다.

  const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
  // ! 위 코드(Line 19 - 21)는 수정하지 마세요.

  if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      // 그리고 버튼의 클레스가 number이면
      // 아래 코드가 작동됩니다.
      if(firstOperend.textContent === '0'){
        firstOperend.textContent = buttonContent;
      } else if(firstOperend.textContent !== '0'){
        secondOperend.textContent = buttonContent;
      }
      console.log('숫자 ' + buttonContent + ' 버튼');
    }

    if (action === 'operator') {
      operator.textContent = buttonContent;
      console.log('연산자 ' + buttonContent + ' 버튼');
    }

    if (action === 'decimal') {
      // console.log('소수점 버튼');
    }

    if (action === 'clear') {
      firstOperend.textContent = '0';
      operator.textContent = '+';
      secondOperend.textContent = '0';
      calculatedResult.textContent = '0';
      console.log('초기화 버튼');
    }

    if (action === 'calculate') {
      return calculatedResult.textContent = calculate(firstOperend.textContent, operator.textContent, secondOperend.textContent);
      console.log('계산 버튼');
    }
  }
});