로또 번호 생성기 과제 (난이도 하)

로또 번호를 6개 생성해서, 화면에 띄워보았다. 

이걸로 긁어볼까?

필요한 것. 

 

1~45의 랜덤한 숫자를 만든다. 

그걸 6번 반복한다. 

근데, 1~45 중에서 중복된 숫자가 있으면 안 된다.

그걸 화면에 띄운다. 

 

스타일을 적용해보았다. 

body {

    font-family: Arial, sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background-color: #f0f0f0;

}

/* 여기에 container 클래스에 대한 스타일을 추가하세요 */

.container {

    flex-basis : 350px;

    height: 200px;

    display: flex;

    justify-content: center;

    flex-direction: column;

    align-items: center;

    border: 1px solid black;

    border-radius: 5px;

    box-shadow: 1px 1px 1px 1px gray;

}

button {

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

}

#numbers {

    font-size: 25px;

}

 

오늘 배운 점. 

 

컨테이너를 꾸미는 css에 width가 아니라 flex-basis를 썼다. 

body에 적용된 flex가 너무 강해서, width값이 적용되지 않는 현상이 발생했기 때문이다. 

하지만 flex-basis는 자식 요소의 기본 크기를 정의하기 때문에, flex를 무시하고 자식 요소를 컨트롤할 수 있게 되었다. 

 

자바스크립트를 통해서 로또 번호를 출력했다. 

0. 로또 숫자 6개가 들어갈 리스트(배열)을 만든다. 

let lottonums = []

1. 1~45까지 랜덤한 숫자를 만든다. 

let rannum = Math.floor(Math.random() * 45) + 1;

 

랜덤한 숫자를 만들어 rannum 변수에 넣었다. 해당 함수는 1부터 45까지의 숫자를 랜덤으로 생성해 변수에 저장한다.

45의 숫자를 바꾸면 최대치를 바꿀 수 있으며, 1의 숫자를 바꾸면 최소치를 조절할 수 있다. 

 

2. 그걸 6번 반복한다. 

    while (lottonums.length < 6) { }

while문을 사용해 lottonums의 길이가 6이 될 때까지 반복한다. 

 

3. 근데, 1~45 중에서 중복된 숫자가 있으면 안 된다.

if (!lottonums.includes(rannum)){ }

 

만약 lottonums.includes(rannum)으로 if 구문을 만들면, lottonums에 같은 숫자가 있을 경우~ 가 된다. 

하지만 앞에 !를 붙이는 것으로, lottonums에 같은 숫자가 없었을 경우~ 가 된다. 

 

lottonums.includes(rannum)는 배열 lottonums에 rannum이라는 값이 포함되어 있는지 확인하는 함수입니다.

• lottonums.includes(rannum)가 **true**이면, rannum이 배열에 이미 존재한다는 뜻입니다.
• lottonums.includes(rannum)가 **false**이면, rannum이 배열에 존재하지 않는다는 뜻입니다.

여기서 !는 이 결과를 반대로 만듭니다:

• **!lottonums.includes(rannum)**는 rannum이 배열에 포함되어 있지 않으면 true가 됩니다.

즉, **!lottonums.includes(rannum)**는 배열 lottonums에 rannum이 존재하지 않을 때만 실행되는 조건이 됩니다. 이것은 중복된 값이 배열에 들어가지 않게 하는 역할을 합니다.

-> 챗gpt의 친절한 설명. 

 

4. 그걸 화면에 띄운다. 

함수는 다 만들었으니, 이를 종료하고 값을 반환하자. 

    return lottonums;

 

완성된 자바스크립트 코드

// 버튼이 눌렸을 때, 이벤트가 작동되도록 이벤트리스너를 넣어준 코드입니다.

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

    let numbers = generateLottoNumbers();  // 버튼이 눌리면 이 함수가 실행이 될 거에요.

    document.getElementById('numbers').textContent = numbers.join(', ');

});

function generateLottoNumbers() {

    /* 여기에 generateLottoNumbers 함수를 완성해주세요. */

    let lottonums = []

    while (lottonums.length < 6) {

        let rannum = Math.floor(Math.random() * 45) + 1;

        if (!lottonums.includes(rannum)){

            lottonums.push(rannum);

        }

    }

    return lottonums;

}