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/country-search/country-search-web.html b/country-search/country-search-web.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Country Search web</title>
+</head>
+<body>
+    <h1>
+        <img src= "https://cdn-icons-png.freepik.com/512/2014/2014445.png?ga=GA1.1.1279234850.1745667466" class="globe">   
+        나라 검색기
+    </h1>
+
+    <div class="whole-container">
+        <div id="search-container">
+            <input type="text" id="search-input" placeholder="나라 이름을 영어로 입력하세요.">
+            <button id="search-button">검색</button> 
+        </div>
+
+        <div id="result-container">
+            <img id="flag" src=" " alt=" " class="flag">
+            <div id="country-name" class="country-name">국가 이름</div>
+            <div class="capital-name">수도: <span id="capital-name"></span></div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/country-search/script.js b/country-search/script.js
@@ -0,0 +1,28 @@
+const searchInput = document.getElementById('search-input');
+const searchButton = document.getElementById('search-button');
+const flag = document.getElementById('flag');
+const countryName = document.getElementById('country-name');
+const capitalName = document.getElementById('capital-name');
+
+
+searchButton.addEventListener('click', async () => {
+  const country = searchInput.value.trim();
+
+  try {
+    const response = await fetch(`https://restcountries.com/v3.1/name/${country}`);
+    if (!response.ok) {
+      throw new Error('국가를 찾을 수 없습니다.');
+    }
+
+    const data = await response.json();
+    const countryData = data[0];
+
+    flag.src = countryData.flags.png;
+    countryName.textContent = countryData.name.common;
+    capitalName.textContent = countryData.capital;
+    }
+
+    catch(error) {
+        alert(error.message);
+      }
+});  
diff --git a/country-search/style.css b/country-search/style.css
@@ -0,0 +1,89 @@
+body {
+    background-color: #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 20px;
+  }
+
+.h1{
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 25px;
+}
+
+.globe{
+    width: 30px;
+    height: 30px;
+}
+
+#search-container {
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 345px;
+}
+
+#search-input {
+    padding: 10px;
+    width: 250px;
+    height: 20px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+}
+
+#search-button {
+    padding: 10px 16px;
+    background-color: #4A90E2;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    margin-left: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#search-button:hover {
+    background-color: #357ABD;
+}
+
+#result-container {
+    margin-top: 30px;
+    background: white;
+    border-radius: 12px;
+    width: 385px;
+    height: 300px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.flag{
+    width: 240px;
+    height: 145px;
+    box-shadow: 0 4px 8px rgba(1, 0, 0, 0.2);
+    border-radius: 8px;
+    align-items: center;
+    margin-top: 40px;
+}
+
+.country-name{
+  width: 200px;
+  height: 20px;
+  padding: 10px;
+  margin-top: 15px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.capital-name{
+    width: 200px;
+    height: 20px;
+    padding: 10px;
+    text-align: center;
+}
+
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;
+  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`; 
+
+
+
+
+});