자바스크립트를 이용하여 계산기 만들기
🎀완성된 모습🎀
https://github.com/minn602/calculator-js
(👆 전체 코드는 위에서 확인가능합니다!)
구현하고자 하는 기능
- 숫자 버튼 클릭시 화면에 숫자 나오게 하기
- 연산자 버튼(+, -, *, /, =) 계산 및 연산 결과 보여주기
- C 버튼 클릭시 인풋 display 리셋되기
- .버튼 클릭 시 소숫점 값 입력 가능
새롭게 알게된 부분
1. 여러개의 요소들에게 addEventListener() 추가하기
숫자 버튼들과 연산자 버튼에는 각각 digit과 operator class값을 주어서 자바스크립트로 해당 요소들을 가져오게 하였다. 기존에 단일 요소에 addEventLister를 사용해주게 되면 같은 class값을 가진 다른 버튼들도 동시에 클릭되는 문제가 발생하였다.
여러개의 요소들에 동일한 event를 동시에 주기 위해서는 loop이나 event bubbling을 사용해주면 된다.
(참고: https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/)
const digits = document.querySelectorAll('.digit');
digits.forEach(digit => {
digit.addEventListener('click', () => {
//run code here
}2. decimal point 추가하기
초기엔 html input 요소의 type 속성 값을 number로 입력하였는데 이 경우엔 소숫점을 숫자로 인식하지 않아 오류가 발생한다. 소숫점을 추가해주기 위해 type 속성 값은 text로 변경해 주면된다.
3. toLocaleString()
계산기의 display에 숫자가 표기 될 때 세자리마다 콤마(,)가 찍히도록 하는 방법으론 정규식 표현과 toLocaleString()을 사용하는 방법이 있다.
//toLocaleString method syntax
numObj.toLocaleString([locales [, options]])
toLocaleString method는 number을 받아 언어마다 지정된 숫자 표기법으로 string type으로 return 해주는 메서드이다.
아쉬운 부분
위에서 언급한 세자리 수 콤마는 이번에 반영하지 못했다. input의 value값을 그대로 받아서 숫자 타입으로 변경 후 toLocaleString()을 사용할 경우 네자리 수까지만 콤마가 찍히고 더이상 숫자 버튼 클릭이 적용되지 않는 문제를 해결하지 못하였다. 이 부분은 추후 확인되면 업데이트할 예정이다🎈
