<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lotto</title>
</head>
<body>
<div>당첨 숫자</div>
<div id="result"></div>
<div>보너스 숫자</div>
<div class="bonus"></div>
<script src="lotto.js"></script>
</body>
</html>
당첨 숫자와 보너스 숫자 구분을 위한 div tag 생성
let candidate = Array(45).fill().map(function(element, index) {
return index + 1;
});
console.log(candidate);
let shuffle = [];
while (candidate.length > 0) {
let value = candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0];
shuffle.push(value);
}
console.log(shuffle);
let win = shuffle.slice(0, 6);
let bonus = shuffle[shuffle.length - 1];
console.log('Win number :', win.sort(function (p, c) {return p - c}), 'bonus :', bonus);
let result = document.getElementById('result');
for (let i = 0; i < win.length; i++) {
let ball = document.createElement('div');
ball.textContent = win[i];
result.appendChild(ball);
}
let bonusHTML = document.getElementsByClassName('bonus')[0];
let bonusBall = document.createElement('div');
bonusBall.textContent = bonus;
bonusHTML.appendChild(bonusBall);
for 문 안에 setTimeout( ) 메서드를 이용하여 화면에 공들이 1초에 하나씩 나타나도록 하려 했으나 closure 문제 발생으로 인해 아래와 같이 코드를 작성하였다.
closure 문제는 반복문 안에서 비동기 사용 시 발생한다.
(closure 문제 해결한 뒤 코드 업데이트 예정)
아래 코드는 let result부터 작성함.
let result = document.getElementById('result');
function ballCSS(number, result) {
let ball = document.createElement('div');
ball.textContent = number;
ball.style.display = 'inline-block';
ball.style.border = '1px solid black';
ball.style.borderRadius = '100%'; // JS에서는 -가 '빼기'이므로 camel표기법으로 대체
ball.style.width = '20px';
ball.style.height = '20px';
ball.style.textAlign = 'center';
ball.style.padding = '10px';
ball.style.margin = '10px';
result.appendChild(ball);
}
setTimeout(function printTime() { // 비동기 콜백 함수
ballCSS(win[0], result);
}, 1000); // 1000 밀리초 = 1 초
setTimeout(function printTime() {
ballCSS(win[1], result);
}, 2000);
setTimeout(function printTime() {
ballCSS(win[2], result);
}, 3000);
setTimeout(function printTime() {
ballCSS(win[3], result);
}, 4000);
setTimeout(function printTime() {
ballCSS(win[4], result);
}, 5000);
setTimeout(function printTime() {
ballCSS(win[5], result);
}, 6000);
setTimeout(function printTime(){
let bonusHTML = document.getElementsByClassName('bonus')[0];
ballCSS(bonus, bonusHTML);
}, 7000);
함수 ballCSS로 당첨볼들의 CSS를 설정하였고, 그것이 각 당첨볼들에 적용될 수 있도록 하였다.
강의에서 리팩토링하는 부분이 조금 헷갈렸는데
(특히 당첨볼 css를 보너스볼 css에 적용시킬 때 매개변수 설정하는 부분)
github에 다시 처음부터 차근차근 commit 하면서 복습해봐야 할 것 같다.
여기까지의 결과를 보면 다음과 같이 나온다.
플래시를 삽입하고 싶었지만 어떻게 하는지 몰라서..😅
이제 공에 색깔을 입혀보자. 위에서 ballCSS 함수만 가져와서 코드를 더 추가했다.
function ballCSS(number, result) {
let ball = document.createElement('div');
ball.textContent = number;
ball.style.display = 'inline-block';
ball.style.border = '1px solid black';
ball.style.borderRadius = '100%'; // JS에서는 -가 '빼기'이므로 camel표기법으로 대체
ball.style.width = '20px';
ball.style.height = '20px';
ball.style.textAlign = 'center';
ball.style.padding = '10px';
ball.style.margin = '10px';
let backGroundColor; // 여기부터
if (number <= 10) {
backGroundColor = 'red';
} else if (number <= 20) {
backGroundColor = 'orange';
} else if (number <= 30) {
backGroundColor = 'yellow';
} else if (number <= 40) {
backGroundColor = 'blue';
} else {
backGroundColor = 'green';
}
ball.style.background = backGroundColor;
ball.style.fontWeight = 'bold'; // 여기까지 추가함.
result.appendChild(ball);
}
if 문을 사용하여
숫자 1 ~ 10 : 빨간색,
숫자 11 ~ 20 : 오렌지색,
숫자 21 ~ 30 : 노란색,
숫자 31 ~ 40 : 파란색,
숫자 41 ~ 45 : 초록색
위와 같이 설정했고 숫자가 잘 보이지 않아 굵게 처리했다.
++ 강의노트
// 기존
let result = document.getElementById('result');
let bonusHTML = document.getElementsByClassName('bonus')[0];
// querySelector 적용
let result = document.querySelector('#result');
let bonusHTML = document.querySelector('.bonus');
다만 차이는 HTMLElement, NodeList 이 둘의 차이인데 이에 대한 참고자료는 밑에 Ref에
링크해두겠다.
Ref.
- inflearn_웹 게임을 만들며 배우는 자바스크립트
- https://developer.mozilla.org/ko/docs/Web/API/WindowTimers/setTimeout
- https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%A1%9C%EC%A0%80Closure
- https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
- https://humahumahuma.tistory.com/122
- https://whatabouthtml.com/difference-between-getelementbyid-and-queryselector-180