로또 번호 생성기 과제

포트폴리오에용 2024. 12. 16. 17:22

2024. 12. 16. 17:22

로또 번호 생성기 과제 (난이도 하)

<aside> 🔥

이 과제에서는 HTML, CSS, JavaScript를 사용하여 간단한 로또 번호 생성기를 만드는 법을 배웁니다. 특히, 로또 번호를 생성하는 로직도 직접 한번 생성을 해보면서 함수 생성에 대한 연습을 해볼게요.

</aside>

Screen Recording 2024-09-09 at 3.09.12 AM.mov

1단계: 프로젝트 파일 구조 설정

먼저, 프로젝트를 시작하기 위해 기본 파일 구조를 설정합니다.

새 폴더 생성: 컴퓨터의 원하는 위치에 'lotto-generator'라는 폴더를 만듭니다.
파일 생성: 아래와 같은 파일들을 폴더 안에 생성하세요.
- index.html
- styles.css
- script.js

2단계: HTML 파일 만들기

이제 index.html 파일을 열고, 아래의 코드를 입력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또 번호 생성기</title>
    <!-- 여기에 styles.css 파일을 불러오는 링크를 추가하세요 -->
</head>
<body>
    <div class="container">
        <h1>로또 번호 생성기</h1>
        <button id="generateButton">행운의 넘버!</button>
        <div id="numbers"></div>
    </div>
    <!-- 여기에 script.js 파일을 불러오는 스크립트를 추가하세요 -->
</body>
</html>

과제: HTML 파일 완성하기

<head> 태그 안에 styles.css 파일을 불러오는 <link> 태그를 추가하세요.
<body> 태그 끝 부분에 script.js 파일을 불러오는 <script> 태그를 추가하세요.

이 파일들을 불러오지 않으면 스타일과 기능이 적용되지 않습니다.

3단계: CSS 파일 만들기

이제 styles.css 파일을 열고, 아래의 기본적인 스타일을 적용합니다.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

/* 여기에 container 클래스에 대한 스타일을 추가하세요 */

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* 여기에 numbers ID에 대한 스타일을 추가하세요 */

과제: CSS 파일 완성하기

제가 기본적인 css 만 했으니, 여러분들이 나머지는 완성시켜주세요!
.container 클래스에 대한 스타일을 추가하세요. (배경색, 패딩, 그림자 등을 지정해 보세요.)
#numbers ID에 대한 스타일을 추가하세요. (폰트 크기나 텍스트 정렬 등을 지정해 보세요.)

4단계: JavaScript 파일 만들기

마지막으로, script.js 파일을 열고, 아래의 코드를 입력합니다.

// 버튼이 눌렸을 때, 이벤트가 작동되도록 이벤트리스너를 넣어준 코드입니다.
document.getElementById('generateButton').addEventListener('click', function() {
    let numbers = generateLottoNumbers();  // 버튼이 눌리면 이 함수가 실행이 될 거에요.
    document.getElementById('numbers').textContent = numbers.join(', ');
});

function generateLottoNumbers() {
	/* 여기에 generateLottoNumbers 함수를 완성해주세요. */
}

과제: generateLottoNumbers 함수 완성하기

generateLottoNumbers 함수는 로또 번호를 생성하는 역할을 합니다. 다음 힌트를 참고하여 함수를 작성하세요:

빈 배열 만들기: 로또 번호를 저장할 빈 배열을 만듭니다.
반복문 사용: 배열에 6개의 번호가 들어갈 때까지 반복문을 사용하세요.
랜덤 번호 생성: 1부터 45 사이의 랜덤 번호를 생성합니다. 이때, Math.random()과 Math.floor() 함수를 사용하면 유용합니다.
중복 검사: 배열에 이미 같은 번호가 들어있지 않은지 확인한 후, 배열에 추가하세요. 배열의 includes() 메서드를 사용하면 중복 검사가 가능합니다.
배열 반환: 6개의 번호가 모두 배열에 추가되면, 배열을 반환합니다.

힌트를 참고하여, generateLottoNumbers 함수를 직접 작성해보세요!

5단계: 프로젝트 실행

모든 파일을 저장한 후, index.html 파일을 브라우저에서 열어보세요. HTML, CSS, JavaScript 파일을 올바르게 작성하고 링크했다면, "Generate Numbers" 버튼을 클릭했을 때 1부터 45까지의 로또 번호가 화면에 표시될 것입니다.

추가 과제 (Optional)

기본 기능을 완성했다면, 아래의 추가 과제를 시도해 보세요:

번호를 오름차순으로 정렬해서 출력하기
이전 결과를 저장하고, 새 결과와 비교하기
결과를 더 멋지게

로또 번호 생성기.zip

0.00MB

'자바스크립트' 카테고리의 다른 글

객체 프로퍼티 접근 및 조회 (0)	2024.12.18
삼항연산자 (1)	2024.12.16
switch 함수 (0)	2024.12.12
if 문 / if ...else 문/ else if 절 (0)	2024.12.11
비교 연산자 (0)	2024.12.10

포트폴리오