[이향기]-vending-machine

[2scent]

Vanilla Javascript로 웹 컴포넌트 만들기를 참고했습니다.

• 금액은 양수만 입력할 수 있습니다.
• 버튼 상단 금액 표시창의 기본값은 0입니다.
• 상품 버튼의 금액은 300원부터 1100원까지 100원 단위로 증가합니다. 편의상 상품 이름에는 금앰이 포함되어 FE300 등으로 표시합니다.
• 금액 표시창의 숫자는 중간 정렬되고 세 자리마다 쉼표(,)를 표시합니다.
• 모든 동작은 금액 투입 입력란 하단에 배치된 로그창에 기록합니다. 로그는 아래에 있을수록 최신 로그입니다.
• 상품 구입 후 잔액이 상품의 최소가보다 작으면 잔액이 자동으로 반환됩니다.
• 상품 버튼을 눌렀을 때 투입된 금액이 상품 가격보다 적으면 버튼을 누르는 동안 금액 표시창에 상품의 가격이 표시됩니다. 버튼을 누르지 않을 때는 투입된 금액이 표시됩니다.
• 금액을 투입하고 난 다음에는 금액 입력창을 빈 칸으로 초기화합니다.
• 박스 크기보다 로그가 길어지면 스크롤됩니다. 또한 가장 마지막 로그까지 스크롤이 이동합니다.
• 0원은 투입이나 반환 x
• [선택사항] 반응형 화면을 구성합니다.
  • 화면이 작아지면 자판기 박스 아래에 금액 투입 및 로그 UI가 위치합니다.