diff --git a/CSS/main.css b/CSS/main.css
new file mode 100644
index 0000000..33447e6
--- /dev/null
+++ b/CSS/main.css
@@ -0,0 +1,9 @@
+.result {
+ display: none;
+}
+.restart__btn {
+ display: none;
+}
+.end__btn {
+ display: none;
+}
diff --git a/README.md b/README.md
index 8b2833c..a5825c9 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,21 @@
-# javascript-baseball-precourse
\ No newline at end of file
+# 숫자 야구 - 미니과제
+
+
+
+## 기능 요구 사항
+
+### 기능 1
+
+- 서로 다른 3자리의 수 생성
+
+### 기능 2
+
+- 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 재입력
+- 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼 표시
+
+### 기능 3
+
+- 플레이어가 3개의 숫자를 입력하면 숫자에 대한 결과 출력
+- - 숫자와 자리 모두 맞으면 스트라이크
+- - 자리는 맞지 않지만 숫자가 포함되어 있으면 볼
+- - 포함되어있지 않은 경우 낫싱
diff --git a/index.html b/index.html
index b021b5c..5e16691 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,28 @@
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ 숫자 야구
+
+
+
+
+
+
⚾️ 숫자 야구 게임
+
1~9까지의 수를 중복없이 3개 입력해주세요. 올바른 예) 138 틀린 예) 122
+
+
+
+
+
📄 결과
+
+
+
+
+
+
+
+
+
diff --git a/src/answerNum.js b/src/answerNum.js
new file mode 100644
index 0000000..a2db6b9
--- /dev/null
+++ b/src/answerNum.js
@@ -0,0 +1,12 @@
+export let numLst;
+export let answer;
+
+// 3개의 숫자 랜덤으로 생성
+export function answerNumber() {
+ numLst = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+ answer = [];
+ for (let i = 0; i < 3; i++) {
+ let select = Math.floor(Math.random() * numLst.length);
+ answer[i] = numLst.splice(select, 1)[0];
+ }
+}
diff --git a/src/check.js b/src/check.js
new file mode 100644
index 0000000..7b4cdc8
--- /dev/null
+++ b/src/check.js
@@ -0,0 +1,43 @@
+import { gameResult } from './gameUI.js';
+export let inputValue;
+export let strike = 0;
+export let ball = 0;
+export function inputCheck(answer) {
+ document.getElementById('inputButton').addEventListener('click', function () {
+ inputValue = document.getElementById('inputField').value;
+
+ // 3자리 숫자인지 확인
+ if (!/^\d{3}$/.test(inputValue)) {
+ alert('3자리 숫자를 입력해주세요.');
+ return;
+ }
+
+ // 중복된 숫자 확인
+ let digits = inputValue.split('');
+ let uniqueDigits = Array.from(new Set(digits));
+ if (digits.length !== uniqueDigits.length) {
+ alert('중복된 숫자를 입력할 수 없습니다.');
+ return;
+ }
+ inputValue = inputValue.split('').map(Number);
+ answerCheck(answer, inputValue);
+ document.querySelector('.result').style.display = 'block';
+ gameResult();
+ });
+}
+
+export function answerCheck(answer, inputValue) {
+ strike = 0;
+ ball = 0;
+ for (let i = 0; i < 3; i++) {
+ const isStrike = answer[i] === inputValue[i];
+ const isBall = !isStrike && inputValue.includes(answer[i]);
+
+ if (isStrike) {
+ strike++;
+ } else if (isBall) {
+ ball++;
+ }
+ }
+ return { strike, ball };
+}
diff --git a/src/gameUI.js b/src/gameUI.js
new file mode 100644
index 0000000..a66a59d
--- /dev/null
+++ b/src/gameUI.js
@@ -0,0 +1,25 @@
+import { strike, ball } from './check.js';
+
+export function gameResult() {
+ const resultText = document.querySelector('.result__text');
+ const resultQuestion = document.querySelector('.result__question');
+ if (strike === 3) {
+ // 정답일 때 UI 추가
+ resultText.innerHTML = '🎉정답을 맞추셨습니다🎉';
+ resultQuestion.textContent = '게임을 새로 시작하시겠습니까?';
+ document.querySelector('.restart__btn').style.display = 'block';
+ document.querySelector('.end__btn').style.display = 'none';
+ } else if (strike === 0 && ball === 0) {
+ // 낫싱일 때 UI 추가
+ resultText.innerHTML = '낫싱😥';
+ resultQuestion.textContent = '게임을 종료하시겠습니까?';
+ document.querySelector('.restart__btn').style.display = 'none';
+ document.querySelector('.end__btn').style.display = 'block';
+ } else {
+ // 정답이아닐 때 UI 추가
+ resultText.innerHTML = `${ball}볼 ${strike}스트라이크⚾️`;
+ resultQuestion.textContent = '게임을 종료하시겠습니까?';
+ document.querySelector('.restart__btn').style.display = 'none';
+ document.querySelector('.end__btn').style.display = 'block';
+ }
+}
diff --git a/src/main.js b/src/main.js
index e69de29..602a896 100644
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,19 @@
+import { answerNumber, answer } from './answerNum.js';
+import { inputCheck, answerCheck } from './check.js';
+
+answerNumber();
+inputCheck(answer);
+
+// 버튼 이벤트
+export function restartGame() {
+ alert('새로운 게임을 시작합니다.');
+ location.reload();
+}
+
+export function endGame() {
+ alert('게임을 종료합니다.');
+ location.reload();
+}
+
+document.querySelector('.restart__btn').addEventListener('click', restartGame);
+document.querySelector('.end__btn').addEventListener('click', endGame);