simyeen / javascript-vendingmachine-precourse

기능 구현하기

0. 렌더링 초기화 하기

   1. 헤더 생성하기. APP_TITLE
   2. 각 컴포넌트 보여주는 버튼 만들기 MENU
   3. 3가지의 컴포넌트 존재 => 버튼을 누를 때마다 display 속성 변경되는 이벤트.

1. 상품 관리하기 - 입력한 값을 테이블아래로 추가하기.

   1. 3가지의 인풋을 받는다.
      1. 상품명, 가격, 수량
      2. 추가하기 버튼
   2. 인풋 검증하기.
      1. 공통 - empty 검사하기.
      2. 가격은 100원 이상이며, 10의 배수이다.
      3. 수량이 1이상 인지 검사하기
   3. View의 모습 - 상품현황
      1. 기본 - 상품명, 가격, 수량 보여주기.
      2. 인풋이 올바를 때, 마다 추가하기 버튼을 통해 아래 추가됨.
   4. 인풋 검증 실패 => alert 창 띄워주기.
   5. 인풋 검증 성공 => 모든 form 초기화시키기.

2. 잔돈 충전하기 - 입력한 값만큼 코인 충전하기 => 사용자에게 잔돈 반환할 때 쓰임.

   1. 1가지의 인풋을 받는다.
      1. 넣을 금액
      2. 충전하기 버튼
   2. 인풋 검증하기.
      1. empty 검사하기.
      2. 10의 배수이다.
   3. 무작위 잔돈 개수 생성하기.
      1. 10원, 50원, 100원, 500원을 무작위로 생성해서 잘 나누기.
   4. View의 모습 - 자판기가 보유한 동전
      1. 각 동전 종류 - 개수가 쌍을 이룬다.
      2. 금액을 입력할 때 마다, 누적해서 보여지게한다.

3. 상품 구매하기 - 상품 관리, 잔돈 충전 2가지의 컴포넌트를 표시(살짝 다름)

   1. 투입할 금액을 입력한다.
   2. 인풋 검증하기.
      1. empty검사하기.
      2. 10의 배수이다.
      3. 주의 - 금액은 누적해서 투입할 수 있다.
   3. 구매 버튼을 누른만큼 금액에서 차감된다.
   4. 잔돈 반환하기를 누르면 남은 금액만큼의 잔돈을 반환해 준다.
      1. 잔돈은 보유한 최소 개수의 동전으로 잔돈 반환해주기.

4. 고려해야할 점.

   1. 상품 관리하기와 잔돈 충전하기는 서로 독립적이다.
   2. 상품 구매하기 탭은 두 탭에 영향을 끼친다.
   3. 각 컴포넌트별 mvc구조로 짜자.