BCSDLab-Edu · Hyeona-An · Apr 8, 2025 · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Country Search</title>
+  <link rel="stylesheet" href="style.css"> <!-- 외부 CSS 연결 -->
+</head>
+<body>
+
+  <h1 class="title">세상의 모든 나라들✈️🌍</h1>
+  <p class="subtitle">국기부터 수도까지, 궁금한 나라를 찾아보세요!₍ᐢ..ᐢ₎♡̷̷̷ ༘☆</p>
+
+  <input type="text" id="countryInput" placeholder="Enter country name">
+  <button onclick="searchCountry()">Search</button>
+  <div id="result"></div>
+
+  <script>
+    async function searchCountry() {
+      const countryName = document.getElementById('countryInput').value.trim();
+      const resultDiv = document.getElementById('result');
+      resultDiv.innerHTML = '';
+
+      if (!countryName) {
+        resultDiv.textContent = 'Please enter a country name.';
+        return;
+      }
+
+      try {
+        const response = await fetch(`https://restcountries.com/v3.1/name/${encodeURIComponent(countryName)}`);
+        if (!response.ok) {
+          throw new Error('Country not found');
+        }
+
+        const data = await response.json();
+        const country = data[0];
+
+        const flag = country.flags.svg;
+        const capital = country.capital ? country.capital[0] : 'No capital available';
+
+        resultDiv.innerHTML = `
+          <h2>${country.name.common}</h2>
+          <p><strong>Capital:</strong> ${capital}</p>
+          <img src="${flag}" alt="Flag of ${country.name.common}">
+        `;
+      } catch (error) {
+        resultDiv.textContent = 'Error: ' + error.message;
+      }
+    }
+  </script>
+</body>
+</html>
+
diff --git a/script.js b/script.js
@@ -0,0 +1,99 @@
+function generateLottoNumbers() {
+    const numbers = new Set();
+    while (numbers.size < 6) {
+      numbers.add(Math.floor(Math.random() * 45) + 1);
+    }
+    return Array.from(numbers).sort((a, b) => a - b);
+  }
+
+  const pastelColors = ['#FFB3BA', '#FFDFBA', '#FFC107', '#BAFFC9', '#BAE1FF', '#E7BAFF'];
+
+  let purchasedNumbers = [];
+  let totalPrice = 0;
+
+  function createNumberBall(number) {
+    const span = document.createElement('span');
+    span.className = 'number-ball';
+    span.textContent = number;
+    span.style.backgroundColor = pastelColors[Math.floor(Math.random() * pastelColors.length)];
+    return span;
+  }
+
+  document.getElementById('purchase-count').addEventListener('input', (event) => {
+    const count = parseInt(event.target.value) || 0;
+    document.getElementById('total-price').textContent = (count * 1000).toLocaleString();
+  });
+
+  document.getElementById('purchase-btn').addEventListener('click', () => {
+    const count = parseInt(document.getElementById('purchase-count').value);
+    if (!count || count <= 0) {
+      alert('구매 수량을 입력하세요!');
+      return;
+    }
+
+    purchasedNumbers = [];
+    for (let i = 0; i < count; i++) {
+      purchasedNumbers.push(generateLottoNumbers());
+    }
+
+    totalPrice = count * 1000;
+    document.getElementById('total-price').textContent = totalPrice.toLocaleString();
+
+    const purchasedContainer = document.getElementById('purchased-numbers');
+    purchasedContainer.innerHTML = '';
+    purchasedNumbers.forEach((set) => {
+      const line = document.createElement('div');
+      set.forEach(num => {
+        line.appendChild(createNumberBall(num));
+      });
+      purchasedContainer.appendChild(line);
+    });
+
+    alert(`총 ${count}장 결제 완료입니다!`);
+
+    const generateBtn = document.getElementById('generate-btn');
+    generateBtn.disabled = false;
+    generateBtn.classList.remove('disabled');
+
+    document.querySelector('.purchased-area').style.display = 'block';
+
+    document.querySelector('.result-area').style.display = 'block';
+  });
+
+  document.getElementById('generate-btn').addEventListener('click', () => {
+    if (purchasedNumbers.length === 0) {
+      alert('로또를 구매해주세요!');
+      return;
+    }
+
+    document.querySelector('.result-area').style.display = 'block';
+
+    const winningNumbers = generateLottoNumbers();
+    const winningContainer = document.getElementById('winning-numbers');
+    winningContainer.innerHTML = '';
+    winningNumbers.forEach(num => {
+      winningContainer.appendChild(createNumberBall(num));
+    });
+
+    let resultText = '';
+    let isJackpot = false;
+
+    purchasedNumbers.forEach((set, index) => {
+      const matched = set.filter(num => winningNumbers.includes(num));
+      if (matched.length === 6) {
+        isJackpot = true;
+        resultText += `${index + 1}번: ${matched.join(', ')} - 🎉 당첨! 🎉\n`;
+      } else {
+        resultText += `${index + 1}번: ${matched.join(', ')} (${matched.length}개 일치)\n`;
+      }
+    });
+
+    if (isJackpot) {
+      resultText += '\n 축하합니다! 당첨입니다!₍ᐢ⑅•ᴗ•⑅ᐢ₎♡';
+    } else {
+      resultText += '\n아쉽지만 당첨 실패입니다. 다음 기회에 ʕ⑅●᷄ᴈ●᷅⑅ʔ ';
+    }
+
+    document.getElementById('match-result').textContent = resultText.trim();
+  });
+
diff --git a/style.css b/style.css
@@ -0,0 +1,73 @@
+body {
+    font-family: 'Gowun Dodum', Arial, sans-serif;
+    background-color: #E6F7FF;
+    padding: 40px 20px;
+    text-align: center;
+  }
+
+  .title {
+    font-weight: 900;
+    font-size: 3.0rem;
+    margin-bottom: 0.3rem;
+    color: #003366;
+  }
+
+  .subtitle {
+    font-weight: 300;
+    font-size: 1.2rem;
+    color: #666;
+    margin-bottom: 30px;
+  }
+
+  input[type="text"] {
+    padding: 11px 15px;
+    font-size: 1.2rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    width: 250px;
+  }
+
+  button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    background-color: #5d93b8;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    margin-left: 10px;
+    transition: background-color 0.3s ease;
+  }
+
+  button:hover {
+    background-color: #005FA3;
+  }
+
+
+  #result {
+    margin-top: 30px;
+    background: white;
+    padding: 25px;
+    border-radius: 16px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  #result img {
+    max-width: 100%;
+    margin-top: 15px;
+    border-radius: 12px;
+  }
+
+  #result h2 {
+    color: #222;
+    margin-bottom: 10px;
+  }
+
+  #result p {
+    font-size: 1rem;
+    color: #333;
+  }
+
diff --git a/week4/index.html b/week4/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Country Search</title>
+  <link rel="stylesheet" href="style.css"> <!-- 외부 CSS 연결 -->
+</head>
+<body>
+
+  <h1 class="title">세상의 모든 나라들✈️🌍</h1>
+  <p class="subtitle">국기부터 수도까지, 궁금한 나라를 찾아보세요!₍ᐢ..ᐢ₎♡̷̷̷ ༘☆</p>
+
+  <input type="text" id="countryInput" placeholder="Enter country name">
+  <button onclick="searchCountry()">Search</button>
+  <div id="result"></div>
+
+  <script>
+    async function searchCountry() {
+      const countryName = document.getElementById('countryInput').value.trim();
+      const resultDiv = document.getElementById('result');
+      resultDiv.innerHTML = '';
+
+      if (!countryName) {
+        resultDiv.textContent = 'Please enter a country name.';
+        return;
+      }
+
+      try {
+        const response = await fetch(`https://restcountries.com/v3.1/name/${encodeURIComponent(countryName)}`);
+        if (!response.ok) {
+          throw new Error('Country not found');
+        }
+
+        const data = await response.json();
+        const country = data[0];
+
+        const flag = country.flags.svg;
+        const capital = country.capital ? country.capital[0] : 'No capital available';
+
+        resultDiv.innerHTML = `
+          <h2>${country.name.common}</h2>
+          <p><strong>Capital:</strong> ${capital}</p>
+          <img src="${flag}" alt="Flag of ${country.name.common}">
+        `;
+      } catch (error) {
+        resultDiv.textContent = 'Error: ' + error.message;
+      }
+    }
+  </script>
+</body>
+</html>
+
diff --git a/week4/style.css b/week4/style.css
@@ -0,0 +1,73 @@
+body {
+    font-family: 'Gowun Dodum', Arial, sans-serif;
+    background-color: #E6F7FF;
+    padding: 40px 20px;
+    text-align: center;
+  }
+
+  .title {
+    font-weight: 900;
+    font-size: 3.0rem;
+    margin-bottom: 0.3rem;
+    color: #003366;
+  }
+
+  .subtitle {
+    font-weight: 300;
+    font-size: 1.2rem;
+    color: #666;
+    margin-bottom: 30px;
+  }
+
+  input[type="text"] {
+    padding: 11px 15px;
+    font-size: 1.2rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    width: 250px;
+  }
+
+  button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    background-color: #5d93b8;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    margin-left: 10px;
+    transition: background-color 0.3s ease;
+  }
+
+  button:hover {
+    background-color: #005FA3;
+  }
+
+
+  #result {
+    margin-top: 30px;
+    background: white;
+    padding: 25px;
+    border-radius: 16px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  #result img {
+    max-width: 100%;
+    margin-top: 15px;
+    border-radius: 12px;
+  }
+
+  #result h2 {
+    color: #222;
+    margin-bottom: 10px;
+  }
+
+  #result p {
+    font-size: 1rem;
+    color: #333;
+  }
+