반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로또 추첨기</title>
<style>
.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: 0px 10px;
}
.input {
width: 350px;
height: 20px;
}
</style>
</head>
<body>
<form id="form">
<input
class="input"
name="input"
placeholder="숫자 6개를 쉼표로 구분해 입력해주세요. (4,35,43,36,9,11)"
/>
<button>추첨</button>
</form>
<br />
<div id="result">당첨 숫자:</div>
<br />
<div id="bonus">보너스 숫자:</div>
</body>
<script>
const $form = document.querySelector('#form');
const $result = document.querySelector('#result');
const $bonus = document.querySelector('#bonus');
// 중복코드를 함수로 만들어서 중복 줄이기
function drawBall(number, $parent) {
const $ball = document.createElement('div');
$ball.className = 'ball';
$ball.textContent = number;
$parent.appendChild($ball);
}
const setTimeoutPromise = (ms) =>
new Promise((resolve, reject) => {
setTimeout(resolve, ms);
});
$form.addEventListener('submit', async (evnet) => {
evnet.preventDefault();
const string = evnet.target.input.value;
if (!string.trim()) {
return alert('숫자를 입력하세요.');
}
const myNumbers = string.split(',').map((v) => parseInt(v.trim()));
if (myNumbers.length !== 6) {
return alert('숫자를 6개 입력하세요.');
}
if (new Set(myNumbers).size !== 6) {
return alert('중복된 숫자를 입력했습니다.');
}
if (myNumbers.find((v) => v > 45 || v < 1)) {
return alert('1부터 45까지만 입력할 수 있습니다.');
}
const candidate = Array(45)
.fill()
.map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
// 무작위 인덱스 뽑기
const random = Math.floor(Math.random() * candidate.length);
// 뽑은 값을 새로운 배열에 넣기
const spliceArray = candidate.splice(random, 1);
// 새로운 배열에 들어 있는 값 꺼내기
const value = spliceArray[0];
// 꺼낸 값을 shuffle 배열에 넣기
shuffle.push(value);
}
console.log(shuffle);
const winBalls = shuffle.slice(0, 6).sort((a, b) => a - b);
const bonus = shuffle[6];
console.log(winBalls, bonus);
for (let i = 0; i < winBalls.length; i++) {
await setTimeoutPromise(1000);
drawBall(winBalls[i], $result);
}
await setTimeoutPromise(1000);
drawBall(bonus, $bonus);
await setTimeoutPromise(0);
// 몇등인지 표시하기
let count = 1;
myNumbers.forEach((my) => {
if (winBalls.includes(my)) {
count++;
}
});
if (count === 6) {
alert('1등!! 현실 로또 당철될 운을 여기에 쓰시다니 ....');
} else if (count === 5) {
if (myNumbers.includes(bonus)) {
alert('2등! 보너스 공이잠 숫자 6개 맞추셨네요.');
} else {
alert('3등! 아쉽습니다. 그래도 축하드려요!');
}
} else if (count === 4) {
alert('4등! 5만원 축하드려요.');
} else if (count === 3) {
alert('5등! 5천원 축하드려요.');
} else {
alert('로또 참 어렵죠 ㅜㅜ ');
}
});
</script>
</html>반응형
'개발 이야기 > 개발 도서' 카테고리의 다른 글
| 제로초 자바스크립트 입문 <숫자 야구> (0) | 2024.03.22 |
|---|---|
| 제로초 자바스크립트 입문 <계산기> (0) | 2024.03.19 |
| 제로초 자바스크립트 입문 <끝말잇기 2> (0) | 2024.03.18 |
| 제로초 자바스크립트 입문 <끝말잇기 1> (0) | 2024.03.15 |
| 제로초 자바스크립트 입문 <window 객체> (0) | 2024.03.14 |