티스토리 뷰
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 추첨 게임</title>
<link href="lotto.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="lotto">
<h3><span id="today"></span>로또 번호 추첨</h3>
<div class="numbers"></div>
<button id="draw">추첨</button>
<button id="reset">다시</button>
</div>
</div>
<script src="lotto.js"></script>
</html>
CSS
@charset "utf-8";
@font-face {
font-family: 'CookieRun-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff')
format('woff');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'CookieRun-Regular';
box-sizing: border-box;
}
html {
font-size: 32px;
}
body {
margin: 0;
}
.container {
width: 500px;
height: 100vh;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.lotto {
width: 500px;
text-align: center;
}
.numbers {
width: 500px;
height: 60px;
border: 1px solid black;
border-radius: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
.eachnum {
font-size: 0.75em;
width: 50px;
height: 50px;
border-radius: 25px;
color: white;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
button {
font-size: 0.5em;
width: 100px;
height: 40px;
border: none;
border-radius: 6px;
color: white;
background-color: salmon;
cursor: pointer;
}
button:active {
font-size: 0.6em;
width: 105px;
height: 42px;
}
JS
/*
아래 코드는 강의 영상에서 완성한 코드입니다.
다음 기능을 추가한 후 제출하세요.
요구 사항: '추첨' 버튼을 누른 후, '다시' 버튼을 누르지 않은 채 '추첨' 버튼을 또 눌러도 새롭게 번호가 추가되어야 합니다.
*/
// 요소 선택 및 상수 선언
const todaySpan = document.querySelector('#today');
const numbersDiv = document.querySelector('.numbers');
const drawButton = document.querySelector('#draw');
const resetButton = document.querySelector('#reset');
const lottoNumbers = [];
const colors = ['orange', 'skyblue', 'red', 'purple', 'green'];
const today = new Date();
let year = today.getFullYear();
let month = today.getMonth() + 1;
let date = today.getDate();
todaySpan.textContent = `${year}년 ${month}월 ${date}일 `;
// paintNumber 함수
function paintNumber(number) {
const eachNumDiv = document.createElement('div');
eachNumDiv.classList.add('eachnum');
let colorIndex = Math.floor(number / 10);
eachNumDiv.style.backgroundColor = colors[colorIndex];
eachNumDiv.textContent = number;
numbersDiv.appendChild(eachNumDiv);
}
// 추첨 버튼 클릭 이벤트 핸들링
drawButton.addEventListener('click', function () {
if (lottoNumbers.length === 6) { // 번호가 이미 있을 경우 (lottoNumber의 길이가 6일경우) 초기화
lottoNumbers.splice(0, 6);
numbersDiv.innerHTML = '';
}
while (lottoNumbers.length < 6) {
let ran = Math.floor(Math.random() * 45) + 1;
if (lottoNumbers.indexOf(ran) === -1) {
lottoNumbers.push(ran);
paintNumber(ran);
}
}
});
// 다시 버튼 클릭 이벤트 핸들링
resetButton.addEventListener('click', function () {
lottoNumbers.splice(0, 6);
numbersDiv.innerHTML = '';
});
4;
다시 버튼을 누르지 않아도 추첨 버튼을 누를 때 마다 새로운 번호를 노출시키는게 과제였는데,
if문을 자꾸 while문 뒤에 붙여서 수많은 오류가 발생했었다..
혹시 하고 앞에 붙이니 잘 작동한다.
뽑기 전에 번호가 이미 있으면, 초기화를 진행한 후 다시 번호를 뽑아주면 되는거였다.
'실습' 카테고리의 다른 글
| 드림카 소개하기 (0) | 2024.04.12 |
|---|---|
| 햄버거 주문서 만들기 (0) | 2024.04.12 |
| 시계만들기 (1) | 2024.04.12 |
| 회원가입 폼 만들기 (0) | 2024.04.12 |
| 트위터 만들기 (1) | 2024.04.12 |