[벤딩머신] 입금 및 반환 기능 (정규표현식, 입력 제한)

✨ 기능 : 입금 및 반환

이제 돈을 넣으면 콜라를 마실 수 있는 벤딩머신을 만들 것이다.
첫 번째로 만들 기능은 입금 및 반환 기능이다.
입금액을 입력하고 입금 버튼을 누르면 입금액만큼 소지금이 감소하고
거스름돈 반환 버튼을 누르면 거스름돈을 돌려받아 소지금이 늘어난다.

콤마 추가 및 제거

먼저 정규표현식을 사용해
소지금과 입금액을 받아올 때는 콤마를 제거하고
소지금과 입금액을 화면에 출력할 때는 콤마를 추가할 것이다.

//콤마 제거
function rmComma(str) {
  str = String(str);
  return str.replace(/[^\d]+/g, "");
}
//콤마 추가
function addComma(num) {
  num = String(num);
  return num.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
}

//변수 : 소지금 콤마제거해서 가져오기
let cash = +rmComma(cashStr.innerText);

//기능 : 화면에 입금액, 소지금 출력
function doPrint() {
  balanceStr.innerText = `${addComma(sumDeposit)}원`;
  cashStr.innerText = `${addComma(cash)}원`;
  inpDeposit.value = "";
}

입금 입력값 반영 / 미반영

입력값 미반영

이제 입금액을 입력하여 입금액을 반영하는 기능을 구현해야한다.
이 때 미반영하는 경우의 수를 생각해야한다.
첫 번째 소지금을 초과해서 입력했을 때
두 번째 문자를 입력했을 때
세 번째 마이너스 금액을 입력했을 때
네 번째 0원 혹은 입력하지 않고 버튼을 눌렀을 때 입력사항이 반영되지않도록 if문을 작성했다.

if (+inpDeposit.value > cash) {
    return alert("소지금을 초과하였습니다.");
  } else if (isNaN(inpDeposit.value)) {
    return alert("숫자를 입력하세요.");
  } else if (+inpDeposit.value < 0) {
    return alert("마이너스로 시작하는 금액은 없습니다.");
  } else if (inpDeposit.value == 0) {
    return alert("값을 입력하세요");
  }

입력값 반영

사용자가 올바른 값을 입력했다면 이제 입력값을 반영해야한다.
입금액에 입력값을 더해주고 소지금에 입력값을 빼준다.
그리고 값을 화면에 반영한다.

function doDeposit() {
...
sumDeposit += +inpDeposit.value;
cash -= +inpDeposit.value;
doPrint()
}

function doPrint() {
  balanceStr.innerText = `${addComma(sumDeposit)}원`;
  cashStr.innerText = `${addComma(cash)}원`;
  inpDeposit.value = "";
}

반환

이제 거스름돈 반환 버튼을 누르면
소지금에 입금액을 추가하고, 입금액은 초기화하고
이를 화면에 반영하는 기능을 구현할 것이다.

btnRefund.addEventListener("click", function () {
  cash += sumDeposit;
  sumDeposit = 0;
  doPrint();
});

Target.addEventListener(type, listener) 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. type에서 키가 눌렸을 때, 포인팅 장치가 엘리먼트 위로 이동했을 때 등 다양한 이벤트 유형을 설정할 수 있다. 그리고 listener 에는 이벤트가 발생했을 때 알림을 받고, 자바스크립트 function을 구현할 객체가 들어간다. (출처:mdn)
현재 우리는 반환 버튼을 클릭했을 때 반환 기능을 수행해야하기 때문에 type에 click을 넣어주고 listener에 환불기능을 수행할 함수를 넣어줬다.

📸 기능 구현 화면 : 잘못된 입력값 미반영

📸 기능 구현 화면 : 입금 및 반환