[이은호 FrontEnd] 3주차 과제 제출합니다.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

LottoRandomNumber.js

@@ -0,0 +1,108 @@
+//번호 생성부분
+const getnumberbutton = document.querySelectorAll(".button")[0];
+const getnumberSection = document.querySelectorAll(".section")[0];
+const balls = getnumberSection.querySelectorAll(".ball");
+
+//구매 수량 부분
+const purchaseInput = document.querySelector('.input');
+const priceText = document.querySelector('.price');
+
+//구매하기 버튼 부분
+const purchaseButton = document.querySelectorAll('.button')[1];
+const resultSection = document.querySelector('.result-section');
+
+//결과화면
+const resultBlocks = document.querySelectorAll('.result-block')[1];
+const resultNum = resultBlocks.querySelectorAll('.ball');
+const resultText = document.querySelector('.result-text');
+
+//이번주 당첨 번호 부분
+const winningballs = resultSection.querySelectorAll('.ball');
+let numbers = [];
+let count = 0;
+
+//번호 생성하기 버튼
+getnumberbutton.addEventListener('click', () => {
+    numbers = getRandomNumbers();
+    if (isNaN(count) || count <= 0) {
+        alert('구매 수량을 올바르게 입력하세요!');
+        return;
+    } else {
+        resultSection.style.display = 'block';
+    }
+
+    balls.forEach((ball, index) => {
+        ball.textContent = numbers[index];
+    });
+    winningballs.forEach((ball, index) => {
+        ball.textContent = numbers[index];
+    });
+    // `<div class="result-label">내가 구매한 번호:</div>` 이거 빼고 resultBlocks 안에 요소들 다 지우기
+    resultBlocks.innerHTML = `<div class="result-label">내가 구매한 번호:</div>`;
+
+    // element생성
+    for (let i = 0; i < count; i++) {
+        const myNumbers = getRandomNumbers();
+
+        const lottoDiv = document.createElement('div');
+        lottoDiv.className = 'lotto-balls';
+
+        myNumbers.forEach((_, index) => {
+            const ballDiv = document.createElement('div');
+            ballDiv.className = `ball ball-${(index % 5) + 1}`;
+            ballDiv.textContent = myNumbers[index];
+            lottoDiv.appendChild(ballDiv);
+        });
+
+        const match = myNumbers.filter(num => numbers.includes(num));
+
+        const resultDiv = document.createElement('div');
+        resultDiv.className = 'result-text';
+        if (match.length === 6) {
+            resultDiv.innerHTML = '결과: 6개 일치 - 당첨!!';
+        } else {
+            resultDiv.innerHTML = `결과: ${match.length}개 일치`;
+        }
+
+        resultBlocks.appendChild(lottoDiv);
+        resultBlocks.appendChild(resultDiv);
+    }
+});
+
+
+//구매하기 버튼
+purchaseButton.addEventListener('click', () => {
+
+    count = parseInt(purchaseInput.value); // 구매 수량 읽기
+    if (isNaN(count) || count <= 0) {
+        alert('구매 수량을 올바르게 입력하세요!');
+        return;
+    }
+
+});
+
+//구매수량 입력
+purchaseInput.addEventListener('input', () => {
+    let count = parseInt(purchaseInput.value);
+    if (isNaN(count) || count < 0) {
+        count = 0;
+    }
+    const totalPrice = count * 1000;
+    priceText.textContent = `총 금액: ${totalPrice.toLocaleString()}원 (1장당 1,000원)`;
+});
+
+
+//6개 랜덤 숫자 만드는 함수
+function getRandomNumbers() {
+    const numbers = [];
+    while (numbers.length < 6) {
+        const randomNum = Math.floor(Math.random() * 45) + 1;
+        if (!numbers.includes(randomNum)) {
+            numbers.push(randomNum);
+        }
+    }
+    numbers.sort((a, b) => a - b);
+    return numbers;
+}
+
+//console.log(getRandomNumbers());

LottoUI.css

@@ -0,0 +1,156 @@
+ body {
+   margin: 0;
+   padding: 0;
+ }
+
+ .backframe {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   width: 100vw;
+   min-height: 100vh;
+   background-color: #f0f0f0;
+ }
+
+ .frame {
+   width: 90%;
+   max-width: 500px;
+   background: #fff;
+   border-radius: 8px;
+   overflow: hidden;
+   position: relative;
+ }
+
+ .top-background {
+   background-color: #4b89dc;
+   text-align: center;
+   padding: 20px;
+   color: #fff;
+ }
+
+ .title {
+   margin: 0;
+   font-size: 24px;
+   font-weight: 700;
+ }
+
+ .subtitle {
+   margin: 5px 0 0;
+   font-size: 16px;
+ }
+
+ .section {
+   padding: 20px;
+   border-top: 1px solid #eee;
+ }
+
+ .section-title {
+   margin: 0 0 10px;
+   font-size: 18px;
+   font-weight: 700;
+ }
+
+ .lotto-balls {
+   display: flex;
+   justify-content: center;
+   gap: 30px;
+   margin: 10px 0 20px;
+   flex-wrap: wrap;
+ }
+
+ .ball {
+   width: 45px;
+   height: 45px;
+   background-color: #69c8f2;
+   border-radius: 50%;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   color: white;
+   font-weight: 700;
+   font-size: 18px;
+ }
+
+ .button {
+   width: 100%;
+   padding: 10px;
+   background-color: #4b89dc;
+   color: #fff;
+   border: none;
+   border-radius: 5px;
+   font-size: 16px;
+   font-weight: bold;
+
+ }
+
+ .label {
+   font-size: 16px;
+   display: block;
+   margin-bottom: 5px;
+ }
+
+ .input {
+   width: 75%;
+   height: 35px;
+   padding: 0 10px;
+   border: 1px solid #ddd;
+   border-radius: 4px;
+ }
+
+ .price {
+   font-size: 14px;
+   color: #333;
+   margin-bottom: 10px;
+ }
+
+ .result-section {
+   display: none;
+   margin: 20px;
+   background-color: #f5f5f5;
+   border-radius: 8px;
+ }
+
+ .purchase-row {
+   display: flex;
+   align-items: center;
+   gap: 10px;
+   margin-bottom: 10px;
+ }
+
+ .result-block {
+   padding: 10px 0;
+ }
+
+ .result-label {
+   font-weight: 700;
+   margin-bottom: 5px;
+ }
+
+ .result-text {
+   height: 41px;
+   border-radius: 2px;
+   background-color: #E8F4FD;
+   line-height: 41px;
+   text-align: center;
+   font-weight: bold;
+ }
+
+ .ball-1 {
+   background-color: #fbc400;
+ }
+
+ .ball-2 {
+   background-color: #69c8f2;
+ }
+
+ .ball-3 {
+   background-color: #ff7272;
+ }
+
+ .ball-4 {
+   background-color: #aaaaaa;
+ }
+
+ .ball-5 {
+   background-color: #b0d840
+ }

LottoUI.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <title>로또 번호 생성기</title>
+  <link rel="stylesheet" href="LottoUI.css">
+</head>
+
+<body>
+  <div class="backframe">
+    <div class="frame">
+      <div class="top-background">
+        <h1 class="title">로또 번호 생성기</h1>
+        <p class="subtitle">행운의 번호를 생성해보세요!</p>
+      </div>
+
+      <div class="section">
+        <h2 class="section-title">번호 생성</h2>
+        <div class="lotto-balls">
+          <div class="ball ball-1">?</div>
+          <div class="ball ball-2">?</div>
+          <div class="ball ball-3">?</div>
+          <div class="ball ball-4">?</div>
+          <div class="ball ball-5">?</div>
+          <div class="ball ball-1">?</div>
+        </div>
+        <button class="button">번호 생성하기</button>
+      </div>
+      <div class="section">
+        <h2 class="section-title">로또 구매하기</h2>
+        <div class="purchase-row">
+          <label class="label">구매 수량:</label>
+          <input type="text" class="input">
+        </div>
+
+        <p class="price">총 금액: 0원 (1장당 1,000원)</p>
+        <button class="button">구매하기</button>
+      </div>
+      <div class="section result-section">
+        <h2 class="section-title">당첨 결과 확인</h2>
+
+        <div class="result-block">
+          <div class="result-label">이번 주 당첨 번호:</div>
+          <div class="lotto-balls">
+            <div class="ball ball-1"></div>
+            <div class="ball ball-2"></div>
+            <div class="ball ball-3"></div>
+            <div class="ball ball-4"></div>
+            <div class="ball ball-5"></div>
+            <div class="ball ball-1"></div>
+          </div>
+        </div>
+
+        <div class="result-block">
+          <div class="result-label">내가 구매한 번호:</div>
+          <div class="lotto-balls">
+            <div class="ball ball-1"></div>
+            <div class="ball ball-2"></div>
+            <div class="ball ball-3"></div>
+            <div class="ball ball-4"></div>
+            <div class="ball ball-5"></div>
+            <div class="ball ball-1"></div>
+          </div>
+          <div class="result-text"></div>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+  <script src="LottoRandomNumber.js"></script>
+</body>
+
+</html>