[벤딩머신] 아이템 버튼 활성화 기능(disabled)

✨ 기능 : 아이템 버튼 활성화

아이템을 구매할 수 있는 가격이 입금되었을 때,
아이템 구매버튼이 활성화되는 기능을 추가할 것이다.
그리고 활성화되었다는 것을 사용자가 인지할 수 있도록 스타일도 추가할 것이다.

disabled 의사 클래스

먼저 처음에 콜라 아이템 버튼을 비활성하기 위해 disabled 의사 클래스를 사용할 것이다.
의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족할 수 있다. 예를 들어 포인터를 올렸을 때(:hover), 마우스 버튼을 눌렀을 때(:active), 양식의 입력 칸이 포커스를 받았을 때(:focus) 등이 있다. disabled 는 해당 요소가 비활성된 상태로 선택, 클릭, 입력을 하지 못하고 포커스를 받지도 못한다. disabled는 boolian 속성이라서 명시하면 자동으로 true값을 가지고, 자바스크립트로 속성값을 제어할 수 있다.(관련 내용 출처: mdn)
그래서 우리는 아이템 버튼에 disabled를 명시해 버튼을 비활성화할 것이다.

<button
  class="cola__btn"
  data-item="Original Cola"
  data-count="5"
  data-price="1000"
	disabled
>

콜라의 가격은 1000원, 그러니까 아이템을 구매할 수 있는 최소한의 금액은 1000원이다.
그리고 입금액이 1000원 이상일 때는 disabled에 false를 할당하여 버튼을 활성하고, 입금액이 1000원 이하일 때는 true를 할당하여 버튼을 비활성화하는 함수를 만들었다. 그리고 enabled라는 활성화 스타일 클래스를 만들어서 입금액에 따라 넣고 빼는 코드도 추가했다.

function doEnabled() {
  btnCola.forEach((item) => {
    if (sumDeposit >= 1000) {
      item.classList.add("enabled");
      item.disabled = false;
    } else {
      item.classList.remove("enabled");
      item.disabled = true;
    }
  });
}

📸 기능 구현 화면