HTML파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>로또추첨기</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<script type="text/javascript" src="script.js" defer></script>
<div id="result">추첨 결과는?</div>
<br />
<div id="bonus">보너스:</div>
<br />
<h2>띄어쓰기단위로 숫자 7개를 입력해주세요</h2>
<input type="text" id="input" />
<button id="startBtn">입력</button>
<div id="logs"></div>
</body>
</html>
style.css파일
.ball {
display: inline-block;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
script파일
const $startBtn = document.querySelector("#startBtn");
$startBtn.addEventListener("click", () => {
start();
});
const start = function () {
const $logs = document.querySelector("#logs");
let inputDigit = document.querySelector("#input").value;
const inputArr = inputDigit.split(" ");
console.log(inputArr);
const Arr1 = [1, 2, 3, 4];
const Arr2 = [5, 6, 7, 8];
console.log(Arr1.includes(Arr2), "설렁탕");
//1단계 입력값의 유효성체크
const checkInput = function (Arr) {
if (inputArr.length !== 7) {
alert("7자리의 숫자를 입력해야 합니다.");
return false;
}
if (inputArr.includes("0")) {
alert("숫자 0은 포함될 수 없습니다.");
return false;
}
if (new Set(inputArr).size !== 7) {
alert("중복된 숫자는 입력할 수 없습니다.");
return false;
}
return true;
};
if (!checkInput(inputArr)) {
//if문 부정
return; //return문 추가
}
//2단계 입력값이 문제가 없는 경우 로또 실행
const candidate = Array(45)
.fill()
.map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
console.log(candidate.length);
const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스(0~44) 뽑기
const spliceArray = candidate.splice(random, 1); // splice()의 리턴타입은 배열이다.
const value = spliceArray[0]; // 배열에 들어 있는 값을 꺼내어
shuffle.push(value); // shuffle 배열에 넣기
}
const winBalls = shuffle.slice(0, 6).sort((a, b) => a - b);
const bonus = shuffle[6];
const $result = document.querySelector("#result");
function colorize(number, $tag) {
if (number < 10) {
$tag.style.backgroundColor = "red";
$tag.style.color = "white";
} else if (number < 20) {
$tag.style.backgroundColor = "orange";
} else if (number < 30) {
$tag.style.backgroundColor = "yellow";
} else if (number < 40) {
$tag.style.backgroundColor = "blue";
$tag.style.color = "white";
} else {
$tag.style.backgroundColor = "green";
$tag.style.color = "white";
}
}
const drawBall = (number, $parent) => {
const $ball = document.createElement("div");
$ball.className = "ball";
colorize(number, $ball);
$ball.textContent = number;
$parent.appendChild($ball);
};
for (let i = 0; i < winBalls.length; i++) {
setTimeout(() => {
drawBall(winBalls[i], $result);
}, (i + 1) * 1000);
}
const $bonus = document.querySelector("#bonus");
setTimeout(() => {
drawBall(bonus, $bonus);
}, 7000);
//3단계 몇 개를 맞추었는지 출력
let hit = 0;
let extra_hit = false;
for (let i = 0; i < winBalls.length - 1; i++) {
const index = inputArr.includes(winBalls[i]);
if (index > -1) {
hit += 1;
}
}
if (inputArr.includes(winBalls[winBalls.length - 1])) {
extra_hit = true;
}
const rank = function (hit) {
if (hit === 6) {
rank = 1;
$logs.append(`${hit}개 맞추셨으므로 ${rank}입니다.`);
}
if (hit === 5 && extra_hit) {
rank = 2;
$logs.append(
`${hit}개 맞추셨고 보너스 숫자도 맞추셨으므로 ${rank}입니다.`
);
}
if (hit === 5) {
rank = 3;
$logs.append(`${hit}개 맞추셨으므로 ${rank}입니다.`);
}
if (hit === 4) {
rank = 4;
$logs.append(`${hit}개 맞추셨으므로 ${rank}입니다.`);
}
if (hit === 3) {
rank = 5;
$logs.append(`${hit}개 맞추셨으므로 ${rank}입니다.`);
} else {
$logs.append(`${hit}개 이하로 맞추셨므로 꽝 입니다.`);
}
console.log($logs.textContent);
rank(hit);
};
};