BCSDLab-Edu · gimadud · Mar 23, 2025 · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
+    // 기존 특성에 대한 설명을 보려면 가리킵니다.
+    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/lotto/.vscode/settings.json b/lotto/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md → lotto/README.md b/README.md → lotto/README.md
diff --git a/lotto/lottery.html b/lotto/lottery.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>로또 번호 생성기</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+</head>
+
+
+<body>
+    <div class="whole">
+        <div class="header">
+            <span class="title">로또 번호 생성기</span>
+            <span class="subtitle">행운의 번호를 생성해보세요</span>
+        </div>
+
+        <div class="container">
+            <div class="genSection">
+                <span class="genNumber">번호 생성</span>
+                <div class="genLottoNumbers">
+                    <span class="ball-1">?</span>
+                    <span class="ball-2">?</span>
+                    <span class="ball-3">?</span>
+                    <span class="ball-4">?</span>
+                    <span class="ball-5">?</span>
+                    <span class="ball-6">?</span>
+                </div>
+
+                <button id="genBtn">번호 생성하기</button>
+            </div>
+
+            <div class="purchaseSection">
+                <div class="purchaseLotto">로또 구매하기</div>
+                <div class="purchaseInput">
+                    <label for="purchaseQuantity">구매 수량:</label>
+                    <input type="number" id="purchaseQuantity">
+                </div>
+                <p>총 금액: <span id="totalPrice">0원(1장당 1,000원)</span></p>
+                <button id="purchaseBtn">구매하기</button>
+            </div>
+            <div class="resultSection">
+                <span class="resultTxt"> 당첨 결과 확인: </span>
+                <div class="winNumberSection">
+                    <span> 이번 주 당첨 번호: </span>
+                    <div class="winNumbers"></div>
+                </div>
+                <div class="myNumberSection">
+                    <span> 내가 구매한 번호: </span>
+                    <div id="resultContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/lotto/script.js b/lotto/script.js
@@ -0,0 +1,147 @@
+const purchaseButton = document.querySelector('#purchaseBtn');
+const genButton = document.querySelector('#genBtn');
+const purchaseCountInput = document.getElementById("purchaseCount");
+const purchaseQuantityInput = document.getElementById('purchaseQuantity');
+const totalPriceSpan = document.getElementById('totalPrice');
+const whole = document.querySelector(".whole");
+
+let correctNumbers = [];  
+let userNumbersList = [];      
+
+function genLotto(){
+    let numbers = new Set();
+
+    while (numbers.size<6){
+        function genRandomNumbers(min, max){
+            min = Math.ceil(min);
+            max = Math.floor(max);
+            return Math.floor(Math.random()*(max-min+1))+min;
+        }
+
+        let randomNumber = genRandomNumbers(1,45);
+        numbers.add(randomNumber)
+        numbers = new Set([...numbers].sort((a, b) => a - b));
+    }
+
+    return [...numbers];
+}
+
+function genLottoes(lottoCount) {
+    let lottoList = [];
+    for (let i = 0; i < lottoCount; i++) {
+        lottoList.push(genLotto());
+    }
+    return lottoList;
+}
+
+purchaseQuantityInput.addEventListener('input', function () {
+  const count = parseInt(purchaseQuantityInput.value) || 0;
-purchaseQuantityInput.addEventListener('input', function () {
-  const count = parseInt(purchaseQuantityInput.value) || 0;
+purchaseQuantityInput.addEventListener('input', function (event) {
+  const count = parseInt(event.target.value);
-purchaseQuantityInput.addEventListener('input', function () {
-  const count = parseInt(purchaseQuantityInput.value) || 0;
+purchaseQuantityInput.addEventListener('input', function (event) {
+  const count = parseInt(event.target.value);
+  const pricePerLotto = 1000;
+  const totalPrice = count * pricePerLotto;
+
+  totalPriceSpan.innerText = `${totalPrice.toLocaleString()}원(1장당 1,000원)`;
+});
+
+function printResult(userNumbers, correctNumbers, containerElement, showResult = true) {
+    const resultDiv = document.createElement("div");
+    resultDiv.className = "result-div";
+    resultDiv.style.height = showResult ? "106px" : "45px";
+
+    const lottoContainer = document.createElement("div");
+    lottoContainer.className = "lotto-numbers-container";
+
+    userNumbers.forEach((num, index) => {
+        const numberCircle = document.createElement("span");
+        numberCircle.className = `ball ball-${index + 1}`;
+        numberCircle.textContent = num;
+        lottoContainer.appendChild(numberCircle);
+    });
+
+    resultDiv.appendChild(lottoContainer);
+
+    if (showResult) {
+        const resultTextDiv = document.createElement("div");
+        resultTextDiv.className = "result-text-div";
+
+        const matchCount = userNumbers.filter(num => correctNumbers.includes(num)).length;
+        if (matchCount === 6) {
+            resultTextDiv.innerHTML = `결과: 6개 일치 - 당첨`;
+        } else {
+            resultTextDiv.innerHTML = `결과: ${matchCount}개 일치`;
+        }
+
+        resultDiv.appendChild(resultTextDiv);
+    }
+
+    containerElement.appendChild(resultDiv);
+}
+
+function genWinNumbers() {
+    return genLotto();
+}
+
+let newHeight = 0;
+
+purchaseButton.addEventListener("click", () => {
+    const resultSections = document.getElementsByClassName('resultSection');
+    whole.style.height = "700px";
+
+    for (let i = 0; i < resultSections.length; i++) {
+        resultSections[i].style.display = "block";
+    }
+
+    const quantity = parseInt(purchaseQuantityInput.value);
+
+    if (!quantity || quantity <= 0) {  
+      alert('로또를 구매해주세요');
+      return;
+    }
+
+    userNumbersList = genLottoes(quantity);
+
+    const container = document.querySelector('#resultContainer');
+    container.innerHTML = '';
+
+    userNumbersList.forEach(userNumber => {
+        printResult(userNumber, [], container, false);  
+    });
+
+    const baseHeight = 700;  
+    const addHeightPerLotto = 68;  
+    newHeight = baseHeight + (quantity * addHeightPerLotto);
+
+    whole.style.height = `${newHeight}px`; 
+});
+
+const resultSections = document.getElementsByClassName('resultSection');
+
+for (let i = 0; i < resultSections.length; i++) {
+    resultSections[i].style.display = "none";
+}
+
+
+genButton.addEventListener("click", () => {
+    correctNumbers = genWinNumbers();  
+
+    const correctContainer = document.querySelector('.winNumbers');
+    correctContainer.innerHTML = '';
+    printResult(correctNumbers, correctNumbers, correctContainer, false); 
+
+    const container = document.querySelector('#resultContainer');
+    container.innerHTML = '';  
+
+    userNumbersList.forEach(userNumber => {
+        printResult(userNumber, correctNumbers, container);  
+    });
+
+    const quantity = parseInt(purchaseQuantityInput.value);
+
+    const baseHeight = newHeight;  
+    const addHeightPerLotto = 61;  
+    newHeight = baseHeight+ 70 + (quantity * addHeightPerLotto);
+    whole.style.height = `${newHeight}px`; 
+
+
+
+
+});