로또추첨기 마무리 & querySelector

var 후보군 = Array(45)
.fill()
.map(function(요소,인덱스){
    return 인덱스 + 1;
});

var 셔플 = [];
//반복문 사용 팁
//정확히 몇 번 루프 돌아야할 지 알 땐 for문 쓰고, 모른다면 또는 기준값이 계속 바뀐다면 while문.
//배열의 길이가 한번씩 뽑을 때마다 바뀌기 때문에 이때 while문 쓴다.
while(후보군.length > 0) {
    var 이동값 = 후보군.splice(Math.floor(Math.random() * 후보군.length),1)[0];//랜덤한 인덱스값에서 원소 1개를 뽑는다!
    셔플.push(이동값);
}
console.log(셔플);
var 보너스 = 셔플[셔플.length-1];//마지막 숫자 가져온다.
var 당첨숫자들 = 셔플.slice(0,6);//0번째부터 6번째 전까지 자른다. 6번째는 포함 안 된다.
//sort(function(p,c) {p-c;});오름차순 정렬.원리 : 뺀 결과가 0보다 크면 순서를 바꾼다.
//sort(function(p,c) {c-p;});내림차순 정렬.원리: c-p를 해서 뺸 결과가 0보다 크면 순서를 바꾼다.

var 당첨숫자들 = 셔플
    .slice(0,6)
    .sort(function(p,c){return p-c;
});

//html의 id로 태그를 선택할 수 있다.
//var 결과창 = document.getElementById('결과창');
//querySelector과 여러 태그를 동시에 선택하는 querySelectorAll이 있다.
var 결과창 = document.querySelector('#결과창');//css처럼 괄호안에 넣으면 된다.
function 공색칠하기(숫자, 결과창) {//다른 부분은 매개변수로, 겹치는 부분은 다 함수로!
    
    var 공 = document.createElement('div');
    공.textContent = 숫자;
    공.style.display = 'inline-block';
    공.style.border = '1px solid black';
    공.style.borderRadius = '10px';//abc-def-gh =>abcDefGh
    공.style.width = '20px';
    공.style.height = '20px';
    공.style.textAlign = 'center';
    공.style.marginRight = '10px';
    공.className = '공ID'+숫자;//html에서 class는 JS에서 className이다.
    공.style.fontSize = '12px';
    var 배경색;
    if(숫자 <= 10) {
        배경색 = 'red';
    } else if(숫자 <= 20) {
        배경색 = 'orange';
    } else if(숫자 <= 30) {
        배경색 = 'yellow';
    } else if(숫자 <= 40) {
        배경색 = 'blue';
    } else {
        배경색 = 'green';
    }
    공.style.background = 배경색;
    결과창.appendChild(공);
}
    //1초에 한번씩 실행하도록 - 일종의 비동기.순서대로 실행되지 않고 언제 실행될지 모른다.
    setTimeout(function 비동기콜백함수(){
        공색칠하기(당첨숫자들[0],결과창);
    },1000);//1000ms = 1초
    //이 부분은 반복문 안에서 비동기 사용시 클로저와 관련된 이슈로, 실행되지 않으므로 다음과 같이 시간차를 두고 실행한다.

    setTimeout(function 비동기콜백함수(){
        공색칠하기(당첨숫자들[1],결과창);
    },2000);
    setTimeout(function 비동기콜백함수(){
        공색칠하기(당첨숫자들[2],결과창);
    },3000);
    setTimeout(function 비동기콜백함수(){
        공색칠하기(당첨숫자들[3],결과창);
    },4000);
    setTimeout(function 비동기콜백함수(){
        공색칠하기(당첨숫자들[4],결과창);
    },5000);
    setTimeout(function 비동기콜백함수(){
        공색칠하기(당첨숫자들[5],결과창);
    },6000);
    setTimeout(function 비동기콜백함수(){
        //html의 클래스 이름으로 태그를 선택할 수 있다. + getElemntsByTagName : 태그 이름으로 찾을 수도 있다.
        //var 칸 = document.getElementsByClassName('보너스')[0];//클래스 이름으로 찾을 때 주의점!같은 클래스 이름으로 여러개의 하위 클래스가 있을 수 있기 때문에 인덱스를 꼭 붙여준다!
        var 칸 = document.querySelector('.보너스');//클래스 이름으로 찾을 때 주의점!같은 클래스 이름으로 여러개의 하위 클래스가 있을 수 있기 때문에 인덱스를 꼭 붙여준다!

        공색칠하기(보너스, 칸);
    },7000);