4회차 과제 - 김정운

[vni911]

신경써서 구현한 부분

1. 계산 함수 구현

const calculate = (e) => {
  const value = e.currentTarget.innerText;

• value에 클릭된 버튼의 텍스트 값을 가져온다.

  if (value === "=") {
    resultNum = eval(formula).toFixed(2).toString();
    result.innerText = resultNum;
    formula = resultNum;
    return;
  }

• =을 누르면 eval()로 계산하고 .toFixed(2)로 소수점 둘째 자리까지 반올림 후 문자열로 변환

---

2. 이벤트 리스너 구현

const numButtons = document.querySelectorAll(".num-bt");
numButtons.forEach((button) => {
  button.addEventListener("click", (e) => {
    calculate(e);
  });
});

const calcButtons = document.querySelectorAll(".calc-btn");
calcButtons.forEach((button) => {
  button.addEventListener("click", (e) => {
    calculate(e);
  });
});

• .num-bt, .calc-btn 클래스를 가진 모든 버튼에 click 이벤트를 등록
• 버튼을 누르면 calculate() 함수를 호출하여 계산 함수를 실행

---

3. 기록 업데이트 함수 구현

const updateHistory = () => {
  historyWrap.innerHTML = "";

  historyList.forEach((item, index) => {
    const li = document.createElement("li");

    const span = document.createElement("span");
    span.innerText = item;

    const deleteButton = document.createElement("button");
    deleteButton.innerText = "삭제";

    deleteButton.addEventListener("click", () => {
      deleteHistory(index);
    });

    li.appendChild(span);
    li.appendChild(deleteButton);
    historyWrap.appendChild(li);
  });
};

const deleteHistory = (index) => {
  historyList.splice(index, 1);
  updateHistory();
};

• 배열을 기반으로 계산 기록을 <li> 요소로 만들어 출력

[eveveev]

span을 따로 만들었기 때문에 나중에 스타일 확장을 쉽게 할 수 있다는 것이 좋은 것 같습니다!

[eveveev]

전반적으로 코드가 간결해서 읽기 쉬워 좋은 것 같습니다!

[Limtaehyeon]

이해하기 좋은 코드인 것 같습니다!

[Limtaehyeon]

참고 영상을 보면 지우는 버튼이 "X" 로 되어있기 때문에 삭제 대신에 "X" 로 해주는 것이 좋을 것 같습니다!!

[Limtaehyeon]

변수명을 알아보기 싶게 li, span, item 으로 작성해서 자세히 이해할 수 있는 부분이 좋았습니다!