VanillaJS를 활용한 UI component 와 event handling 구현 미니 프로젝트

나혜수·2023년 3월 30일
0

자바스크립트 실전

목록 보기
19/19

미니 프로젝트 : 계산기 앱

상세 요구사항

  1. HTML
    index.html 파일에 Button Element 제어를 위한 데이터 속성을 지정
    숫자 / 연산 기호 / 지우기 / 초기화 버튼 관련된 요소끼리 그룹핑하여 HTML 엘리먼트 요소 구현

  2. Javascript
    index.js 파일을 생성하고 파일에서 계산 기능에 대한 Calculator 생성
    각 Button Element 값 (DOM 제어 요소)을 참조하여 Calculator 객체를 이용하여 계산 로직이 정상적으로 작동 되도록 구현

  3. 기능 구현
    2개의 숫자까지 연산되는 기본 기능부터 구현
    CSS 구현은 기본 제공 소스를 활용하거나 UI를 참고하여 자유롭게 구현


도전 과제

  • 3개 이상의 숫자 연산이 가능하도록 구현

  • 계산식들의 히스토리 보기 (좌측 혹은 우측 내에 계산이 진행되었던 히스토리 열람 기능)

  • 괄호가 포함된 추가 기능 구현

  • 올바른 계산식 입력이 아닌 경우 안내 문구 (alert) 출력


코드

profile
오늘도 신나개 🐶

0개의 댓글