BCSDLab-Edu · Chu03 · Mar 26, 2025 · Apr 1, 2025 · Apr 1, 2025 · Apr 1, 2025
diff --git a/Lotto/index.html b/Lotto/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <title>로또 번호 생성기</title>
+</head>
+<body>
+  <div class="container">
+    <div class="start-box">
+      <h1>로또 번호 생성기</h1>
+      <p>행운의 번호를 생성해보세요!</p>
+    </div>
+
+    <h3 class="section-title">번호 생성</h3>
+    <div class="lotto-number">
+      <span class="ball-yellow">?</span>
+      <span class="ball-blue">?</span>
+      <span class="ball-red">?</span>
+      <span class="ball-gray">?</span>
+      <span class="ball-green">?</span>
+      <span class="ball-yellow">?</span>
+    </div>
+    <button id="generate-button">번호 생성하기</button>
+
+    <hr class="divider">
+
+    <h3 class="section-title">로또 구매하기</h3>
+    <div class="purchase-section">
+      <label>구매 수량:</label>
+      <input type="number" id="count-input" min="1" max="10" />
+      <p id="total-price">총 금액: 0원 (1장당 1,000원)</p>
+      <button id="buy-button">구매하기</button>
+    </div>
+
+    <div class="result-box" style="display: none;">
+      <div id="winning-numbers"></div>
+      <div id="result"></div>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Lotto/script.js b/Lotto/script.js
@@ -0,0 +1,90 @@
+const input = document.getElementById('count-input');
+const buyBtn = document.getElementById('buy-button');
+const totalPrice = document.getElementById('total-price');
+const resultArea = document.getElementById('result');
+const winningArea = document.getElementById('winning-numbers');
+const resultBox = document.querySelector('.result-box');
+
+input.addEventListener('input', () => {
+  const count = parseInt(input.value) || 0;
+  totalPrice.textContent = `총 금액: ${count * 1000}원 (1장당 1,000원)`;
+});
+
+function getColorClass(number) {
+  if (number <= 10) return 'ball-yellow';
+  else if (number <= 20) return 'ball-blue';
+  else if (number <= 30) return 'ball-red';
+  else if (number <= 40) return 'ball-gray';
+  else return 'ball-green';
+}
+
+function getRandomLottoNumbers() {
+  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 createLotto(numbers) {
+  const row = document.createElement('div');
+  row.className = 'lotto-number';
+  numbers.forEach(number => {
+    const span = document.createElement('span');
+    span.classList.add('ball', getColorClass(number));
+    span.textContent = number;
+    row.appendChild(span);
+  });
+  return row;
+}
+
+function displayWinningNumbers() {
+  const winningNumbers = getRandomLottoNumbers();
+  winningArea.innerHTML = `
+    <h3 class="section-title">당첨 결과 확인</h3>
+    <p class="section-title">이번 주 당첨 번호:</p>
+  `;
+  const row = createLotto(winningNumbers);
+  winningArea.appendChild(row);
+
+  const myTitle = document.createElement('p');
+  myTitle.textContent = "내가 구매한 번호:";
+  winningArea.appendChild(myTitle);
+  myTitle.classList.add('align-left')
+
+  winningArea.style.display = 'block';
+  return winningNumbers;
+}
+
+function checkMatches(picked, winning) {
+  return picked.filter(num => winning.includes(num)).length;
+}
+
+buyBtn.addEventListener('click', () => {
+  const count = parseInt(input.value);
+  if (!count || count <= 0) {
+    alert("로또를 구매해주세요");
+    return;
+  }
+
+  resultBox.style.display = 'block';
+  resultArea.innerHTML = '';
+  const winning = displayWinningNumbers();
+
+  for (let i = 0; i < count; i++) {
+    const numbers = getRandomLottoNumbers();
+    const matchCount = checkMatches(numbers, winning);
+    const row = createLotto(numbers);
+
+    const resultText = document.createElement('p');
+    resultText.className = 'result-badge';
+    resultText.textContent = `결과: ${matchCount}개 일치` + (matchCount === 6 ? ' - 당첨!' : '');
+
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('lotto-set');
+    wrapper.appendChild(row);
+    wrapper.appendChild(resultText);
+    resultArea.appendChild(wrapper);
+  }
+});
diff --git a/Lotto/style.css b/Lotto/style.css
@@ -0,0 +1,194 @@
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  background-color: #f5f5f5;
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  background-color: #ffffff;
+  padding: 30px;
+  width: 500px;
+  border-radius: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  box-sizing: border-box;
+  margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.start-box {
+  background-color: #4f7be8;
+  color: white;
+  text-align: center;
+  border-radius: 10px 10px 0 0;
+  padding: 16px 0;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+}
+
+.start-box h1 {
+  font-size: 24px;
+  margin-bottom: 6px;
+  font-weight: bold;
+}
+
+.start-box p {
+  font-size: 16px;
+  margin-top: 0px;
+  font-weight: 400;
+}
+
+.section-title {
+  font-size: 16px;
+  text-align: left;
+  margin: 10px 0 10px;
+}
+
+.divider {
+  border: none;
+  border-top: 1px solid rgb(213, 213, 213);
+  margin: 10px;
+}
+
+.purchase-section {
+  text-align: left;
+}
+
+
+.ball-yellow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  font-weight: bold;
+  margin: 5px;
+  font-size: 18px;
+  color: white;
+  background-color: #fbc400;
+}
+
+
+.ball-blue {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  font-weight: bold;
+  margin: 5px;
+  font-size: 18px;
+  color: white;
+  background-color: #69c8f2;
+}
+
+.ball-red {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  font-weight: bold;
+  margin: 5px;
+  font-size: 18px;
+  color: white;
+  background-color: #ff7272;
+}
+
+.ball-gray {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  font-weight: bold;
+  margin: 5px;
+  font-size: 18px;
+  color: white;
+  background-color: #aaaaaa;
+}
+
+.ball-green {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  font-weight: bold;
+  margin: 5px;
+  font-size: 18px;
+  color: white;
+  background-color: #b0d840;
+}
+
+.lotto-number {
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+  flex-wrap: wrap;
+}
+
+
+label, input {
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+button {
+  background-color: #4f7be8;
+  border: none;
+  padding: 8px 14px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+  color: white;
+  width: 100%;
+}
+
+button:hover {
+  background-color: #A0b3e0;
+}
+
+p {
+  margin: 8px 0;
+  font-size: 14px;
+}
+
+.result-box {
+  background-color: #f6f6f6;
+  padding: 20px;
+  border-radius: 8px;
+  margin-top: 20px;
+  display: none;
+}
+
+.lotto-set {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+}
+
+.result-badge {
+  background-color: #e3f2fd;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+  font-weight: bold;
+}
+
+.align-left {
+  text-align: left;
+  margin: 10px 0;
+  font-size: 16px;
+}
diff --git a/assignment04/index.html b/assignment04/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <title>Country</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+        <div class="MainTitle">
+            <h1>COUNTRY</h1>
+        </div>
+
+        <div class="input_Container">
+            <input id="Country_Input" type="text" placeholder="국가를 영어로 작성해주세요.">
+            <button id="search_Btn">검색하기</button>
+        </div>
+
+        <div id="result"></div>
+        <script src="script.js"></script>
+    </body>
+
+</html>
diff --git a/assignment04/script.js b/assignment04/script.js
@@ -0,0 +1,30 @@
+let CountryName=document.getElementById("Country_Input")
+let searchBtn=document.getElementById("search_Btn")
+let resultBox = document.getElementById("result");
+
+searchBtn.addEventListener("click", function(){
+    if (CountryName.value.trim() === "") {
+        alert("국가 이름을 영어로 작성해주세요요!");
+        return;
+    }
+    fetch(`https://restcountries.com/v3.1/name/${CountryName.value}`)
+    .then(response => response.json())
+
+    .then(data => {
+        const countryInformation=data[0];
+        const flag=countryInformation.flags.png;
+        const capital=countryInformation.capital[0]
+
+        resultBox.innerHTML = `
+              <h2>${CountryName.value}</h2>
+              <img src="${flag}" alt="${CountryName.value} 국기" width="200">
+              <p>수도: ${capital}</p>
+          `;
+    })
+
+    .catch(error => {
+          console.error('에러 발생:', error);
+          resultBox.innerHTML = `<p>나라를 찾을 수 없습니다.</p>`;
+    });
+
+})