Q2.
자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안되므로 셋(set)을 이용할 것이고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을 때 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해보세요.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 생성기</title>
</head>
<body>
<div id="container">
<h1>로또 번호 생성기</h1>
<button>번호 뽑기</button>
<div id="result"></div>
</div>
</body>
</html>제목과 버튼 그리고 결과를 나타낼 영역을 만들어 주었습니다.
CSS
<style>
@import url('https://webfontworld.github.io/Jalpullineun/JalpullineunHaru.css');
h1 {
font-family: "JalpullineunHaru";
color: cornflowerblue;
}
body::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(167, 221, 255, 0.8);
z-index: -1;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
button {
width: 200px;
padding: 15px;
font-size: 1.2em;
color: #fff;
background-color: rgb(143, 205, 253);
border-radius: 30px;
border: 2px solid rgb(134, 194, 251);
font-family: "JalpullineunHaru";
}
button:hover {
cursor: pointer;
background-color: rgb(134, 194, 251);
}
#result {
padding: 20px;
font-size: 2.5em;
color: #fff;
font-family: "JalpullineunHaru";
}
</style>폰트를 import 방식으로 불러왔고 배경색, 버튼색 버튼 모양등을 원하는 대로 설정해주었습니다.
script
<script>
const result = document.querySelector('#result');
const button = document.querySelector('button');
const luckyNumber = {
numberDigit: 6, // 숫자 6개
maxNumber: 45, // 최대 숫자 45
};
button.addEventListener("click", () => {
let { numberDigit, maxNumber } = luckyNumber;
let myNumber = new Set(); // 숫자가 중복되지 않게 저장할 Set 생성
while (myNumber.size < numberDigit) { // 중복을 허용하지 않는 Set에 6개의 유일한 숫자가 저장될 때까지 반복
myNumber.add(Math.floor(Math.random() * maxNumber) + 1);
}
result.innerText = `${[...myNumber]}`; // Set을 Array로 변환
});
</script>const luckyNumber 객체는 생성될 숫자의 개수(numberDigit)와 최대 숫자(maxNumber)를 저장하고 있습니다.
button.addEventListener는 button에 클릭 이벤트를 등록하는 메서드입니다.
클릭 이벤트가 발생하면, luckyNumber 객체로부터 numberDigit과 maxNumber 값을 가져옵니다.
myNumber는 Set 객체를 사용하여, 중복을 허용하지 않고 유일한 숫자들을 저장하도록 합니다.
while문은 myNumber에 저장된 숫자의 개수가 numberDigit과 같아질 때까지, 랜덤한 숫자를 생성하여 myNumber에 추가하는 과정을 반복합니다.
Math.floor(Math.random() * maxNumber) + 1 구문은 1부터 maxNumber 사이의 랜덤한 정수를 생성합니다.
result.innerText를 사용하여 myNumber에 저장된 숫자를 문자열 형태로 HTML 문서에 출력합니다.
Set 객체는 직접적으로 출력할 수 없으므로, [...myNumber]을 사용하여 myNumber를 배열로 변환합니다.