📌What I did
첫 팀 프로젝트를 시작했습니다! 이번에 제가 맡은 부분은 HTML이었고 크게 어려운 점은 없었습니다. 난이도가 낮은 프로젝트이니 만큼 주어진 소스에 CSS와 JavaScript파일을 불러올 수 있는 링크를 입력하는 쉬운 난이도였네요. 또 코드리뷰를 발표하면서 각자 배운 것을 알려주면서 복습도 되고 내가 모르는 것을 또 배우게 된 시간이었습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 생성기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "container">
<h1>로또 번호 생성기</h1>
<button id="generateButton">행운의 넘버 !</button>
<div id="numbers"></div>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
document.getElementById('generateButton').addEventListener('click', function() {
let numbers = generateLottoNumbers();
document.getElementById('numbers').textContent = numbers.join(', ');
});
function generateLottoNumbers() {
let lottoNumbers = [];
for (let i = 0; lottoNumbers.length < 6; i++) {
let randomNumber = Math.floor(Math.random() * 45) + 1; //Math.random() 메서드의 의미 " 0 >= x && x < 1 "
if (!lottoNumbers.includes(randomNumber)) {
lottoNumbers.push(randomNumber);
}
}
return lottoNumbers;
}
console.log(generateLottoNumbers());
CSS
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 300px;
height: 220px;
background-color: white;
text-align: center;
border-radius: 3px;
box-shadow: 2px 2px 2px 2px rgb(199, 199, 199);
border-radius: 7px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 0 auto;
}
#numbers {
margin-top: 20px;
}
