마무리문제 ( 로또뽑기 & 명언랜덤 )

로또뽑기 & 명언랜덤을 만들어봤어요 ! 

 전체 소스는 요기 

두소스의 body부분을 볼게요 

<div class="result__wrap">
    <div id="result">
        <h1>오늘의 명언</h1><br>
        <h2 class="wise__quote"></h2><br><br>
        <span class="wise__author"></span>
    </div>
</div>
<div class="lotto__wrap">
    로또번호 번호뽑기<br><br>
    <button class="lotto__start__btn">랜덤뽑기</button>
    <br><br>
    <span class="lootto__num"></span>
</div>

 명언 보기 스크립트를 볼게요 

let quonte= document.querySelector(".wise__quote");
        let author= document.querySelector(".wise__author");
        let wiseAll=[]; //모든 퀴즈 정보 저장 
        let item =[];
        const dataQuestion = () => {
            fetch("json/dummy01.json")  //이파일을 가져올거야 
            .then(res => res.json())        //이파일은 json이야 객체로바꿀꺼야 
            .then(items=> {                 //객체를 한번더 변경할거야
                //랜덤한 번호를 가져옴 
                let totIndex = Math.round(Math.random() * items.quotes.length) ;

				// 명언과 지은이를 넣어줌 (위에서 선언한 랜덤값으로) 초기값설정
                quonte.innerHTML = ` ${items.quotes[totIndex].id}. ${items.quotes[totIndex].quote} `;
                author.innerHTML= `- ${items.quotes[totIndex].author}`;    
                items.quotes.forEach(element => {
                // item[]에 넣어둠 setInterval을 사용하기위해
                    item.push({
                        id:element.id,
                        quote:element.quote,
                        author:element.author
                    });
                });
            })
            .catch((err) => console.log(err));
        }
        // 
        dataQuestion();
        // console.log(items)
        setInterval(() => {
        	//랜덤숫자를 받아서 값을 넣어주기
            let totIndex = Math.round(Math.random() * item.length) ;
            quonte.innerHTML =  `${item[totIndex].id}. ${item[totIndex].quote} `;
            author.innerHTML = `- ${item[totIndex].author}`;  
        }, 10000);

 

랜덤번호뽑기 스크립트를 볼게요

document.querySelector(".lotto__start__btn").addEventListener("click",()=>{
    // createNum1();
    createNum2();

    //정렬
    randomTot.sort(function (a, b) {
        return a - b;
    });
    document.querySelector(".lootto__num").innerHTML = `${randomTot.join(', ')}`;
    //초기화
    randomTot=[];
});

let randomTot = []; // 로또번호
function createNum1(){
    //6자리면 스탑
    while ( randomTot.length < 6) {
        let randomNum = Math.floor(Math.random() * 45) ;
        //randomTot에 값이 안들어 있을경우 값을 넣어주기 
        if(randomTot.indexOf(randomNum)<0){
            // console.log((randomTot.indexOf(randomNum)));
            randomTot.push(randomNum);
        }
    }
}

function createNum2 () {

// 새로운 set 객체 생성
const set = new Set();
//set은 length를 못써서 size를 썻어요 
while ( set.size < 6) {
        let num = Math.floor(Math.random() * 45)+ 1;
        set.add(num);
    }
    // 정렬을 위해 배열로 변경
    randomTot = Array.from([...set]);
};

 

createNum1 설명 

while문을 실행해요 

randomTot.indexOf(randomNum) << 리턴값이 -1 일 경우

즉 값이 배열에 없을때만 값을 넣어줘요

그리고 배열크기가 6일때 정지를 시켜줘요 

createNum2 설명 

set()객체를 생성해요 

while문을 실행해요 

set.add()로 값을 넣어줘요 

중복이면 들어가지 않아요 !

그리고 set.size가 6일때 정지를 시켜줘요 

배열타입으로 변경해줘요 

배열안에 값 정리하기

아래와 같이 sort()함수를 쓸경우 오름차순 내림차순을 편하게 정리할수 있어요 

//오름차순정렬 
randomTot.sort(function(a,b){
return a-b;
});

 

//내림차순정렬
randomTot.sort(function(a,b){
return a-b;
});