워드프레스 로또번호 생성기 만들기

워드프레스 블로그에 로또번호 생성기/추출기를 만들어 올려보았습니다.

로또번호 생성기 - 워드프레스 정보꾸러미

다른 로또번호 생성기와 차별화를 위해 포함할 번호와 제외할 번호를 선택할 수 있도록 했습니다.😄😄

로또번호 생성 버튼을 누를 때마다 랜덤하게 번호가 생성되고 생성된 번호들을 복사할 수 있습니다.

워드프레스에서 로또번호 생성기 만들기

기본적으로 HTML/PHP/CSS/JavaScript를 사용하여 구현할 수 있습니다. 제 블로그에서 제공되는 로또번호 추출기에 사용된 코드를 정리해 보았습니다.

HTML/PHP:

 <div class="lottery-container">
               <form id="lottery-form">
                <p id="include-label" class="filter-number">포함할 숫자 선택</p>
                <!-- Wrap checkboxes in a div with an id -->
                <div id="include-section">
                    <?php for($i=1; $i<=45; $i++): ?>
                        <label>
                            <input type="checkbox" class="exclude-number include" value="<?php echo $i; ?>" />
                            <span><?php echo str_pad($i, 2, '0', STR_PAD_LEFT); ?></span>
                        </label>
                    <?php endfor; ?>
                </div>

                <p id="exclude-label" class="filter-number" style="margin-top: 30px;">제외할 숫자 선택</p>
                <!-- Wrap checkboxes in a div with an id -->
                <div id="exclude-section">
                    <?php for($i=1; $i<=45; $i++): ?>
                        <label>
                            <input type="checkbox" class="exclude-number exclude-number-exclude exclude" value="<?php echo $i; ?>" />
                            <span><?php echo str_pad($i, 2, '0', STR_PAD_LEFT); ?></span>
                        </label>
                    <?php endfor; ?>
                </div>
                
                <br>
                <button type="button" id="generate">로또번호 생성</button>
            </form>
            <div class="lottery-results">
                <h2>로또번호: <span id="latest-numbers"></span></h2>
            </div>
            <div id="results">
            </div>
            <button type="button" id="copy-button">번호 복사하기</button>
        </div>
        			<!-- End -->

Javascript:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const generateBtn = document.getElementById('generate');
    const resultsDiv = document.getElementById('results');
    const latestNumbers = document.getElementById('latest-numbers');
    const copyButton = document.getElementById('copy-button');
    const lotteryResults = document.querySelector('.lottery-results');
    const includeLabel = document.getElementById('include-label');
    const excludeLabel = document.getElementById('exclude-label');
    const includeSection = document.getElementById('include-section');
    const excludeSection = document.getElementById('exclude-section');
    const includeCheckboxes = document.querySelectorAll('.include');
    const excludeCheckboxes = document.querySelectorAll('.exclude');

    // Initialize sections to be hidden
    resultsDiv.style.display = 'none';
    lotteryResults.style.display = 'none';
    copyButton.style.display = 'none';
    // includeSection.style.display = 'none';
    // excludeSection.style.display = 'none';

    includeLabel.addEventListener('click', function() {
        includeSection.style.display = includeSection.style.display === 'none' ? 'block' : 'none';
    });

    excludeLabel.addEventListener('click', function() {
        excludeSection.style.display = excludeSection.style.display === 'none' ? 'block' : 'none';
    });

    // Disable the opposite checkbox when one is checked
    includeCheckboxes.forEach((checkbox, index) => {
        checkbox.addEventListener('change', function() {
            if (checkbox.checked) {
                excludeCheckboxes[index].disabled = true;
            } else {
                excludeCheckboxes[index].disabled = false;
            }
        });
    });

    excludeCheckboxes.forEach((checkbox, index) => {
        checkbox.addEventListener('change', function() {
            if (checkbox.checked) {
                includeCheckboxes[index].disabled = true;
            } else {
                includeCheckboxes[index].disabled = false;
            }
        });
    });

    let counter = 1;
    generateBtn.addEventListener('click', function() {
        // Show the 'results', 'lottery-results', and 'copy-button'
        resultsDiv.style.display = 'block';
        lotteryResults.style.display = 'block';
        copyButton.style.display = 'block';

        const includeChecked = document.querySelectorAll('.include:checked');
        const excludeChecked = document.querySelectorAll('.exclude:checked');
        const includeNumbers = Array.from(includeChecked).map(c => parseInt(c.value));
        const excludeNumbers = Array.from(excludeChecked).map(c => parseInt(c.value));
        const numbers = [];

        for (let i = 1; i <= 45; i++) {
            if (!includeNumbers.includes(i) && !excludeNumbers.includes(i)) {
                numbers.push(i);
            }
        }

        const selectedNumbers = [...includeNumbers];
        for (let i = 0; i < (6 - includeNumbers.length); i++) {
            const randomIndex = Math.floor(Math.random() * numbers.length);
            selectedNumbers.push(numbers.splice(randomIndex, 1)[0]);
        }

        selectedNumbers.sort((a, b) => a - b);
        const displayNumbers = selectedNumbers.map(n => String(n).padStart(2, '0')).join(',');
        latestNumbers.innerHTML = displayNumbers;

        const result = document.createElement('div');
        result.innerHTML = `${counter} - ${displayNumbers}`;
        resultsDiv.appendChild(result);
        counter++;
    });

    // Event Listener for Copy button
    copyButton.addEventListener("click", function() {
        const allNumbers = Array.from(document.querySelectorAll("#results div"))
                          .map(div => div.textContent.split("-")[1].trim())
                          .join("\n");
        navigator.clipboard.writeText(allNumbers).then(() => {
            alert("번호가 복사되었습니다!");
        });
    });
});
</script>

CSS:

.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px 20px 30px 20px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#lottery-form label {
  display: inline-block;
  margin: 8px;
  cursor: pointer;
}

#lottery-form label span {
  margin-left: 5px;  /* Space between checkbox and number */
}

#generate {
  padding: 10px 20px;
  background-color: #607D8B;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%; /* Make the button full width */
}

#generate:hover {
  background-color: #455A64;
}

#copy-button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #607D8B;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

.lottery-results {
	text-align: left; width:100%; margin-top: 30px;
}

/* Hide default checkbox */
.exclude-number {
  display: none;
}

/* Create custom checkbox */
.exclude-number + span:before {
  content: " ";
  display: inline-block;
  width: 20px;  /* Width of the custom checkbox */
  height: 20px;  /* Height of the custom checkbox */
  margin-right: 10px;  /* Space between checkbox and number */
  background-color: #FFFFFF;  /* Background color */
  border: 2px solid #000000;  /* Border color */
  cursor: pointer;
}

/* Style custom checkbox when checked */
.exclude-number:checked + span:before {
  background-color: #000000;  /* Background color when checked */
  border: 2px solid #000000; 
}

@media (max-width: 768px) {
  .container .site-content .content-area {
    padding: 15px;
  }
}

/* Add new class for exclude checkboxes */
.exclude-number-exclude + span:before {
  border: 2px solid #FF0000;
}

.exclude-number-exclude:checked + span:before {
  background-color: #FF0000;  
  border: 2px solid #FF0000;
}

.lotto-title {
  font-size: 1.6em;
  line-height: 2.4em;
  font-weight: 600;
  margin-top: -20px;
  margin-bottom: 5px;
  text-align: center;
}

.filter-number {
	text-align: center;
	font-weight: 600;
}

/* Initially hide these sections */
.lottery-results, #copy-button {
  display: none;
}

#include-section, #exclude-section {
    display: block;
  }
  
  #include-label,
#exclude-label {
  font-size: 20px;         /* Font size */
  color: #333;             /* Text color */
  margin-bottom: 10px;     /* Spacing below the label */
  padding: 5px 10px;          /* Padding on top and bottom */
  cursor: pointer;         /* Cursor to indicate clickable */
  background-color: #f3f3f3; /* Light grey background */
  border-radius: 5px;      /* Rounded corners */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
  text-align: center;      /* Center aligned text */
}

/* Add some hover effect */
#include-label:hover,
#exclude-label:hover {
  background-color: #e0e0e0; /* Darken background on hover */
}

/* If you want to differentiate between the two */
#include-label {
  color: #008000;  /* Green text */
}

#exclude-label {
  color: #800000;  /* Maroon text */
}

form#lottery-form {
    width: 100%;
    text-align: center;
}

적절히 응용하여 적용해 보시기 바랍니다.

자바스크립트 코드는 해당 페이지에만 적용되도록 하는 것이 바람직합니다. WPCode와 같은 플러그인을 사용하면 편리하지만, 이 경우 모든 사이트에 코드가 로드될 것입니다.

https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%97%A4%EB%8D%94%EC%99%80-%ED%91%B8%ED%84%B0%EC%97%90-%EC%89%BD%EA%B2%8C-%EC%BD%94%EB%93%9C-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0/

워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: Insert Headers and Footers 플러그인

GeneratePress 테마를 사용하는 경우 Element를 사용하여 특정 페이지만 로드되도록 할 수 있습니다.

https://www.thewordcracker.com/intermediate/generatepress-%ED%85%8C%EB%A7%88-%ED%9B%84%ED%81%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/

GeneratePress 테마 후크 사용하기 - 워드프레스 정보꾸러미

실제로 적용하여 작동하도록 하려면 워드프레스에 대한 약간의 지식이 필요할 수 있습니다.

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)