일요일 숙제 로또 만들기

문제입니다.

자바스크립트에서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안되므로 셋을 이용할 것이고 숫자는 1부터 45까지 범위안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을떄 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해보세요.

 

See the Pen Untitled by ture403 (@ture403) on CodePen.

 

완성화면 입니다.

 

HTML 코드입니다.

<div id="container">
    <h1>로또 번호 생성기</h1>   
    <button>클릭</button> 
    <div id="result"></div>
</div>

•  HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다.

JS 코드입니다.

const result = document.querySelector('#result');
const button = document.querySelector('button');

const luckyNumber = {
  digitCount: 6, // 숫자 6개
  maxNumber: 45, // 최대 숫자 45
};

button.addEventListener("click", (e) => {
  e.preventDefault();
  button.style.transition = "1s";
  let { digitCount, maxNumber } = luckyNumber;
  console.log(luckyNumber)
  let myNumber = new Set(); // 숫자가 중복되지 않게 저장할 Set 생성
  for (let i = 0; i < digitCount; i++) {
    myNumber.add(Math.floor(Math.random() * maxNumber) + 1);
  }
  result.innerText = `${[...myNumber]}`;  // Set을 Array로 변환

});

• 먼저 선어자로 result , buton을 변수에 담아 저장했습니다. 
• 그리고  숫자 6개 그리고 최대숫자 45개를 변수안에 객체로 저장했습니다.
• 이제 button을 클릭했을때 안에서 동작하는 원리를 설명하겠습니다.
• preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.
• 그리고 transition을 버튼 클리했을떄 넣어 주었습니다.
• let 변수안에 luckynumber를 넣었습니다. 
• 그리고 set함수를 통해 중복되지 않게 변수에 담았습니다. 
• 그후 for문을 써서 6까지 random함수로 6개의 숫자를 mynumber담았습니다.
• 그리고 innerHTML로 출력을 했습니다.

set메서드

• set 객체는 중복되지 않는 유일한 값들의 집합이다.
• set 객체는 다음과 같은 특징을 가진다.
  1. 동일한 값을 중복하여 포함할수 없다
  2. 요소 순서에 의미가 없다
  3. 인덱스로 요소에 접근할 수 없다.