BCSDLab-Edu · jibeommm · Mar 26, 2025 · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
-# FrontEnd_2025-1
-2025년 상반기 프론트엔드 비기너 학습 레포
+# FrontEnd_2025-1
+2025년 상반기 프론트엔드 비기너 학습 레포
diff --git a/html.html b/html.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>나라 정보 검색기</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <p>나라 정보 검색기</p>
+    <div id="search_section">
+        <input type="text" id="input" placeholder="나라명 : (예시 : South Korea)">
+        <button id="search_btn" onclick="search()">검색</button>
+    </div>    
+    <div id="result"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/lotto.html b/lotto.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>로또 번호 생성기</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>로또 번호 생성기</h1>
+            <h2>행운의 로또번호를 생성해보세요!</h2>
+        </div>
+        <div class="creat_section">
+            <p>번호 생성</p>
+            <div class="balls">
+                <div class="ball" id="yellow">?</div>
+                <div class="ball" id="blue">?</div>
+                <div class="ball" id="red">?</div>
+                <div class="ball" id="gray">?</div>
+                <div class="ball" id="green">?</div>
+                <div class="ball" id="yellow">?</div>
+            </div>
+            <div class = "btn1">
+                <button class="a" id="create_number_btn">번호 생성하기</button>
+            </div>
+        </div>
+        <hr>
+        <div class="buy_section">
+            <p class="buy_txt">로또 구매하기</p>
+            <p>구매 수량 : <input type="number" id="buy_count" value="1"></p>
+            <p> 총 금액 : <span id="total_price">3,000</span>원 (1장당 1,000원)</p>
+            <div class = "btn1">
+                <button id="buy_btn">구매하기</button>
+            </div>
+        </div>
+        <div class="result_section">
+            <p class="result_txt">당첨 결과 확인</p>
+            <div class="result" id="result">
+                <p>이번주 당첨 번호 : <span id="result_number"></span></p>
+                <div class="balls">
+                    <div class="ball" id="yellow">3</div>
+                    <div class="ball" id="blue">14</div>
+                    <div class="ball" id="red">25</div>
+                    <div class="ball" id="gray">33</div>
+                    <div class="ball" id="green">41</div>
+                    <div class="ball" id="yellow">9</div>
+                </div>
+            </div>
+            <div class="my_result_list" id="result">
+                <p>내가 구매한 번호 : <span id="result_number"></span></p>
+                <div class="result">
+                    <div class="balls" id="my_result02">
+                        <div class="ball" id="yellow">7</div>
+                    <div class="ball" id="blue">12</div>
+                    <div class="ball" id="red">25</div>
+                    <div class="ball" id="gray">38</div>
+                    <div class="ball" id="green">42</div>
+                    <div class="ball" id="yellow">9</div>
+                    </div>
+                    <div class="my_result">결과 : 2개 일치</div>
+                </div>
+                <div class="result">
+                    <div class="balls" id="my_result02">
+                        <div class="ball" id="yellow">3</div>
+                        <div class="ball" id="blue">14</div>
+                        <div class="ball" id="red">25</div>
+                        <div class="ball" id="gray">33</div>
+                        <div class="ball" id="green">41</div>
+                        <div class="ball" id="yellow">9</div>
+                    </div>
+                    <div class="my_result">결과 : 6개 일치 - 당첨</div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <script src="lotto.js"></script>
+</body>
diff --git a/lotto.js b/lotto.js
@@ -0,0 +1,98 @@
+let winningNumbers = [];
+let buyCount = 0;
+
+function LottoNumber() {
+  const numbers = new Set();
+  while (numbers.size < 6) {
+    const rand = Math.floor(Math.random() * 45) + 1;
+    numbers.add(rand);
+  }
+  return Array.from(numbers).sort((a, b) => a - b);
+}
+
+function WinningNumbers() {
+  const result_list = document.querySelector(".result");
+  const resultNumbers = LottoNumber();
+  const old_result_list = document.querySelector(".result .balls");
+  if (old_result_list) old_result_list.remove();
+  result_list.innerHTML += `
+    <div class="balls">
+      <div class="ball" id="yellow">${resultNumbers[0]}</div>
+      <div class="ball" id="blue">${resultNumbers[1]}</div>
+      <div class="ball" id="red">${resultNumbers[2]}</div>
+      <div class="ball" id="gray">${resultNumbers[3]}</div>
+      <div class="ball" id="green">${resultNumbers[4]}</div>
+      <div class="ball" id="yellow">${resultNumbers[5]}</div>
+    </div>
+  `;
+}
+
+document.getElementById("buy_count").addEventListener("input", () => {
+  const count = document.getElementById("buy_count").value;
+  const totalPrice = count * 1000;
+  document.getElementById("total_price").textContent = totalPrice.toLocaleString();
+});
+
+document.getElementById("buy_btn").addEventListener("click", () => {
+  const countInput = document.getElementById("buy_count").value;
+  buyCount = countInput;
+});
+
+document.getElementById("create_number_btn").addEventListener("click", () => {
+  const resultSection = document.querySelector(".result_section");
+  winningNumbers = LottoNumber();
+  WinningNumbers();
+
+  const oldList = document.querySelector(".my_result_list");
+  if (oldList) oldList.remove();
+
+  resultSection.innerHTML += `
+    <div class="my_result_list">
+      <p>내가 구매한 번호 :</p>
+    </div>
+  `;
+
+  for (let i=0; i < buyCount; i++) {
+    const my_result_list = document.querySelector(".my_result_list");
+    const myNumbers = LottoNumber();
+
+    let matched = 0;
+    for (let i = 0; i < myNumbers.length; i++) {
+      for (let j = 0; j < winningNumbers.length; j++) {
+        if (myNumbers[i] === winningNumbers[j]) {
+          matched++;
+        }
+      }
+    }
+
+
+    if(matched === 6){
+      my_result_list.innerHTML += `
+      <div class="balls">
+        <div class="ball" id="yellow">${myNumbers[0]}</div>
+        <div class="ball" id="blue">${myNumbers[1]}</div>
+        <div class="ball" id="red">${myNumbers[2]}</div>
+        <div class="ball" id="gray">${myNumbers[3]}</div>
+        <div class="ball" id="green">${myNumbers[4]}</div>
+        <div class="ball" id="yellow">${myNumbers[5]}</div>
+      </div>
+      <div class="my_result">결과 : 6개 일치 - 당첨</div>
+    `;
+    }
+    else{
+      my_result_list.innerHTML += `
+      <div class="result">
+        <div class="balls">
+          <div class="ball" id="yellow">${myNumbers[0]}</div>
+          <div class="ball" id="blue">${myNumbers[1]}</div>
+          <div class="ball" id="red">${myNumbers[2]}</div>
+          <div class="ball" id="gray">${myNumbers[3]}</div>
+          <div class="ball" id="green">${myNumbers[4]}</div>
+          <div class="ball" id="yellow">${myNumbers[5]}</div>
+        </div>
+        <div class="my_result">결과 : ${matched}개 일치</div>
+      </div>
+    `;
+    }
+  }
+});
diff --git a/script.js b/script.js
@@ -0,0 +1,22 @@
+// /script.js
+async function search() {
+    const input = document.getElementById('input').value.trim();
+    const resultDiv = document.getElementById('result');
+    resultDiv.innerHTML = '';
+
+    try {
+        const RestAPI = await fetch(`https://restcountries.com/v3.1/name/${input}`);
+        const data = await RestAPI.json();
+        const country = data[0];
+        const capital = country.capital;
+        const flag = country.flags.png;
+        resultDiv.innerHTML = `
+            <h2>나라 : ${input}</h2>
+            <p>수도 : ${capital}</p>
+            <img src="${flag}">
+        `;
+    } catch (error) {
+      resultDiv.textContent = '...';
+    }
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,41 @@
+/* /style.css */
+body {
+    text-align: center;
+    font-weight: 500;
+}
+
+.container {
+padding: 10vw;
+border-radius: 5vw;
+font-size: 5vw;
+}
+
+#input {
+padding: 1vw;
+padding-left: 2vw;
+width: 70%;
+font-size: 3vw;
+font-weight: 500;
+border-radius: 5vw;
+}
+
+#search_section {
+display: flex;
+justify-content: center;
+align-items: center;
+margin-top: 5vw;
+}
+
+#search_btn {
+padding: 1vw 2vw; 
+margin-left: 2vw;
+font-size: 3vw;
+font-weight: 500;
+border-radius: 5vw;
+border: none;
+}
+
+#result img {
+width: 50vw;
+}
+