Bare Minimum Requirements

Step 1 - CSS 마음껏 수정하여 예쁜 계산기 만들기

calculate.html 파일은 그대로 두고, yourStyle.css 파일을 수정하여 자신이 원하는 디자인으로 계산기를 꾸며보세요.

Step 2 - 버튼이 잘 눌리는지 확인하기

• 버튼을 눌렀을 때, 각 버튼이 잘 작동하는지 콘솔 창을 열고 확인하세요.

Step 3 - 기본적인 계산 기능 구현하기

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

Step 4 - SpecRunner.html의 모든 테스트를 통과한 후 Github 홈페이지에 파일을 업로드 하여 과제 제출하기

미리 작성된 SpecRunner.html 파일을 열고, Requirements을 전부 구현했는지 확인 합니다.
무작정 따라하고 과제 제출하기 영상을 참고해서 코드스테이츠 레포지토리로 과제를 제출해봅시다.

아래 주석에 코드 해설을 함께 덧붙였다.

//script.js
const calculator = document.querySelector('.calculator'); // calculator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const buttons = calculator.querySelector('.calculator__buttons'); // calculator__keys 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

const firstOperend = document.querySelector('.calculator__operend--left'); // calculator__operend--left 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const operator = document.querySelector('.calculator__operator'); // calculator__operator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const secondOperend = document.querySelector('.calculator__operend--right'); // calculator__operend--right 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const calculatedResult = document.querySelector('.calculator__result'); // calculator__result 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

function calculate(n1, operator, n2) {
  let result = 0;
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
      
  // 네 가지의 사칙연산을 가정법을 통해 나열한다.
      n1 = Number(n1);
      n2 = Number(n2);
      if (operator === '+') {
        result = n1 + n2;     
      } else if (operator === '-') {
        result = n1 - n2;     
      } else if (operator === '/') {
        result = n1 / n2;     
      } else if (operator === '*') {
        result = n1 * n2;     
      }

  return String(result);
}

const res = [];
//각 숫자를 임시로 저장하는 배열을 전역에 선언하여 instant하게 사라지지 않도록 한다.

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(res.length === 0){
        //전역변수에 아무것도 담기지 않았을 때는
        res.push(buttonContent);
        // 변수를 담고
        console.log('숫자 ' + buttonContent + ' 버튼');
        firstOperend.textContent = buttonContent;
        // 첫 째 자리에 눌린 버튼을 표시한다.
        //firstOperend가 DOM에서 첫 번째 자리를 나타내고 있으므로 해당 위치의 텍스트를 현재 event.target의 항목으로 나타내면
        // 해당 버튼을 눌렀을 때 계산기 상단 화면에 잘 나타나는 것을 알 수 있다.
      } else if(res.length === 1) {
        // 전역변수수 길이가 1이라는 것은 이미 하나가 담긴것이므로
        res.push(buttonContent);
        // 변수를 담고
        console.log('숫자 ' + buttonContent + ' 버튼');
        secondOperend.textContent = buttonContent;
        // 두 번째 자리에 눌린 버튼을 표시한다.
      } else {
        // 두 번째 자리까지 채워지면 버튼 액션을 없앰.
      }
    }

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

    }

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

    if (action === 'clear') {
      console.log('초기화 버튼');
      firstOperend.textContent = 0;
      secondOperend.textContent = 0;
      operator.textContent = "+";
      calculatedResult.textContent = 0;
      //초기화 버튼 누르면 0 + 0 = 0을 만들면 됨. 각 자리에 해당하는 엘리먼트의 text를 각각 지정해주자.
      //이 때 전역변수 res를 함께 초기화 해야 한다.

      res.pop();
      res.pop();
    }

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

Github: Week 1-2 : Sprint - JaaScript Calculator