vanillaJS를 활용한 계산기 - part1

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을 찾아주기 위해 사용하였다.

Javascript 실행 상하문 순서에 대한 깊이 있는 설명
OPP (object-oriented programming)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage