4/21 [JavaScript]계산기 구현하기

필요한 값들은 상수로 선언 되어있어서 가져다 사용하는 방법으로 코드를 만들었다.

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

const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
  // ! 위 코드(Line 19 - 21)는 수정하지 마세요.
  let firstNum = 0;
  let secondNum = 0;
  if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
     if (firstOperend.textContent !== '0'){
      secondOperend.textContent = buttonContent;
      secondNum = Number(buttonContent);
      return secondNum
     } else if (firstOperend.textContent === '0'){
      firstOperend.textContent = buttonContent;
      firstNum = Number(buttonContent);
      return firstNum
     }
      console.log('숫자 ' + buttonContent + ' 버튼');
    }
    if (action === 'operator') {
      operator.textContent = buttonContent;
      console.log('연산자 ' + buttonContent + ' 버튼');
    }
    if (action === 'decimal') {
      // console.log('소수점 버튼');
    }
    if (action === 'clear') {
      console.log('초기화 버튼');
      firstOperend.textContent = '0';
      secondOperend.textContent = '0';
      operator.textContent = '+';
      calculatedResult.textContent = 0;
    }
    if (action === 'calculate') {
      let result = calculate(firstOperend.textContent,
        operator.textContent, secondOperend.textContent);
        calculatedResult.textContent = result;
      console.log('계산 버튼');
    }
  }
});

첫번째 과제 코드 ✅
문제를 풀고 깃헙에 업로드 하는것 까지 과제이다.

1. github 과제제출 페이지 접속후 우측 상단의 Fork를 클릭
2. github 저장소를 나의 github 저장소로 옮겨준다.
3. Add File 을 클릭하고 수정된 파일을 Drog & Drop 해주고 Commit Change!
4. Pull Request 를 누르고 Nwe Pull Request => Create Pull request
5. 제목과 내용을 작성후 버튼을 눌러준다.

서계산식을 구현하는 함수를 풀어본 적은있지만,
만들어진 폼에서 계산기를 작동시키는 코드는 다소 생소했던것 같다..

우선 깃헙에서 다운로드 하는것 부터 막혀
코드를 복사 붙여넣기 하는식으로 진행하였는데, 페어분의 도움으로 깃헙에서
다운로드 하는 방법을 배워 VScode로 무사히 과제를 마무리 하였다.