diff --git a/README.md b/README.md
index 8b2833c..f94211e 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,35 @@
-# javascript-baseball-precourse
\ No newline at end of file
+# 미니 과제 - 숫자야구 (JavaScript)
+
+카카오 테크 캠퍼스 2기
+
+[STEP1] 1회차 미니과제 - 숫자야구 (JavaScript)
+
+### 숫자야구
+1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임
+
+### 규칙
+같은 수가 같은 자리에 있으면 `스트라이크`,
+다른 자리에 있으면 `볼`,
+같은 수가 전혀 없으면 `낫싱`이란 힌트를 얻을 수 있다.
+
+=> 그 **힌트**를 이용해서 먼저 상대방(컴퓨터)의
+수를 맞추면 승리!
+
+예를 들어 상대방(컴퓨터)의 수가 425라면, 다음과 같은 **힌트**를 얻을 수 있다.
+- 123을 제시한 경우: 1 스트라이크
+- 456을 제시한 경우: 1 볼 1 스트라이크
+- 789를 제시한 경우: 낫싱
+
+
+## 기능 목록
+- 인터페이스 구현
+- 게임 시작
+- 1에서 9까지 서로 다른 임의의 수 3개 생성
+- 3개의 수를 입력받기
+- 입력 확인
+ - 입력 값이 잘못된 경우, 에러 메시지 출력하고 다시 이전 단계로 이동
+- 컴퓨터와 플레이어의 숫자를 비교하고 결과를 반환
+- 반환 값에 따라
+ - 정답인 경우 게임 종료 및 재시작 버튼 표시
+ - 재시작 버튼을 누르면 재시작(게임 시작)
+ - 오답인 경우 힌트를 출력
diff --git a/index.html b/index.html
index b021b5c..e48d1a9 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,26 @@
-
+
-
+ 숫자 야구 게임
+
-
-
+ ⚾숫자 야구 게임
+
+ 1~9까지의 수를 중복없이 3개 입력해주세요.
+ 올바른 예) 139
+ 틀린 예) 122
+
+
+
+
-
+
\ No newline at end of file
diff --git a/src/calculateScore.js b/src/calculateScore.js
new file mode 100644
index 0000000..e5007d6
--- /dev/null
+++ b/src/calculateScore.js
@@ -0,0 +1,12 @@
+export function calculateStrikeBall(guessNum, answerNum) {
+ let strike = 0
+ let ball = 0
+ for (let i = 0; i < 3; i++){
+ if (guessNum[i] === answerNum[i]) {
+ strike++;
+ } else if (answerNum.includes(guessNum[i])) {
+ ball++;
+ }
+ }
+ return {strike, ball}
+}
\ No newline at end of file
diff --git a/src/initialGame.js b/src/initialGame.js
new file mode 100644
index 0000000..976143a
--- /dev/null
+++ b/src/initialGame.js
@@ -0,0 +1,10 @@
+
+export function setAnswer() {
+ const numbers = []
+ while(numbers.length < 3) {
+ const randomNum = Math.floor(Math.random() * 9) + 1
+ if (!numbers.includes(randomNum))
+ numbers.push(randomNum)
+ }
+ return numbers
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e69de29..02d801c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,72 @@
+import { setAnswer } from "./initialGame.js";
+import { checkNumbers } from "./validCheck.js";
+import { calculateStrikeBall } from "./calculateScore.js";
+
+let answer = []
+playGame()
+
+function playGame() {
+ answer = setAnswer()
+}
+
+const sendBtn = document.querySelector('.send-btn')
+sendBtn.addEventListener('click', () => {
+ let guessNum = document.querySelector('.input-box').value.split('').map(Number)
+
+ let valid = checkNumbers(guessNum)
+ if (valid === true) {
+ let score = calculateStrikeBall(guessNum, answer)
+ printResult(score)
+ } else {
+ alert("잘못된 값이 입력되었어요. 다시 입력해주세요.")
+ }
+});
+
+// console.log(checkNumbers(guessNum))
+
+function printResult(score) {
+ let result = ''
+ let strike = score.strike
+ let ball = score.ball
+ if (strike + ball === 0) {
+ result = '낫싱';
+ } else if (ball > 0) {
+ result += `${ball}볼 `
+ }
+ if (strike > 0){
+ if (strike === 3) {
+ result = "🎉정답을 맞추셨습니다🎉"
+ endOfGame()
+ } else {
+ result += `${strike}스트라이크`
+ }
+ }
+ document.querySelector('.score').innerText = result // 결과 표시
+}
+
+function endOfGame() {
+ const restartMsg = document.createElement('p')
+ restartMsg.innerText = "게임을 새로 시작하시겠습니까?"
+ const restartBtn = document.createElement('button')
+ restartBtn.textContent = '게임 재시작'
+ const endBtn = document.createElement('button')
+ endBtn.textContent = '게임 종료'
+
+ document.querySelector('.result-field').appendChild(restartMsg);
+ document.querySelector('.result-field').appendChild(restartBtn);
+ document.querySelector('.result-field').appendChild(endBtn);
+
+ restartBtn.addEventListener('click', function() {
+ document.querySelector('.score').innerText = ''
+ document.querySelector('.result-field').removeChild(restartMsg);
+ document.querySelector('.result-field').removeChild(restartBtn);
+ document.querySelector('.result-field').removeChild(endBtn);
+ document.querySelector('.input-box').value = ''
+ playGame();
+ })
+ endBtn.addEventListener('click', function() {
+ document.querySelector('.result-field').remove()
+ document.querySelector('.input-field').remove()
+ document.querySelector('.manual').innerText = '게임이 종료되었습니다.'
+ })
+};
\ No newline at end of file
diff --git a/src/validCheck.js b/src/validCheck.js
new file mode 100644
index 0000000..563ed4c
--- /dev/null
+++ b/src/validCheck.js
@@ -0,0 +1,9 @@
+// 유효성 체크
+export function checkNumbers(guessNum) {
+ const guessNumSet = new Set(guessNum)
+ if (guessNum.length === 3 && guessNumSet.size === 3 && !guessNum.includes(0)) {
+ return true
+ } else {
+ return false
+ }
+}