9/4 TIL

<목차>

1. 내가만든 계산기 js기능구현
2. 회고

1. 계산기 js 기능구현

const calculator = document.querySelector('.calculator');
const result = document.querySelector('.result');
const contents = document.querySelector('.contents');
const operator = document.querySelector('.operator')
const calculation = document.querySelector('.calculation');
const firstNum, operatoration, previousKey, previousNum;

<먼저 기능구현에 필요한 변수들을 선언을 해주었다.>

contents.addEventListener('click', function(event) {
  //버튼 눌렸을 때 진행되는 함수

  const target = event.target; // 클릭한 함수 가져온다.
  const action = target.classList[0]; // 클릭된 요소에 클레스 정보를 가져와준다
  const buttonContent = target.textContent;
  


  if (target.matches('button')) {
    if (action === 'number') {
      console.log(buttonContent);
      if (result.textContent === '0' || previousKey === 'operator') {
        
        result.textContent = buttonContent;
      } else {
        result.textContent += buttonContent;
      }
      // 연산자를 누르면 초기화시키고 다시 입력이 되야한다
     previousKey = 'number';
    }

    if (action === 'operator') {
      firstNum = result.textContent;
      operatoration = buttonContent;
      previousKey = 'operator';
      console.log(previousKey);
      console.log(operatoration);
    }

    if (action === 'clear_ac') {
      result.textContent = '0';
      firstNum = undefined;
      operatoration = undefined;
      
      
    }

    if (action === 'calculation') {
      previousNum = result.textContent;//계속해서 enter가 작동되도록 설정
     result.textContent = calculate(firstNum, operatoration, previousNum)
     console.log('결과');
    }
    
  }


})

< js기능 구현 코드 >

function calculate(n1, operator, n2) {
  let result = 0;

  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);
}

< 계산기 연산을 위한 함수 >

2. 회고

오늘은 이전에 학습하였던 계산기 목업에 js기능구현을 해보았다. 얼마전에 했던 js기능구현은 이미 코드스테이츠에서 기본적으로 작성되었던 목업과 작업에 필요한 변수들이 선언이 되어있던 코드에 작업을 하였던 것이었다. 그래서 나는 내가 직접 백지에서 처음부터 코드를 작성해보고 싶은 마음에 직접 목업을 작성하여 js에 기능을 입혀보았다. 변수선언이나 계산기 기능 중 계산 숫자를 입력받는 함수는 만들기 쉬웠지만 기호연산자 입력 이후 숫자 입력에서는 이전에 const firstNum, operatoration, previousKey, previousNum; 이 변수선언을 calculate(연산함수)에 잘못 집어넣는바람에 시간을 낭비했었다... 코드스테이츠에서 코드를 받아서 제작한 것 보다 이렇게 내가 백지부터 끝까지 다 작성을하니 뿌듯하기도 하였다. 그리고 매번 코드를 깃에 한꺼번에 commit을 했었는데 오늘은 실제 프로젝트에서 기능별 commit 하는 것처럼 해보았다. 목업을 만들고 commit, 숫자를 이어입력받는 기능에 commit, 연산과 AC(클리어)기능에 commit을 하여 기능별로 커밋을 하였다.