“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
로또 번호 생성하기
로또가 당첨될때 나오는 무작위한 번호들을 자바스크립트를 사용해서 번호들을 추출해보도록 하겠습니다.
HTML & CSS
<!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>마무리문제2-로또 번호 생성하기</title>
<style>
@import url('https://webfontworld.github.io/goodchoice/Jalnan.css');
#container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: center;
font-family: "Jalnan";
}
h1 {
color: #4f4f4d;
font-size: 30px;
padding-top: 10px;
}
p {
font-size: 20px;
padding-bottom: 5px;
color: #f1e720;
}
button {
width: 200px;
padding: 20px;
border-radius: 20px;
border: 1px solid #447d1b;
background-color: #f7ffd6;
}
#result {
padding: 20px;
font-size: 30px;
color: #000000;
}
</style>
</head>
<body>
<div id="container">
<h1>로또 당첨번호</h1>
<p>행운이 당신에게 찾아오기를</p>
<button>추첨</button>
<div id="result"></div>
</div>HTML&CSS
먼저 HTML에서 contanier를 설정해서 그 안에 제목과 내용 그리고 button을 추가한 다음에 결과 값이 나올 수 있는 result도 만들어 줍니다.
전체적으로 CSS에서는 전체적인 글자 배치와 버튼 배치 폰트와 배경 그리고 글씨색상들을 부여해주었습니다.
Javascript
<script>
let button = document.querySelector("button");
let result = document.querySelector("#result");
function lottoNumber(){
let randomLotto = new Set();
for(let i=1; i<=6; i++){
randomLotto.add(Math.floor(Math.random() * 45) + 1);
}
result.innerText = [...randomLotto];
}
button.addEventListener("click", lottoNumber);
</script>javascript
- 1개의 버튼 결과를 출력할 요소들을 선택자로 button과 #result를 선택하였습니다.
- 함수를 이용해서 lottoNumber 함수가 실행하도록 하였는데 set자료 구조를 이용해서 생성하게 하였습니다.
- for문을 사용해서 6개의 숫자들이 랜덤으로 나올 수 있도록 설정하였고
- 결과 값으로 landomLotto가 Text형식으로 나올 수 있도록 설정하였습니다.
- 그리고 버튼을 클릭할 때마다 서로 다른 숫자 6개가 무작위로 나올 수 있도록 lottoNumber값이 들어갈 수 있도록 설정해 주었습니다.
<완성본>