BCSDLab-Edu · Yoonjiho17 · Mar 29, 2025 · Mar 31, 2025 · Mar 31, 2025 · Apr 8, 2025
diff --git a/Country/Country.html b/Country/Country.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="CountryStyleSheet.css">
+    <title>나라 검색기</title>
+</head>
+<body>
+    <div id="mainBox">
+        <h1>나라 검색기</h1>
+        <div id="searchBox">
+            <input type="text" id="countryInput" placeholder="나라 이름을 입력하세요">
+            <button id="searchButton">검색</button>
+        </div>
+        <div id="result"></div>
+    </div>
+    <script src="CountryJS.js"></script>
+</body>
+</html>
+
+
diff --git a/Country/CountryJS.js b/Country/CountryJS.js
@@ -0,0 +1,40 @@
+document.getElementById("searchButton").addEventListener("click", async function() {
+    const countryName = document.getElementById("countryInput").value
+    if (!countryName) {
+        alert("나라 이름을 입력하세요!");
+        return;
+    }
+
+    const response = await fetch(`https://restcountries.com/v3.1/name/${countryName}`);
+
+    if (response.status === 404) {
+        document.getElementById("result").innerText = "해당 나라를 찾을 수 없습니다.";
+        return;
+    }    
+
+    const data = await response.json();
+
+    const country = data.find(c => c.name.common.toLowerCase() === countryName.toLowerCase());
+
+    if (!country) {
+        document.getElementById("result").innerText = "나라 이름을 정확히 입력해주세요.";
+        return;
+    }
+
+    const flagUrl = country.flags.png;
+    let capital;
+    if(country.capital) {
+        capital = country.capital[0];
+    }
+    else {
+        capital = "정보 없음";
+    }
+
+    document.getElementById("result").innerHTML = `
+        <h2>${country.name.common}</h2>
+        <p><strong>수도:</strong> ${capital}</p>
+        <img src="${flagUrl}" alt="국기" width="200">
+    `;
+});
+
+
diff --git a/Country/CountryStyleSheet.css b/Country/CountryStyleSheet.css
@@ -0,0 +1,23 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: gainsboro;
+}
+
+#mainBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 300px;
+    background-color: white;
+    border-radius: 5px;
+}
+
+#result {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
 # FrontEnd_2025-1
-2025년 상반기 프론트엔드 비기너 학습 레포
+2025년 상반기 프론트엔드 비기너 학습 레포
diff --git a/script.js b/script.js
@@ -0,0 +1,109 @@
+const $makeNumButton = document.querySelector("#makeNumButton");
+const $resultNums = [];
+for(let i = 1; i<=6; i++){
+    const el = document.querySelector(`#resultNum${i}`);
+    $resultNums.push(el);
+}
+const $buyLottoButton = document.querySelector("#buyLottoButton");
+const $myNums = [];
+for(let i = 1; i<=6; i++){
+    const el = document.querySelector(`#myNum${i}`);
+    $myNums.push(el);
+}
+const $lottoResultText = document.querySelector(".lottoResultText");
+const $input = document.querySelector("input");
+const $price = document.querySelector("#price");
+const $resultBox = document.querySelector(".resultBox");
+const $myNumBox = document.querySelector(".myNumBox");
+const $container = document.querySelector(".container");
+
+let resultLottoNumber = []; //로또 결과 배열 선언
+let myLottoNumber = []; //내 결과 배열 선언
+let newNumbers = []; //복제 배열 선언
+
+function randomNum() {
+    let number = new Set(); //중복 방지를 위한 set
+    while (number.size < 6) {
+        number.add(Math.floor(Math.random() * 45) + 1); //1~45 사이의 난수 생성
+    }
+    const randomNumarr = [...number].sort((a, b) => a - b) //Set을 배열로 바꾼 후 오름차순 정렬
+    return randomNumarr;
+}
+
+function crossCheck(arr1, arr2) { //배열끼리 몇 개 일치하는지 비교하는 함수
+    let match = 0;
+    for(let i=0; i<6; i++) {
+        if (arr2.includes(arr1[i])) {
+            match++;
+        }
+    }
+    return match;
+}
+
+$makeNumButton.addEventListener('click', function() { //번호 생성 클릭 이벤트
+
+    resultLottoNumber = randomNum();
+    for(let i=0; i<6; i++) { //로또 결과 배열에 랜덤 수 삽입
+        $resultNums[i].innerText = resultLottoNumber[i]; 
+    }
+
+});
+
+let buyButtonCount = 0;
+$buyLottoButton.addEventListener('click', function() { //구매하기 클릭 이벤트
+
+    const matchCount = crossCheck(resultLottoNumber, myLottoNumber); //로또 결과 배열, 내 결과 배열 비교 
+
+    if(resultLottoNumber.length === 0) { //로또 결과 배열이 없을 시 경고 및 새로고침
+        alert("먼저 로또 번호를 생성해주세요!");
+        location.reload();
+    }
+    else { //로또 결과 텍스트 삽입
+        $lottoResultText.innerText = `결과: ${matchCount}개 일치`
+    }
+
+    const inputvalue = parseInt($input.value); //입력값 
+    $price.innerText = `${inputvalue*1000}`; //금액 텍스트 삽입 
+
+    if(isNaN(inputvalue) || inputvalue <= 0) { //입력값 1이상 아니면 경고 및 새로고침 
+        alert("구매 수량을 제대로 입력하세요!");
+        $input.focus();
+    }
+    else {
+        buyButtonCount++; // 구매하기 버튼 두 번 누르면 버튼 비활성화
+        if(buyButtonCount > 1) {
+            $buyLottoButton.disabled(true);
+        }
+
+        myLottoNumber = randomNum();
+        for(let i=0; i<6; i++) { //내 결과 배열에 랜덤 수 삽입 
+            $myNums[i].innerText = myLottoNumber[i];
+        }
+
+        const cloneCount = inputvalue - 1; // 몇 번 복제할지 결정
+        let height = 0; //높이
+
+        for (let i = 0; i < cloneCount; i++) {
+            //내 결과 복제
+            const clonedMyNumBox = $myNumBox.cloneNode(true);
+            const clonedCircles = clonedMyNumBox.querySelectorAll(".circle");
+
+            newNumbers = randomNum();
+            clonedCircles.forEach((circle, index) => { //복제 구에 숫자 채워 넣기
+                circle.innerText = newNumbers[index];
+            });
+
+            const clonedResultText = clonedMyNumBox.querySelector(".lottoResultText"); //로또 결과 배열, 내 결과 복제 비교
+            const matchCount = crossCheck(resultLottoNumber, newNumbers);
+            clonedResultText.innerText = `결과: ${matchCount}개 일치`
+
+            $resultBox.appendChild(clonedMyNumBox); // resultBox에 추가
+
+            if (inputvalue > 2) height += 125; //높이 누적
+        }
+
+        if(inputvalue > 2) height -= 125; // 높이 조정 (inputvalue가 2면 height는 0이므로 원래 높이 그대로 유지)
+        $container.style.height = `${1000 + height}px`;
+        $resultBox.style.height = `${460 + height}px`;
+    }
+});
diff --git a/startlotto.html b/startlotto.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>로또 번호 생성기</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <span class="headingText">로또 번호 생성기</span>
+            <span class="headingTextSub">행운의 번호를 생성해보세요!</span>
+        </header>
+        <div class="bodyBox">
+            <div class="makeNumBox">
+                <span class="makeNumText">번호 생성</span>
+                <div class="circleBox">
+                    <span class="circle" id="circle1">?</span>
+                    <span class="circle" id="circle2">?</span>
+                    <span class="circle" id="circle3">?</span>
+                    <span class="circle" id="circle4">?</span>
+                    <span class="circle" id="circle5">?</span>
+                    <span class="circle" id="circle6">?</span>
+                </div>
+                <button id="makeNumButton">번호 생성하기</button>
+            </div>
+            <div class="buyLottoBox">
+                <span class="buyLottoText">로또 구매하기</span>
+                <div class="inputBox">
+                    <span class="buyAmountText">구매 수량:</span>
+                    <input>
+                </div>
+                <span class="totalText">총 금액: <span id="price">0</span>원 (1장당 1,000원)</span>
+                <button id="buyLottoButton">구매하기</button>
+            </div>
+            <div class="resultBox">
+                <div class="resultCheckBox">
+                    <span class="resultCheckBoxText">당첨 결과 확인</span>
+                    <span class="thisWeekResultText">이번 주 당첨 번호:</span>
+                    <div class="circleBox">
+                        <span class="circle" id="resultNum1">?</span>
+                        <span class="circle" id="resultNum2">?</span>
+                        <span class="circle" id="resultNum3">?</span>
+                        <span class="circle" id="resultNum4">?</span>
+                        <span class="circle" id="resultNum5">?</span>
+                        <span class="circle" id="resultNum6">?</span>
+                    </div>
+                    <span class="myNumText">내가 구매한 번호:</span>
+                </div>
+                <div class="myNumBox">
+                    <div class="circleBox">
+                        <span class="circle" id="myNum1">?</span>
+                        <span class="circle" id="myNum2">?</span>
+                        <span class="circle" id="myNum3">?</span>
+                        <span class="circle" id="myNum4">?</span>
+                        <span class="circle" id="myNum5">?</span>
+                        <span class="circle" id="myNum6">?</span>
+                    </div>
+                    <div class="lottoResultBox">
+                        <span class="lottoResultText">결과:</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js" defer></script>
+</body>
+</html>