My Melody Kawaii

JAVASCRIPT

로또 번호를 자바스크립트로 만들어보자!

younajeong 2023. 4. 16. 20:59

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- 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값이 들어갈 수 있도록 설정해 주었습니다.

 

 

<완성본>