BCSDLab-Edu · SeongminYun1234 · Apr 2, 2025 · Apr 2, 2025 · Apr 9, 2025 · Apr 30, 2025
diff --git a/HTML.html b/HTML.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <div class="frame">
+        <div class="topic_frame">
+            <div class="text1">로또 번호 생성기</div>
+            <div class="text2">행운의 번호를 생성해보세요!</div>
+        </div>
+        <div class="number_make_frame">
+            <h2 class="text3">번호 생성</h2>
+            <div class="circle_number" id="winning_numbers">
+                <div class="ball yellow">?</div>
+                <div class="ball blue">?</div>
+                <div class="ball red">?</div>
+                <div class="ball gray">?</div>
+                <div class="ball green">?</div>
+                <div class="ball yellow">?</div>
+            </div>
+            <div class="button_frame">
+                <button class="button text2" onclick="generateWinningNumbers()">번호 생성하기</button>
+            </div>
+        </div>
+        <div class="buy_frame">
+            <h2 class="text3">로또 구매하기</h2>
+            <div class="choice">
+                <div class="buy_count">
+                    <div class="text4">구매 수량:</div>
+                    <input class="choice_count" id="buyCount" type="text"/>
+                </div>
+                <div class="total_price">총 금액: 0원(1장당 1,000원)</div>
+                <div class="button_frame">
+                    <button class="button text2" onclick="generatePurchaseNumbers()">구매하기</button>
+                </div>
+            </div>
+        </div>
+        <div class="result_check_frame">
+            <h2 class="text3">당첨 결과 확인</h2>
+            <div class="result_box">
+                <div class="text4">이번 주 당첨 번호:</div>
+                <div class="circle_number" id="display_winning_numbers"></div>
+            </div>
+            <div class="text4">내가 구매한 번호:</div>
+            <div id="purchased_numbers_area"></div>
+        </div>
+    </div>
+    <script src="getNumbers.js"></script>
+</body>
+</html>
diff --git a/country.html b/country.html
@@ -0,0 +1,20 @@
+<!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="country_css.css">
+</head>
+<body>
+  <h1>나라 정보 검색기</h1>
+  <div class="container">
+    <input type="text" id="countryInput" placeholder="예: Korea, Japan, France" />
+    <button onclick="searchCountry()">검색</button>
+
+    <div id="result"></div>
+  </div>
+
+  <script src="country_js.js"></script>
+</body>
+</html>
diff --git a/country_css.css b/country_css.css
@@ -0,0 +1,48 @@
+body {
+    font-family: Arial, sans-serif;
+    padding: 40px;
+    background-color: #f5f5f5;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+.container {
+    max-width: 500px;
+    margin: auto;
+    background: white;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+input {
+    width: 80%;
+    padding: 10px;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px 15px;
+    font-size: 16px;
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+#result {
+    margin-top: 20px;
+    text-align: center;
+}
+
+img {
+    margin-top: 10px;
+    width: 120px;
+    border: 1px solid #ccc;
+}
+
+.error {
+    color: red;
+    font-weight: bold;
+}
diff --git a/country_js.js b/country_js.js
@@ -0,0 +1,29 @@
+async function searchCountry() {
+    const input = document.getElementById("countryInput").value.trim();
+    const resultDiv = document.getElementById("result");
+    resultDiv.innerHTML = "🔍 검색 중...";
+
+    if (!input) {
+        resultDiv.innerHTML = "<p class='error'>나라 이름을 입력하세요.</p>";
+        return;
+    }
+
+    try {
+        const res = await fetch(`https://restcountries.com/v3.1/name/${input}`);
+        if (!res.ok) throw new Error("검색 실패");
+
+        const data = await res.json();
+        const country = data[0];
+
+        const capital = country.capital?.[0] || "정보 없음";
+        const flag = country.flags?.png;
+
+        resultDiv.innerHTML = `
+          <p><strong>국가:</strong> ${country.name.common}</p>
+          <p><strong>수도:</strong> ${capital}</p>
+          <img src="${flag}" alt="국기" />
+        `;
+    } catch (error) {
+        resultDiv.innerHTML = "<p class='error'>해당 국가를 찾을 수 없습니다.</p>";
+    }
+}
diff --git a/getNumbers.js b/getNumbers.js
@@ -0,0 +1,62 @@
+const resultCheckFrame = document.querySelector('.result_check_frame');
+let currentWinningNumbers = [];
+let savedPurchaseNumbers = [];
+const total_price = document.querySelector(".total_price");
+
+function getNumbers() {
+    const numbers = new Set();
+    while (numbers.size < 6) {
+        const num = Math.floor(Math.random() * 45) + 1;
+        numbers.add(num);
+    }
+    return Array.from(numbers).sort((a, b) => a - b);
+}
+
+function getColorByIndex(index) {
+    const colors = ['yellow', 'blue', 'red', 'gray', 'green', 'yellow'];
+    return colors[index % colors.length];
+}
+
+function renderBalls(numbers) {
+    return numbers.map((num, index) => `<div class="ball ${getColorByIndex(index)}">${num}</div>`).join('');
+}
+
+function generatePurchaseNumbers() {
+    const count = parseInt(document.getElementById('buyCount').value);
+    savedPurchaseNumbers = [];
+    document.getElementById('purchased_numbers_area').innerHTML = '';
+    for (let i = 0; i < count; i++) {
+        savedPurchaseNumbers.push(getNumbers());
+    }
+    total_price.innerHTML = `총 금액: ${(count * 1000).toLocaleString()}원(1장당 1,000원)`;
+}
+
+function generateWinningNumbers() {
+    resultCheckFrame.style.display = "block";
+    if (savedPurchaseNumbers.length === 0) {
+        alert('먼저 로또를 구매해주세요.');
+        return;
+    }
+    currentWinningNumbers = getNumbers();
+
+    const ballDivs = document.querySelectorAll('#winning_numbers .ball');
+    currentWinningNumbers.forEach((num, i) => {
+        ballDivs[i].textContent = num;
+    });
+
+    document.getElementById('display_winning_numbers').innerHTML = renderBalls(currentWinningNumbers);
+    const area = document.getElementById('purchased_numbers_area');
+    area.innerHTML = '';
+
+    savedPurchaseNumbers.forEach(nums => {
+        const match = nums.filter(n => currentWinningNumbers.includes(n)).length;
+        const resultText = match === 6 ? '결과: 6개 일치 - 당첨' : `결과: ${match}개 일치`;
+        const html = `
+                    <div class="result_box">
+                        <div class="circle_number">${renderBalls(nums)}</div>
+                        <div class="match_result_box">${resultText}</div>
+                    </div>
+                `;
+        area.innerHTML += html;
+    });
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,166 @@
+.frame {
+    width: 500px;
+    border: 1px black solid;
+}
+
+.topic_frame {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 98px;
+    background-color: #4B89DC;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+.text1 {
+    font-size: 24px;
+    font-weight: 700;
+    color: #FFFFFF;
+    white-space: nowrap;
+    /*한줄로 텍스트입력받기  */
+}
+
+.text2 {
+    font-size: 16px;
+    font-weight: 400;
+    color: #FFFFFF;
+    white-space: nowrap;
+}
+
+.number_make_frame {
+    display: flex;
+    flex-direction: column;
+    height: 150px;
+    margin: 10px;
+    ;
+}
+
+.text3 {
+    display: flex;
+    justify-content: left;
+    align-items: start;
+    font-size: 18px;
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.circle_number {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-direction: row;
+}
+
+.ball {
+    width: 45px;
+    height: 45px;
+    border-radius: 22.5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    font-weight: 700;
+    color: #FFFFFF;
+    white-space: nowrap;
+}
+
+.yellow {
+    background-color: #FBC400;
+}
+
+.blue {
+    background-color: #69C8F2;
+}
+
+.red {
+    background-color: #FF7272;
+}
+
+.gray {
+    background-color: #AAAAAA;
+}
+
+.green {
+    background-color: #B0D840;
+}
+
+.button_frame {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button {
+    width: 90%;
+    height: 30px;
+    background-color: #4B89DC;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+.buy_frame {
+    display: flex;
+    flex-direction: column;
+    margin: 10px;
+    border-top: 1px solid forestgreen;
+}
+
+.text4 {
+    font-size: 16px;
+    font-weight: 400;
+    color: black;
+    white-space: nowrap;
+}
+
+.choice {
+    display: flex;
+    flex-direction: column;
+}
+
+.buy_count {
+    display: flex;
+    flex-direction: row;
+}
+
+.choice_count {
+    width: 78%;
+    height: 30px;
+    border: 1px solid black;
+    margin-left: 5px;
+}
+
+.result_frame {
+    margin: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.result_check_frame {
+    display: none;
+    margin: 10px;
+    padding: 10px;
+    background-color: #f0f0f0;
+    border-radius: 10px;
+
+}
+
+.result_box {
+    margin-bottom: 15px;
+    background-color: #f0f0f0;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.match_result_box {
+    text-align: center;
+    font-weight: 600;
+    background-color: #e3ebf5;
+    margin-top: 8px;
+    border-radius: 5px;
+}
+
+.total_price {}