생활 코딩 수업을 듣던 중 수의 연산 관련 영상에서 Math.random라는 javascript 내장 매서드에 대해 접하게 되었다.
이 부분을 수강하면서 숫자 뽑기를 만들면서 실습해보면 좋을 것 같다고 생각했다.
웹 화면으로 결과를 보고 싶어서 js 파일과 html 둘 다 작성했다.
const handleClick = () => {
var randomNumber = [];
while (randomNumber.length < 6) {
var num = Math.floor(Math.random() * 45 + 1);
if(!randomNumber.includes(num)) {
randomNumber.push(num);
}
}
document.getElementById("result").textContent = randomNumber.join(", ");
}숫자를 뽑기 위해서는 pop 버튼을 누르면 된다.
button에 onclick 이벤트를 걸어 pop버튼을 클릭 했을 때 handleClick()라는 함수가 작동하도록 했다.
크기가 6인 배열을 준비했고, 그 안에 1부터 45까지의 숫자들을 랜덤으로 들어가도록 했다.
이미 들어 간 숫자는 들어가지 못하도록 하기 위해 해당 배열에 방금 뽑은 숫자가 포함되는지 확인 하는 javascript 내장 메서드 includes를 사용했다.
만약 포함되지 않을 경우 해당 배열에 push 메서드를 사용하여 숫자 값을 넣도록 했다.
html 파일과 연결하기 위해 요소 아이디 이름을 설정해주었고, 출력 시 쉼표 뒤에 한칸 띄고 싶어서 join(”, “);을 해주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자뽑기</title>
</head>
<body>
<h1 style="text-align: center; margin-top: 250px">숫자뽑기</h1>
<div style="text-align: center;">
<button onclick="handleClick()">pop</button>
</div>
<p id="result" style="font-size: 20px; text-align: center; margin-top: 10px;"></p>
<script src="random.js"></script>
</body>
</html>이왕 화면에 보여지는 거 css를 많이 만졌으면 좋았겠지만 우선은 가운데로 정렬하는 스타일만 줬다ㅋㅋ
수정하게 되면 나중에 코드도 수정해서 올리는 걸로 ,,
SudingWord