4회차 과제 - 조민서

[chominseo0723]

신경써서 구현한 부분

SelectorAll

여러개 버튼을 한 번에 일괄 이벤트 등록하여 반복문으로 이벤트 한 번만 처리

const num = document.querySelectorAll(".num-btn")
const calc = document.querySelectorAll(".calc-btn")

객체 생성

객체를 생성해 formula와 resultNum을 한 쌍으로 묶어 historyList에 추가한 후, updateHistory()로 화면에 반영하게하였습니다

 historyList.push({ formula, result: resultNum });
    updateHistory();

• historyList 는 전에 계산한 모든 수식, 결과를 담는 배열이므로 이 방식으로 새로 계산된 formula 와 resultNum 을 기록할 수 있습니다

계산함수

const calculate = (e) => {
  
  const key = e.target.innerText

  if(key === "=") {
    resultNum = eval(formula)
    resultNum = parseFloat(resultNum.toFixed(2))
    result.innerText = resultNum

    historyList.push({ formula, result: resultNum });
    updateHistory();

    formula = resultNum.toString();
  }
  else if (key === "C") {
    formula = "";
    result.innerText = "0";}
  else if (key === "←"){
    formula = formula.slice(0, -1);
    result.innerText = formula || "0";

  }
  else {
    formula += key;
    result.innerText = formula;
  }
};

• key 를 변수로 클릭된 값을 받아온 후 , 계산 기록으로 저장 후 화면을 갱신한다
• C 를 클릭했을 경우 초기화
• "←" 클릭 시 뒤로가기 효과를 나타내야 하므로 slice(0,-1) 하여 맨 마지막 한 글자만 잘라낸 새로운 문자열 반환 , 만약 빈문자열이면 "0" 을 나타냅니다
• 위 코드 중 ** formula = resultNum.toString() ** 으로 결과를 다음 수식의 시작값으로 설정하였습니다 예를 들어 "5 + 3 = 8" 을 한 후 x 3 을 누를 때 바로 8 x 3 계산 가능하도록하여 추가 입력 없이도 계산할 수 있도록하였습니다

질문

[hyeji-neee]

전체적으로 코드 흐름이 자연스럽고 잘 짜여진 코드인 것 같습니다! 수고하셨습니다 :)

[hyeji-neee]

과제 예시를 보시면 삭제 버튼의 모양이 X 모양이기 때문에 "삭제" -> "X" 로 바꾸면 좋을 것 같습니다!

[hyeji-neee]

C 버튼을 클릭했을 때 formula는 초기화되지만 historyList를 초기화하거나 history-wrap 영역의 내용을 업데이트하는 처리가 없어서 이전 계산 기록이 화면에 계속 남아있는 것 같습니다. C 버튼 클릭 시 historyList도 비우고 updateHistory() 함수를 호출하는 코드를 추가하면 좋을 것 같습니다!

[hyeji-neee]

객체를 생성해서 formula와 resultNum을 하나의 쌍으로 묶어서 historyList에 추가한다는 점이 인상 깊습니다!