로또추첨기 part2

$form.addEventListener("submit", (e) => {
  e.preventDefault();

  if (submit) {
    showPopUpWithText("reset 버튼을 누른 후 다시 입력해 주세요");
    return;
  }

  inputArray = $input.value
    .trim()
    .replace(/\s+/g, ",")
    .replace(/,+/g, ",")
    .replace(/,$/, "")
    .replace(/^,/, "")
    .split(",")
    .map((string) => Number(string));
  $input.value = "";

  const validity = checkValidity();

  if (!validity) return;

  submit = true;

  for (let i = 0; i < lottos.length; i++) {
    setTimeout(() => {
      showBall(lottos[i], $result);
    }, 1000 * (i + 1));
  }

  setTimeout(() => {
    showBall(bonus, $bonus);
  }, 7000);

  setTimeout(() => {
    showResult(result);
    activateResetBtn();
  }, 7500);

  const result = getResult();
});

$restartBtn.addEventListener("click", () => {
  if (resetBtnClick !== "able") return;
  init();
});

• 제출했을 때 이미 제출한 상태라면 reset 버튼을 누른 후 다시 입력하세요! 라는 문구가 보이게 한다

제출한 번호의 유효성 체크

공백으로 구별하여 제출하라고 했으므로
1,2,3,4,5,6,7 = > [1,2,3,4,5,6,7] 이런식으로 만들어 주기 위해 replace, split, map등을 사용해준다
입력중 실수로 앞, 뒤, 그리고 숫자 중간중간 공백이나 ,를 여러번 입력한 경우도 처리해주기 위해 replace를 많이 사용해 줬는데 아직 정규표현식을 잘 다룰 줄 몰라서 효율적으로 작성하지 못했다

const checkValidity = () => {
  if (inputArray.length !== 7)
    return showPopUpWithText("7개의 숫자를 입력해주세요");
  if (new Set(inputArray).size !== 7)
    return showPopUpWithText("7개의 숫자를 중복없이 입력해주세요");
  for (let x of inputArray) {
    if (x > 45 || x < 1)
      return showPopUpWithText("1-45 사이의 숫자를 입력해 주세요");
  }
  return true;
};

빨리 처리될수있는 것부터 차례대로 코드를 작성해준다

1. 7개의 숫자가 아닌경우
2. set을 이용하여 중복체크를 한다
3. 45보다 크거나 1보다 작은 수를 입력했을경우 확인해준다

유효성 검사를 통과하지 못했을 때

setTimeout이용해서 이유와 함께 보여준다

유효성 검사를 통과하면 flag 변수인 submit을 true로 바꿔줘서 reset전 또 제출하지 못하도록 막는다

setTimeout을 이용해서 공들을 하나씩 보여준다

보너스 공까지 보여준뒤 결과계산한뒤 결과를 보여주고 다시 시작할 수 있도록 reset버튼도 활성화 시켜준다

결과 계산하기

const getResult = () => {
  let count = 0;
  const rankArray = [7, 6, 5, 4, 3, 2, 1];

  lottos.forEach((answer) => {
    if (inputArray.includes(answer)) count++;
  });
  const rank = rankArray[count] === 7 ? 6 : rankArray[count];

  return { count, rank };
};

알고리즘 문제 풀면서 해봤던 것인데 index를 활용하는것이 아주 인상적이었다
0개,1개 맞았으면 6등
2개 맞았으면 5등
3개 맞았으면 4등 ...

index를 활용하고 번호가 다틀렸을 때만 예외처리를 해주면 된다 ! !
몇개맞았는지, 몇등인지 object로 return해 주었다

결과 보여주기

const showResult = (resultObject) => {
  $rank.innerHTML = `입력숫자 : ${inputArray.join(",")} = > <strong>${
    resultObject.count
  }개 일치 ${resultObject.rank}등</strong>`;
};

! reset버튼 다뤄주기

const activateResetBtn = () => {
  $restartBtn.classList.add("active");
  resetBtnClick = "able";
};

const deactivateResetBtn = () => {
  $restartBtn.classList.remove("active");
  resetBtnClick = "unable";
};

$restartBtn.addEventListener("click", () => {
  if (resetBtnClick !== "able") return;
  init();
});

resetBtnClick을 flag변수처럼 사용해 주었다.
번호를 제출하면 reset버튼을 비활성화 시키고
번호를 다보여주고 결과까지 보여준 뒤 reset버튼을 활성화 시켜주었다