JS 연습문제 7 - 로또 번호 생성

▶ 로또 번호 생성

• CSS

body{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#container{
   margin-top: 200px;
   display: flex;
}

#container>div{
   border: 1px solid black;
   border-radius: 50px;
   margin-left: 30px;
   width: 70px;
   height: 70px;
   font-size: 45px;
   font-weight: bold;
   text-align: center;
}

#createLotto{
   margin-top: 40px;
   width: 300px;
   height: 30px;
   font-size: 15px;
   text-align: center;
}

• HTML

<div id="container">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

<button id="createLotto">로또 번호 생성</button>

• JavaScript

document.getElementById('createLotto').addEventListener('click', function(){

   // 아이디가 container인 요소의 자식 div요소 6개 선택
   const numbers = document.querySelectorAll('#container>div');

   // 로또 번호를 저장할 배열 선언
   const lotto = [];

   while(lotto.length <= 5){ // lotto 배열에 저장된 값이 6개가 안 되면 반복

      // 로또 번호 생성 시 1 ~ 45 난수 생성
      const ran = Math.floor(Math.random()* 45 + 1);

      // 생성된 난수가 배열에 있는지 검사
      if(lotto.indexOf(ran) == -1){ // 중복 X
         // 배열에 난수 추가
         lotto.push(ran);
      }

      lotto.sort(function(a,b){return a-b});
                
      // numbers의 인덱스별로 lotto 인덱스에 저장된 값 출력
      for(let i=0; i<lotto.length; i++){
         numbers[i].innerText = lotto[i];
      }
   }
})

See the Pen 24-12-25 js review-pr7 by Namu (@Namu-the-sans) on CodePen.