README.md 작성
🎈 계산기 만들기
🎯 기능 요구사항
- 사용자의 입력 값에 따라 사칙연산을 계산할 수 있는 계산기이다.
🚀 To Do
- To Do 작성하기
- HTML 계산기 뼈대 구성하기
- 사용자가 클릭할 버튼에 대한 리스너 구현
- 숫자 버튼
- 초기화 버튼
- 사칙연산 버튼
- 결과 버튼
- decimal 버튼
- 사용자가 버튼을 클릭할때 수행되는 작업 구현하기.
- 숫자 버튼: 숫자가 입력되었을 때
- 초기화 버튼: 모든 값을 초기화
- 사칙연산 버튼: 숫자가 입력된 상태일 때만 가능
- 결과 버튼: 입력된 값의 사칙연산 수행
- decimal 버튼: 소수점변경
HTML 계산기 뼈대작성
<body>
<div class="calcalator">
<div class="calcalator-display">
<p>0</p>
</div>
<div class="calcalator-buttons">
<button class="operator">+</button>
<button class="operator">-</button>
<button class="operator">x</button>
<button class="operator">%</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button class="decimal">.</button>
<button value="0">0</button>
<button class="init">c</button>
<button class="operator result" value="=">=</button>
</div>
</div>
<script src="./calculator.js"></script>
</body>- 버튼 그룹을 크게 operator, numbers, init, decimal로 나누었다.
ESLint & Prettier
팀 프로젝트 시 사용될 일이 많기 때문에 이번 기회에 설정하는 방법에 대해 알아보았다.
ESLint & Prettier 설정
각 버튼에 대한 리스너 구현
const buttons = document.querySelectorAll('.calcalator-buttons > button');
[...buttons].map(button => {
if (button.classList.contains('operator')) {
button.addEventListener('click', operator);
} else if (button.classList.contains('decimal')) {
button.addEventListener('click', decimal);
} else if (button.classList.contains('init')) {
button.addEventListener('click', clearAll);
} else {
button.addEventListener('click', getValue);
}
});새로배운 내용
-
ESLint & Prettier의 사용법 -
classList
DOMTokenList 객체로 요소의 클래스 attribute를 리턴하여 쉽게 클래스를 제어할 수 있게 해주는 Property이다.
해당 코드에서 각 버튼에 대한 리스너 구현시 버튼 요소들을 순회하며 operator라는 class name을 찾아주기 위해 사용하였다.
