FE
계산기 구현하기
뚱인데욥
2023. 4. 21. 17:44
페어와 함께 계산기의 버튼을 눌러 값을 나타내는 것까지 오늘 과제였다
여기 있는 이 계산기의 빈값을 숫자를 누르면 계산하게끔 만드는 것이었는데 머리속으로 어떻게 해야할지는 생각은 나는데 뭐부터 해야할지 몰라서 구글에 검색해서 다른 분이 한 코드를 보았는데 머리가 더 복잡해지고 이해가 안 갔다.. 페어분이 먼저 완성을 해서 스스로 해보려고 해봤는데 테스트를 돌렸더니 ..역시나 안 돌아간다 하하 그래서 결국 페어분이 하신 코드를 보면서 이해하고 여기에 이게 왜 들어가는지 물어보면서 따라 쳐봤다 보면 이해는 가는데 왜 내가 하면 안 될까.. 주말동안 다시 개념을 정리해야 할 것 같다
일단 첫 번째 칸에 숫자를 나타내는 코드이다 두 번째 칸의 숫자도 똑같이 해주었다
if (target.matches("button")) {
if (action === "number") {
if (operatorForAdvanced === "") {
// 첫번째 숫자 입력
if (firstOperend.textContent === "0") {
firstOperend.textContent = buttonContent;
} else {
firstOperend.textContent += buttonContent;
}
여기 변수 textContent는 target.textContent를 말한다
조건문인 if문을 사용하였고 첫 번째와 두 번째 값을 더한 결과 값을 나타내는 칸은 이렇게 결과값을 구현했다
로직을 이해하는데 조금 오래 걸렸다 ..
} else if (action === "calculate") {
const result = calculate(
firstOperend.textContent,
operatorForAdvanced,
secondOperend.textContent
);
calculatedResult.textContent = result;
firstOperend.textContent;
secondOperend.textContent;
operator.textContent;
operatorForAdvanced;
}
}
});
이렇게 계산기 구현을 다 하면 칸을 없애고 진짜 계산기처럼 내가 버튼을 누른 숫자만 나타내어 값을 구현하는 것인데 나는 이걸 이해하는 것만으로도 충분히 벅찼다.. 저만 이런건가요? ㅠㅠ 이제 막 시작했는데 뒤쳐지는 것 같아서 너무 속상했다 열심히 하다보면 나중엔 내가 스스로 과제를 해결할 수 있는 날이 오겠지..?