- [html]
</head>
<body>
<h1>로또 번호 생성기</h1>
<ul id="lotto" class="none">
<li class="a">1</li>
<li class="b">2</li>
<li class="c">3</li>
<li class="d">4</li>
<li class="e">5</li>
<li class="e">6</li>
</ul>
<button id="btn">번호 생성</button>
<script src="./public/js/lotto.js"></script>
</body>- [css]
<style>
#lotto > li {
display: inline-block;
font-size: 32px;
font-weight: bold;
color: #fff;
width: 80px;
height: 80px;
border-radius: 40px;
text-align: center;
line-height: 80px;
margin: 30px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
}
#lotto.none {
display: none;
}
/* 1~10 */
#lotto > li.a {
background: rgb(255, 221, 0);
}
/* 11~20 */
#lotto > li.b {
background: rgb(34, 52, 212);
}
/* 21~30 */
#lotto > li.c {
background: crimson;
}
/* 31~40 */
#lotto > li.d {
background: grey;
}
/* 41~45 */
#lotto > li.e {
background: rgb(11, 154, 52);
}
</style>- [js]
// 1)
const btn = document.querySelector("#btn")
const lottoDisplay = document.querySelector("#lotto")
const lottoBox = document.querySelectorAll("#lotto > li")
// 3)
function randomLotto(){
const random = Math.floor(Math.random()*45 + 1)
return random
}
// 5)
function between(num, min, max) {
//1~10 true
if (min <= num && num <= max) {
return true
}
return false
}
// input 1~45
// 1~10까지는 return a, 11~20까지는 return b....
// output : a || b || c || d || e
function getClassName(num) {
if (between(num, 41, 45)) {
return 'e'
}
if (between(num, 31, 40)) {
return 'd'
}
if (between(num, 21, 30)) {
return 'c'
}
if (between(num, 11, 20)) {
return 'b'
}
if (between(num, 1, 10)) {
return 'a'
}
}
// 4)
// function lottoHandler () {
// const num1 = randomLotto()
// const num2 = randomLotto()
// const num3 = randomLotto()
// const num4 = randomLotto()
// const num5 = randomLotto()
// const num6 = randomLotto()
// const num1ClassName = getClassName(num1)
// const num2ClassName = getClassName(num2)
// const num3ClassName = getClassName(num3)
// const num4ClassName = getClassName(num4)
// const num5ClassName = getClassName(num5)
// const num6ClassName = getClassName(num6)
// lottoBox[0].innerHTML = num1
// lottoBox[0].className = num1ClassName
// lottoBox[1].innerHTML = num2
// lottoBox[1].className = num2ClassName
// lottoBox[2].innerHTML = num3
// lottoBox[2].className = num3ClassName
// lottoBox[3].innerHTML = num4
// lottoBox[3].className = num4ClassName
// lottoBox[4].innerHTML = num5
// lottoBox[4].className = num5ClassName
// lottoBox[5].innerHTML = num6
// lottoBox[5].className = num6ClassName
// lottoDisplay.classList.remove('none')
// }
// 6) 반복문으로 3)의 함수코드 간소화 (리팩토링)
function lottoHandler (e) {
for (let i = 0; i < 6; i++) {
const num = randomLotto()
const className = getClassName(num)
lottoBox[i].innerHTML = num
lottoBox[i].className = className
}
lottoDisplay.classList.remove('none')
}
// 2)
btn.addEventListener('click', lottoHandler)1) 번호 생성 버튼을 누르면 #lotto가 보이도록 연결
2) 번호 생성시 이벤트(click) 발동
3) 랜덤 숫자를 뽑아서 부여하기
(Math.random() & Math.floor() 이용.
소수점 단위의 숫자를 뽑아서 floor로 정수 이외의 부분을 버린다.)
4) 이벤트 발생시 lottoHandler 함수 발동
4) 추출한 숫자를 공 색깔과 매칭
5) 반복문으로 lottoHandler 함수 축약(리팩토링)
6) 이슈 체크
- 중복값 제거하기
- 숫자를 순서대로 정렬하기
