caculator 스프린트

오늘은 html과 css 기초와 변수, 함수, 타입, 조건문, 반복문을 배운내용을 토대로 계산기를 만드는 스프린트를 진행 하였다.
이 스프린트는 Bare Minimum Requirements, Advanced Challenges,Nightmare 3단계로 진행을 하였고 단계가 넘어갈 수로 더 심화된 문제를 풀 수 있었다.
우선, 1단계 Bare Minimum Requirements 부터 살펴 보자!

Bare Minimum Requirements

CSS 마음껏 수정하여 예쁜 계산기 만들기
페어와 css를 진행한 결과 다음과 같은 결과가 나왔다.

버튼의 색깔과 그림자 효과를 넣어 주었고, 버튼 정렬을 조정하여 더욱더 보기 좋게 바꾸어 주었다.

기본적인 계산 기능 구현하기

////caculator의 사칙 연산 함수를 완료한다
function calculate(n1, operator, n2) {
  let result = 0;// resultf라는 변수 선언과 0을 할당한다.
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  let strNum1 = num(n1); // n1, n2 변수를 각각 선언하고 할당한다.
  let strNum2 = num(n2);
  if (operator === '+') result = strNum1 + strNum2;
  else if (operator === '-') result = strNum1 - strNum2; 
  else if (operator === '*') result = strNum1 * strNum2;
  else if (operator === '/') result = strNum1 / strNum2;
  //operator 가 +,-,*,/	일때 각각 조건을 주어 n1,n2변수에 각각 선언한다
  return String(result);
  //result를 리턴한다
}


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')) {

    // 클릭된 HTML 엘리먼트가 button이면 그리고 버튼의 클레스가 number이면 코드 실행 
    if (action === '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';
      secondOperend.textContent = '0';
      calculatedResult.textContent = '0';
      console.log('초기화 버튼');
    }

    if (action === 'calculate') {//최종 계산 값이 화면상에 나올 수 있도록 한다.
      calculatedResult.textContent = calculate(firstOperend.textContent, operator.textContent, secondOperend.textContent)
      console.log('계산 버튼');
    }
  }
});

Bare Minimum Requirements를 하면서 css들의 새로운 메소드들을 많이 알게 되었고, textContent를 통해 html에 특정 부분을 js 파일로 불러 들여 조건을 넣어 화면상에서 구현이 되는 과정이 너무 신기했다.

Advanced Challenges

Advanced Challenges는 코드스테이츠 측에서 제공한 디렉토리에서 몇개의 주석을 풀고 주석처리를 해주어야 풀 수 있는 단계였다. 사실 주석 푸는 과정을 꼼꼼히 살펴보지 않아 SpecRunner가 제대로 작동하지 않았지만 다시 제대로 주석을 제거하니 정상적으로 돌아 갔다.
구현코드는 다음과 같다

const display = document.querySelector('.calculator__display--for-advanced'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
let firstNum, operatorForAdvanced, previousKey, previousNum;

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

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


  // ! 여기서부터 Advanced Challenge & Nightmare 과제룰 풀어주세요.
  if (target.matches('button')) {
    if (action === 'number') {
      if (display.textContent === '0'){ display.textContent = buttonContent;
      firstNum = display.textContent
      }
        else if (previousKey === 'operator') display.textContent = buttonContent;
        else if (display.textContent !== '0') display.textContent = display.textContent + buttonContent;
      //previousKey = 'number';
    }

    if (action === 'operator') {
      operatorForAdvanced = buttonContent;
      previousKey = 'operator';
      previousNum = display.textContent;
    }
    if (action === 'decimal') {
      if(!display.textContent.includes(buttonContent)){
        display.textContent = display.textContent + buttonContent;
      }
      //if(previousKey === 'operator'){
       // display.textContent = 0 +buttonContent;
      //}
      
    }

    if (action === 'clear') {
      display.textContent = '0';
      operatorForAdvanced = undefined;
      previousKey = undefined;
      firstNum = undefined;
      previousNum = undefined;
    }

    if (action === 'calculate') {
      previousKey = display.textContent; 
      display.textContent = calculate(firstNum, operatorForAdvanced, previousKey);
    }
  }

});

이 스프린트를 통해 js의 기본적인 문법은 어느정도 이해를 한거 같은데 아직 실제 코드에서 적용을 하기 어려웠다. 이같은 과제와 스프린트를 여러번 접해보면 언젠간 실제 코드에서도 적용을 잘 하는 날이 오지 않을까 바래본다.

Nightmare는 아직 풀고 있는 중이라 구현이 되면 블로깅을 해야겠다....