로또추첨기 만들기

Frontend

로또추첨기 만들기

단점이없어지고싶은개발자 2021. 6. 22. 22:09

늘 토요일 8시되기 전에 로또를 구입하곤 했다. 백수이기에 이천원으로 구입하곤 했다. 하지만 당첨은 늘 안되거나 5천원이 최고 상금이지만 이번주는 직접 만든 로또추첨기로 도전을 해보려 한다.

로또 추첨기 HTML은 아주 간단했다.

<body>
    <div id="result">추첨 결과는?</div>
    <div id="bonus">보너스 :</div>
    <script src="pratice.js"></script>
</body>

추첨결과와 보너스만 나오면 됐기에 id선택자를 사용해 HTML을 꾸며주었다.

.ball {
    display: inline-block;
    border: 1px solid black;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    margin-right: 20px;
}

CSS는 원형으로 만든 부분이 필요했기에 수평이 아닌 수직을 위해 inline-block을 이용해주고 동그랗게 radius로 둥그렇게 만들어주고 쿠기를 주고, 글자는 가운데에 있어야하기에 text-align을 주었다.

const $result = document.querySelector("#result"),
  $bonus = document.querySelector("#bonus");

const array = Array(45)
  .fill()
  .map((el, i) => {
    return i + 1;
  });
//Array(45)배열의 45개를 만들고, fill로 공간을 채운다. 그 공안을 map을 이용해 i + 1을 하면 index가 + 1이 되면서
//요소들이 undefined에서 index+1의 요소로 채워진다.

const shuffle = [];
//랜덤값을 넣어줄 배열박스

while (array.length > 0) {
  const randomNum = Math.floor(Math.random() * array.length);
  //45개의 숫자가 랜덤으로 섞인다 배열이 아닌 숫자
  const checkNum = array.splice(randomNum, 1);
  //splic는 배열항목을 컨트롤해주는 함수로써, 원하는 위치에 삽입 및 제거가 가능하다.
  //splice(항목위치, 삭제할 항목 수, 추가할 항목-필수는 아님) 숫자 -> 배열
  shuffle.push(checkNum[0]);
  //push를 이용해 shuffle에 뒤에서부터 배열 0번째부터 45번째까지 추가가 된다.
}

const winBall = shuffle.slice(0, 6).sort((a, b) => a - b);
//slice는 (자를 인덱스, 잘림당할인덱스 -1)복사가 된다.
//sort는 오름차순이다. 낮은 숫자가 a, 높은숫자가 b로 들어가 자동으로 오름차순이된다.
const bonusBall = shuffle[6]; //6번째공이 뽑히고 마지막 공은 bonus볼

function colorize(number, $color) { //공 색깔
  if (number < 10) {
    $color.style.backgroundColor = "red";
  } else if (number < 20) {
    $color.style.backgroundColor = "yellow";
  } else if (number < 30) {
    $color.style.backgroundColor = "blue";
  } else if (number < 40) {
    $color.style.backgroundColor = "green";
  } else {
    $color.style.backgroundColor = "orange";
    $color.color = "white";
  }
}

function showBall(number, $target) {
  const $ball = document.createElement("div");
  colorize(number, $ball);
  $ball.classList = "ball";
  $ball.textContent = number;
  $target.appendChild($ball);
}

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

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

구현하면서 가장 아리송 했던 부분이 createElement였다. 몇번 구현해봤지만 아직 부족한 부분이 많아서 createElement로 div를 생성해주고, 거기에 css에 .ball이라 입력한 것을 추가해주고 색깔을 넣어줌과 동시에 동그라미에 랜덤한 값이 나오게 해주었다.

시중에 있는 로또 가게에서 랜덤으로 했을 때의 알고리즘과 타 사이트에서 랜덤로또사이트와는 다르겠지만 그래도 6자리의 랜덤값이 나오고, 보너스까지 나온다.

저작자표시