자바스크립트 : 마무리 문제를 풀어 봅시다 5탄

이번 마무리 문제는 로또번호처럼 6개의 숫자를 중복없이 랜덤으로 받아오는 코드를 짜는 것입니다.

---

CSS

* {
    margin: 0;
    padding: 0;
}
input {
    border-style: none;
}
body {
    width: 100%;
    height: 100vh;
}
.numgen__wrap {
    position: relative;
    top: 250px;
    display: flex;
    justify-content: center;
}
.numgen {
    width: 800px;
    /* height: 500px; */
    background-color: #fff;
    display: block;
    box-shadow: 0 0 20px rgba(95, 120, 161, 0.4);
    border-radius: 10px;
}
.numgen__header {
    margin-top: 65px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}
.numgen__header h2 {
    font-size: 50px;
    color: #5f78a1;
}
.numgen__btn {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}
.btn {
    width: 200px;
    flex: 1 1 auto;
    margin: 10px;
    padding: 30px;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
}

.btn:hover {
    background-position: right center; /* change the direction of the change here */
}
.btn-2 {
    background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}
.numgen__result {
    display: none;
    justify-content: center;
    margin-bottom: 65px;
}
.result {
    display: flex;
    justify-content: center;
    align-items: center;
}
.result span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0 10px;
    border-radius: 50%;
    background-color: #a6c1ee;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
}
.result span:nth-child(2n){
    background-color: #fbc2eb;
}

• .numgen__wrap: 로또 번호 생성기를 감싸는 최상위 컨테이너입니다. display: flex; 속성을 사용하여 가운데 정렬되도록 설정되어 있습니다.
• .numgen: 로또 번호 생성기의 메인 컨테이너입니다. 800px의 너비와 흰색 배경색, 그림자 및 둥근 테두리가 설정되어 있습니다.
• .numgen__header: 로또 번호 생성기의 제목이 위치하는 컨테이너입니다. display: flex; 속성을 사용하여 가운데 정렬되도록 설정되어 있습니다.
• .numgen__header h2: 로또 번호 생성기의 제목인 "로또번호 생성기"를 나타내는 제목 요소입니다. 50px의 글꼴 크기와 파란색(#5f78a1)으로 설정되어 있습니다.
• .numgen__btn: 로또 번호 생성 버튼이 위치하는 컨테이너입니다. display: flex; 속성을 사용하여 가운데 정렬되도록 설정되어 있습니다.
• .btn: 로또 번호 생성 버튼을 나타내는 요소로, 클릭 시 배경색이 변경되는 효과가 있는 버튼입니다. 200px의 너비와 30px의 패딩, 흰색 텍스트, 그림자 및 둥근 테두리가 설정되어 있습니다.
• .btn:hover: 버튼에 마우스를 올리면 배경색이 변경되는 효과가 적용되는 CSS입니다.
• .btn-2: 로또 번호 생성 버튼의 배경색이 그라데이션으로 설정되어 있는 클래스입니다.
• .numgen__result: 로또 번호 생성 결과가 표시되는 컨테이너입니다. 초기에는 display: none; 속성으로 숨겨져 있습니다.
• .result: 로또 번호가 표시되는 컨테이너로, display: flex; 속성을 사용하여 가운데 정렬되도록 설정되어 있습니다.
• .result span: 로또 번호를 표시하는 요소로, 원형 모양의 배경색이 설정되어 있고, 흰색 텍스트, 굵은 글꼴 및 가운데 정렬이 적용되어 있습니다. 짝수 번호에는 다른 배경색이 적용됩니다.

---

HTML

<div class="numgen__wrap">
    <div class="numgen">
        <div class="numgen__header">
            <h2>로또번호 생성기</h2>
        </div>
        <div class="numgen__btn">
            <div class="btn__inner">
                <input type="button" value="클릭" class="btn btn-2">
            </div>
        </div>
        <div class="numgen__result">
            <div class="result">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <p></p>
</div>

• .numgen__wrap: 번호 생성기를 감싸는 부모 요소로, 번호 생성기를 가운데로 정렬하는 역할을 합니다.
• .numgen: 번호 생성기의 컨테이너로, 번호 생성기의 전체적인 스타일을 설정합니다.
• .numgen__header: 번호 생성기의 제목을 담고 있는 요소로, 제목의 스타일을 설정합니다.
• .numgen__btn: 번호 생성 버튼을 담고 있는 요소로, 버튼의 스타일을 설정합니다.
• .btn__inner: 버튼 내부를 감싸는 요소로, 버튼의 스타일을 설정합니다.
• .btn: 실제로 번호를 생성하는 버튼으로, 버튼의 스타일을 설정하고, 클릭 이벤트를 처리하는 JavaScript와 연결되어 있습니다.
• .btn-2: 버튼의 스타일을 설정하는 클래스로, 배경 그라데이션 등의 스타일을 포함합니다.
• .numgen__result: 번호 생성 결과를 표시하는 부분으로, 결과의 스타일을 설정합니다.
• .result: 번호를 표시하는 요소로, 번호의 스타일을 설정하고, 생성된 번호를 동적으로 삽입합니다.
• .result: 번호를 표시하는 요소로, 번호의 스타일을 설정하고, 생성된 번호를 동적으로 삽입합니다.
• span: 번호를 나타내는 요소로, 각 번호의 스타일을 설정합니다.
• p: 번호 생성기 아래에 추가로 표시되는 문구를 담고 있는 요소로, 문구의 스타일을 설정합니다.

---

SCRIPT

<script>
    const numgenWrap = document.querySelector(".numgen__wrap");
    const numgenBtn = numgenWrap.querySelector(".numgen__btn");
    const btnInput = numgenWrap.querySelector(".btn__inner input");
    const numgenResult = numgenWrap.querySelector(".numgen__result");
    const result = numgenWrap.querySelector(".result");
    const resultSpan = numgenWrap.querySelectorAll(".result span");

    btnInput.addEventListener("click",() => {
        const numbers = new Set();
        for(let i = 0; numbers.size < 6; i++){
            const resultNum= Math.floor((Math.random() * 45)+1);
            numbers.add(resultNum);
        }
        const numbersResult = [...numbers];
        for(let i = 0; i < 6; i++){
            resultSpan[i].textContent = numbersResult[i]
        }
        numgenResult.style.display = "block"
    });
    console.log(resultSpan);

</script>

• numgen__wrap, numgen__btn, btn__inner input, numgen__result, result, result span 등의 DOM 요소들을 선택하고 변수에 할당합니다. 이를 통해 해당 DOM 요소들을 JavaScript 코드에서 참조할 수 있게 됩니다.
• btnInput 요소에 "click" 이벤트 리스너를 등록합니다. 즉, btnInput 요소가 클릭되었을 때, 지정된 콜백 함수가 실행됩니다.
• 클릭 이벤트가 발생하면, 1부터 45까지의 숫자 중 6개의 숫자를 랜덤으로 생성하고, 중복되지 않게 numbers Set 객체에 저장합니다.
• numbers Set 객체를 배열로 변환한 뒤, resultSpan 요소들에 각각의 로또 번호를 텍스트 콘텐트로 설정합니다. 이후, numgenResult 요소의 display 속성을 "block"으로 변경하여 로또 번호 결과를 화면에 표시합니다.

 

---