[이정중]-vending-machine

[Gentlee-dev]

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

[taggon]

2024년의 환경은 2011년과 너무 달라서, 이제는 CSS Reset이 거의 필요하지 않고 예전에 비해 굉장히 간단한 선언만 필요합니다. 😄
아래 두 링크를 확인해보세요.
https://www.joshwcomeau.com/css/custom-css-reset
https://piccalil.li/blog/a-more-modern-css-reset/

[Gentlee-dev]

감사합니다!!
확인해보도록 하겠습니다!

[taggon]

Suggested change

	$btn.addEventListener("mousedown", () => {
	balance < price && changeBalance(price);
	});
	$btn.addEventListener("mouseup", () => {
	balance < price && changeBalance(balance);
	});
	$btn.addEventListener("mouseout", () => {
	balance < price && changeBalance(balance);
	});
	$btn.addEventListener("mousedown", () => {
	if (balance >= price) return;
	changeBalance(price);
	... // 여기에 mouseup 이벤트를 window에 추가
	});

이런 방식도 고민해 볼 수 있습니다. :)
자세한 구현은 DOM API만 이용한 드래그앤드롭 구현을 보면 도움이 됩니다.