BCSDLab-Edu · sumin4747 · Mar 25, 2025 · Mar 31, 2025 · Apr 29, 2025 · Apr 30, 2025
diff --git a/api.css b/api.css
@@ -0,0 +1,41 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f4f4f4;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+    padding: 20px;
+    border-radius: 8px;
+    background-color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+input {
+    padding: 10px;
+    width: 250px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    padding: 10px 20px;
+    border: none;
+    background-color: blue;
+    color: white;
+    border-radius: 8px;
+
+}
+
+
+.result {
+    margin-top: 20px;
+    font-size: 18px;
+}
diff --git a/api.html b/api.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>국가 수도 검색</title>
+    <link rel="stylesheet" href="api.css">
+</head>
+<body>
+    <div class="container">
+        <h1>국가 수도 검색</h1>
+        <input type="text" id="countryName" placeholder="나라를 입력하세요">
+        <button class="button">검색</button>
+        <div class="result" id="result"></div>
+    </div>
+    <script src="api.js"></script>
+</body>
+</html>
diff --git a/api.js b/api.js
@@ -0,0 +1,50 @@
+const button = document.querySelector('.button');
+
+async function getCountryInfo() {
+
+
+    const usercountryName = document.querySelector('#countryName').value;
+    const result = document.getElementById('result');
+
+    if (usercountryName == "") {
+        alert("나라 이름을 입력해주세요.")
+        return;
+    }
+
+
+    const res = await fetch(`https://restcountries.com/v3.1/name/${usercountryName}`)
+    const countries = await res.json();
+
+    if(countries && countries[0]){
+        const country = countries[0];
+        const countryName = country.name.common;
+
+        let capital;
+        if(country.capital && country.capital.length >0){
+            capital = country.capital[0];
+
+        }
+        else {
+
+            capital = "수도 정보가 없습니다."
+        }
+
+        const flag = country.flags.svg;
+
+        result.innerHTML = `
+
+        <div>
+            <P><strong>${usercountryName}</strong> 수도: <strong>${capital}</strong></P>
+            <img src="${flag}" alt="Flag of ${usercountryName}" width="150"></img>
+        </div>
+        `
+    }
+
+    else{
+        result.textContent = "찾을 수 없습니다."
+    }
+}
+
+
+
+button.addEventListener('click', getCountryInfo);
diff --git a/lotto.css b/lotto.css
@@ -0,0 +1,185 @@
+body{
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+
+}
+
+.container{
+
+    width: 500px;
+    height: 520px;
+    border-radius: 10px;
+    background-color: white;
+
+}
+
+header{
+    flex-direction:column; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 500px;
+    height: 100px;
+    background-color: #4B89DC;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.title{
+
+    font-family: Noto Sans KR;
+    font-size: 24px;
+    font-weight: 700;
+    color: white;
+
+}
+
+
+.subtitle{
+
+    font-family: Noto Sans KR;
+    font-size: 16px;
+    font-weight: 400;
+    color: white;
+
+
+}
+
+.mainbox{
+
+    display: flex;
+    flex-direction:column; 
+    justify-content: center;
+    align-items: center;
+}
+.create-number{
+
+    width: 460px;
+    height: 150px;
+    margin-top: 20px;
+
+
+}
+
+.buylotto{
+    width: 460px;
+    height: 200px;
+    margin-top: 23px;
+
+}
+
+
+.numtitle{
+    font-family: Noto Sans KR;
+    font-weight: 700;
+    font-size: 18px;
+    height: 100%;
+}
+
+.numbox{
+    width: 100%;
+    height: 45px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 23px;
+
+
+}
+.numbox span{
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    color: white;
+
+    font-size: 20px;
+    font-weight: 700;
+    font-family: Noto Sans KR;
+    text-align: center;
+    line-height: 45px;
+
+}
+
+.num1{
+    background-color: #FBC400;
+}
+
+.num2{
+    background-color: #69C8F2;
+}
+.num3{
+    background-color: #FF7272;
+}
+.num4{
+    background-color: #AAAAAA;
+}
+.num5{
+    background-color: #B0D840;
+}
+.num6{
+    background-color: #FBC400;
+}
+
+
+button{
+
+    width: 460px;
+    height: 40px;
+    background-color: #A0B3E0;
+    border-radius: 5px;
+
+    font-family: Noto Sans KR;
+    font-weight: 700;
+    font-size: 16px;
+    color: white;
+
+    border-width: 0px;
+
+    margin-top: 15px;
+
+
+}
+
+
+.buytitle{
+
+    font-family: Noto Sans KR;
+    font-weight: 700;
+    font-size: 18px;
+    height: 100%;
+
+
+}
+
+form{
+    margin-top: 26px;
+}
+label{
+
+    font-family: Noto Sans KR;
+    font-weight: 400;
+    font-size: 16px;
+
+}
+
+input[type="number"]{
+
+    border: 1px solid #DDDDDD;
+    width: 380px;
+    height: 37px;
+    border-radius: 4px;
+
+}
+
+p{
+    font-family: Noto Sans KR;
+    font-weight: 400px;
+    font-size: 16px;
+
+}
+
+.buy-lotto button{
+
+    background-color: #4B89DC;
+}
+
diff --git a/lotto.html b/lotto.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>로또 번호 생성기</title>
+    <link rel="stylesheet" href="lotto.css">
+    <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="title">로또 번호 생성기</span>
+            <span class="subtitle">행운의 번호를 생성해보세요!</span>
+        </header>
+
+
+        <div class="mainbox">
+            <div class="create-number">
+                <span class="numtitle">번호 생성</span>
+                <div class="numbox">
+                    <span class="num1">?</span>
+                    <span class="num2">?</span>
+                    <span class="num3">?</span>
+                    <span class="num4">?</span>
+                    <span class="num5">?</span>
+                    <span class="num6">?</span>
+                </div>
+                <button>번호 생성하기</button>
+            </div>
+
+            <div class="buylotto">
+
+                <span class="buytitle">로또 구매하기</span>
+                <form>
+                    <label for="amount">구매 수량: </label>
+                    <input type="number" id="amount">
+                </form>
+
+                <p>총 금액: <span id="total">0</span>원 (1장당 1,000원)</p>
+
+                <button>구매하기</button>
+            </div>
+        </div>
+    </div>
+    <script src="lotto.js"></script>
+</body>
+</html>
diff --git a/lotto.js b/lotto.js
@@ -0,0 +1,12 @@
+function generateLottoNumbers(){
+
+    const set = new Set();
+    while (set.size < 6) {
+        set.add(Math.floor(Math.random() * 45)+1);
+    }
+    return Array.from(set).sort((a,b)=>a-b);
+
+
+}
+
+console.log(generateLottoNumbers())