[기능별 페이지] lotto

상세 설명

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>Lotto Number Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <div class="generator-container">
            <!-- 로고 이모티콘 느낌의 사각형 박스 -->
            <div class="logo-container">
                <span>🎱 Lotto Number Generator 🎱</span>
            </div>
            <!-- 로또 번호 생성 버튼 -->
            <button id="generateButton">Generate Numbers</button>
            <!-- 생성된 번호를 표시할 영역 -->
            <div id="numbers" class="numbers-display"></div>
            <!-- 기록된 번호를 표시할 영역 -->
            <div class="history-container">
                <h2>History</h2>
                <div id="history" class="history-display"></div>
            </div>
            <!-- 다운로드 버튼 -->
            <button id="downloadButton">Download History</button>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

main 태그 내에 모든 요소가 포함되어 있습니다.
div.generator-container 내에 로고, 버튼, 번호 표시 영역, 기록 표시 영역, 다운로드 버튼이 포함되어 있습니다.
로고는 div.logo-container에 텍스트로 표현되어 있습니다.
버튼(Generate Numbers)을 클릭하면 로또 번호가 생성됩니다.
생성된 번호는 div.numbers-display 영역에 표시됩니다.
기록된 번호는 div.history-display 영역에 표시됩니다.
Download History 버튼을 클릭하면 기록된 번호 리스트가 CSV 파일로 다운로드됩니다.

CSS (styles.css)

/* 기본 스타일 설정 */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* 배경 그라데이션 효과 */
    height: 100vh;
    justify-content: center;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 20px;
}

/* 로또 번호 생성 컨테이너 스타일 */
.generator-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

/* 로고 컨테이너 스타일 */
.logo-container {
    background: linear-gradient(to right, #8e2de2, #4a00e0);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 1.5em;
}

/* 버튼 스타일 */
button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #6200ea;
    color: white;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #3700b3;
}

/* 다운로드 버튼 스타일 */
#downloadButton {
    margin-top: 10px;
    background-color: #ff6f61;
}

#downloadButton:hover {
    background-color: #e55b50;
}

/* 번호 표시 영역 스타일 */
.numbers-display {
    margin-top: 20px;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    gap: 10px;
    height: 60px; /* 고정된 높이 설정 */
}

/* 개별 번호 스타일 */
.number {
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.5);
    animation: appear 0.5s forwards;
}

/* 로또 공 색상 */
.color-yellow {
    background-color: #ffd700; /* 노랑 */
}

.color-blue {
    background-color: #3357ff; /* 파랑 */
}

.color-red {
    background-color: #ff5733; /* 빨강 */
}

.color-gray {
    background-color: #a9a9a9; /* 회색 */
}

.color-green {
    background-color: #33ff57; /* 녹색 */
}

/* 애니메이션 효과 */
@keyframes appear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 기록 컨테이너 스타일 */
.history-container {
    margin-top: 20px;
    text-align: left;
}

.history-display {
    max-height: calc(30px * 5 + 40px); /* 5개의 history-item 높이 + padding */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background: #f9f9f9;
}

.history-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.history-item:last-child {
    margin-bottom: 0;
}

.history-item span {
    margin-right: 10px;
}

.history-number {
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8em;
    margin-right: 5px;
}

body: 페이지 전체의 기본 스타일을 설정합니다.
main: 주요 콘텐츠를 가운데 정렬하고 패딩을 설정합니다.
.generator-container: 로또 번호 생성 컨테이너 스타일을 설정합니다.
.logo-container: 로고의 배경과 텍스트 스타일을 설정합니다.
button: 버튼의 기본 스타일과 호버 시 스타일을 설정합니다.
#downloadButton: 다운로드 버튼의 스타일을 설정합니다.
.numbers-display: 생성된 번호를 표시할 영역의 스타일을 설정합니다.
.number: 개별 번호 스타일을 설정합니다.
.history-container: 기록 컨테이너 스타일을 설정합니다.
.history-display: 기록 표시 영역의 최대 높이를 설정하고 스크롤을 활성화합니다.
.history-item: 기록 항목의 스타일을 설정합니다.
.history-number: 기록된 개별 번호의 스타일을 설정합니다.

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
    // 로또 번호 생성 버튼과 번호 표시 영역을 가져옴
    const generateButton = document.getElementById('generateButton');
    const numbersDisplay = document.getElementById('numbers');
    const historyDisplay = document.getElementById('history');
    const downloadButton = document.getElementById('downloadButton');
    let round = 1; // 회차를 기록할 변수
    let history = []; // 기록된 번호 리스트

    // 버튼 클릭 시 로또 번호 생성 함수 호출
    generateButton.addEventListener('click', generateNumbers);

    // 다운로드 버튼 클릭 시 기록된 번호 리스트 다운로드 함수 호출
    downloadButton.addEventListener('click', downloadHistory);

    // 로또 번호 생성 함수
    function generateNumbers() {
        // 번호 표시 영역 초기화
        numbersDisplay.innerHTML = '';
        // 랜덤 번호 6개 생성
        const numbers = getRandomNumbers(6, 1, 45);
        // 생성된 번호를 정렬
        numbers.sort((a, b) => a - b);
        // 생성된 번호를 표시
        numbers.forEach((number) => {
            const numberElement = document.createElement('div');
            numberElement.classList.add('number');
            numberElement.classList.add(getColorClass(number)); // 번호에 색상 클래스 추가
            numberElement.textContent = number;
            numbersDisplay.appendChild(numberElement);
        });

        // 생성된 번호를 기록
        addHistory(numbers);
    }

    // 랜덤 번호 생성 함수
    function getRandomNumbers(count, min, max) {
        const numbers = new Set();
        // 중복 없이 고유한 랜덤 번호 생성
        while (numbers.size < count) {
            const number = Math.floor(Math.random() * (max - min + 1)) + min;
            numbers.add(number);
        }
        return Array.from(numbers);
    }

    // 번호에 따른 색상 클래스를 반환하는 함수
    function getColorClass(number) {
        if (number >= 1 && number <= 10) return 'color-yellow';
        if (number >= 11 && number <= 20) return 'color-blue';
        if (number >= 21 && number <= 30) return 'color-red';
        if (number >= 31 && number <= 40) return 'color-gray';
        if (number >= 41 && number <= 45) return 'color-green';
    }



 // 생성된 번호를 기록하는 함수
    function addHistory(numbers) {
        const historyItem = document.createElement('div');
        historyItem.classList.add('history-item');

        // 회차 표시
        const roundElement = document.createElement('span');
        roundElement.textContent = `Round ${round}:`;
        historyItem.appendChild(roundElement);

        // 번호 표시
        numbers.forEach((number) => {
            const numberElement = document.createElement('div');
            numberElement.classList.add('history-number');
            numberElement.classList.add(getColorClass(number)); // 번호에 색상 클래스 추가
            numberElement.textContent = number;
            historyItem.appendChild(numberElement);
        });

        // 기록된 번호를 표시할 영역에 추가
        historyDisplay.appendChild(historyItem);

        // 기록된 번호 리스트에 추가
        history.push({ round, numbers });

        // 회차 증가
        round++;

        // 스크롤 맨 아래로 이동
        historyDisplay.scrollTop = historyDisplay.scrollHeight;
    }

    // 기록된 번호 리스트를 다운로드하는 함수
    function downloadHistory() {
        const csvContent = "data:text/csv;charset=utf-8,"
            + history.map(e => `Round ${e.round},${e.numbers.join(",")}`).join("\n");

        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "lotto_history.csv");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
});

DOMContentLoaded 이벤트: DOM이 완전히 로드되고 파싱되면 실행됩니다.
generateNumbers 함수: 랜덤 로또 번호를 생성하고 화면에 표시합니다.
getRandomNumbers 함수: 주어진 범위 내에서 중복 없이 랜덤 번호를 생성합니다.
getColorClass 함수: 번호에 따라 색상 클래스를 반환합니다.
addHistory 함수: 생성된 번호를 기록하고 화면에 표시합니다.
downloadHistory 함수: 기록된 번호 리스트를 CSV 파일로 다운로드합니다.

저작자표시

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글

[기능별 페이지] memory matching game2 (0)	2024.06.10
[기능별 페이지] memory matching game1 (0)	2024.06.10
[기능별 페이지] omok (0)	2024.06.10
[기능별 페이지] - number guessing game (1)	2024.06.10
[기능별 페이지] 게임 - tictactoe (1)	2024.06.10

Javascript 개발자

[기능별 페이지] lotto

상세 설명

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글

티스토리툴바

[기능별 페이지] lotto

상세 설명

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글

관련글

티스토리툴바

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글