next-step · YIMSEBIN · May 5, 2024 · May 6, 2024 · May 6, 2024
diff --git a/README.md b/README.md
@@ -1 +1,17 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+2024 카카오테크캠퍼스 1회차 미니과제 - 숫자야구
+
+### 수행 일자
+2024.05.05(일)
+
+### 기능 목록
+1. 숫자야구 게임 화면
+- 숫자 3개 입력 form
+- 게임 결과 화면
+- 게임 재시작 버튼
+2. 게임 
+- 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱 출력
+- 3개의 숫자를 모두 맞추면 게임 종료
+
+### 참고
+git commit convention : https://gist.github.com/stephenparish/9941e89d80e2bc58a153#examples
diff --git a/index.html b/index.html
@@ -3,10 +3,27 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>KakaoTechCampus HW1 - Baseball Game</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div class="explain">
+        <h1>⚾숫자 야구 게임</h1>
+        <span>
+          <b>1~9까지의 수</b>를 중복없이 <b>3개</b> 입력해주세요.
+          <br>올바른 예&#41; 139
+          <br>틀린 예&#41; 122
+        </span>
+        <div class="input">
+          <input type="text" class="input__text">
+          <button class="input__button">확인</button>
+        </div>
+        <div class="noti"></div>
+      </div>
+      <h2>📄결과</h2>
+      <div class="result">
+      </div>
+    </div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,82 @@
+// 새 게임 시작
+// 컴퓨터가 서로 다른 임의의 수 3개를 선택한다.
+function startGame() {
+    let nums = [];
+    while (nums.length < 3) {
+        let newDigit = Math.floor(Math.random() * 9) + 1;
+        if (!nums.includes(newDigit)) {
+            nums.push(newDigit);
+        }
+    }
+    return nums
+}
+
+function checkNumber(inputDigits) {
+    let strikes = 0, balls = 0;
+
+    inputDigits.forEach((digit, i) => {
+        if (digit === answer[i]) {
+            strikes++;
+        } else if (answer.includes(digit)) {
+            balls++;
+        }
+    });
+
+    let resultMessage = document.createElement('div');
+    if (strikes === 0 && balls === 0) {
+        resultMessage.textContent = "낫싱";
+    } else if (strikes === 3) {
+        const h3El = document.createElement('h3');
+        const spanEl = document.createElement('span');
+        const brEl = document.createElement('br');
+        const buttonEl = document.createElement('button');
+        h3El.textContent = "🎉정답을 맞추셨습니다🎉";
+        spanEl.textContent = "게임을 새로 시작하시겠습니까?";
+        buttonEl.textContent = "게임 재시작";
+        buttonEl.addEventListener("click", restartGame);
+        resultMessage.appendChild(h3El);
+        resultMessage.appendChild(spanEl);
+        resultMessage.appendChild(brEl);
+        resultMessage.appendChild(buttonEl);
+    } else {
+        resultMessage.textContent = `${strikes} 스트라이크, ${balls} 볼`;
+    }
+
+    return resultMessage
+}
+
+function play(input) {
+    let inputDigits = Array.from(new Set(input.split('').map(Number)));  // 중복 제거, 문자열을 숫자로 변환
+
+    if (inputDigits.length !== 3 || inputDigits.some(digit => digit < 1 || digit > 9)) {
+        document.querySelector(".noti").innerHTML = "1부터 9까지의 서로 다른 숫자 세 개를 입력해주세요.";
+        return;
+    }
+
+    let resultMessage = checkNumber(inputDigits);
+    document.querySelector(".result").appendChild(resultMessage);
+
+}
+
+function restartGame() {
+    document.querySelector(".noti").innerHTML = "";
+    document.querySelector(".result").innerHTML = "";
+    answer = startGame()
+    console.log(answer)
+}
+
+
+let answer = startGame()
+console.log(answer)
+
+document.querySelector(".input__button").addEventListener("click", (e) => {
+    document.querySelector(".noti").innerHTML = "";
+    document.querySelector(".result").innerHTML = "";
+    let inputnums = document.querySelector(".input__text").value;
+    play(inputnums);
+
+    document.querySelector(".input__text").value = "";
+})
+document.querySelector(".restart").addEventListener("click", (e) => {
+    restartGame();
+})