🔎 코드 (html 파일)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 생성기</title>
<!-- <내 코드>
<style>
#container{
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 30px;
}
#container > div{
border: 1px solid black;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 15px;
margin: 7px;
text-align: center;
}
#createLotto{
position: relative;
left: 800px;
width: 300px;
}
</style> -->
<style>
#container{
display: flex;
width: 400px;
justify-content: space-around;
margin: 100px auto 50px;
}
#container > div{
border: 1px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
#createLotto{
width: 300px;
height: 30px;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<button id="createLotto">로또 번호 생성</button>
<script>
document.getElementById("createLotto").addEventListener("click", function(){
// #container 자식 div 6개 선택
const numbers = document.querySelectorAll("#container > div");
// 로또 번호를 저장할 배열 선언
const lotto = [];
while(lotto.length < 6){ // lotto 배열에 저장된 값이 6개 안 되면 반복
// 1 ~ 45 난수 생성
const ran = Math.floor(Math.random()*45 + 1);
// 생성된 난수가 배열에 있는지 검사
if(lotto.indexOf(ran) == -1){ // 중복 X
// 배열에 난수 추가
lotto.push(ran);
}
}
// lotto 오름차순 정렬
lotto.sort( function(a,b){return a-b} );
// numbers의 인덱스 별로 lotto 인덱스에 저장된 값 출력
for(let i=0; i<lotto.length; i++){
numbers[i].innerHTML = lotto[i];
}
// <내 코드> - 중복 제거 실패...... :)
// const lottoNo = document.querySelectorAll("#container > div");
// const arr = [];
// // 로또 번호 생성 시 1 ~ 45 난수 생성
// for(let i=0; i<6; i++){
// arr[i] = Math.floor(Math.random()*45 + 1);
// }
// // lotto에 저장된 난수 오름차순 정렬
// arr.sort(function(a,b){ return a-b; });
// // + 로또 번호 중복 x
// for(let i=0; i<6; i++){
// lottoNo[i].innerHTML = arr[i];
// }
})
</script>
</body>
</html>🔎 출력 화면
풀스택 개발자 기록집 📁