JavaScript - 로또추첨기 만들기(4)

Sangho Moon·2020년 7월 21일
JavaScript
0

JavaScript

목록 보기
14/25
post-thumbnail
  • 당첨볼이 1초에 하나씩 화면에 나타나도록 만들기
  • JS에서 CSS 조작하기

1. HTML

<!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 생성


2. JavaScript

  • 기존 코드
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 : 초록색

위와 같이 설정했고 숫자가 잘 보이지 않아 굵게 처리했다.


++ 강의노트

  • getElementById, getElementsByClassName 대신 querySelector를 쓸 수 있다.
// 기존
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에

링크해두겠다.


3. 결과


Ref.

profile
Sangho Moon
Front-end developer
이전 포스트

JavaScript - 로또추첨기 만들기(3)

다음 포스트

JavaScript - Object.entries, find( ), findIndex( )

0개의 댓글