diff --git a/README.md b/README.md
index 8b2833c..820b759 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,13 @@
-# javascript-baseball-precourse
\ No newline at end of file
+# javascript-baseball-precourse
+
+### ⚾️ 숫자 야구 - 미니과제
+
+> 구현 기능 목록 정리
+
+- [x] 컴퓨터가 서로 다른 임의의 수 3개를 선택
+- [x] 게임 플레이어가 3개의 숫자를 입력하는 기능
+- [x] 입력 중인 값이 올바른지 검증하는 기능
+- [x] 잘못된 값을 넣은 경우, 에러 메시지 출력 및 다시 입력받는 기능
+- [x] 입력값에 따라 힌트를 처리하는 기능
+- [x] 확인 버튼을 누르면 힌트를 제공하는 기능
+- [x] 숫자를 모두 맞히면 게임이 종료 메시지와 재시작 버튼이 나오는 기능
\ No newline at end of file
diff --git a/index.html b/index.html
index b021b5c..6b90aea 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,23 @@
-
+
-
+ ⚾️ 숫자 야구 게임
-
+
+
⚾️ 숫자 야구 게임
+
1~9까지의 숫자 중 중복없이 3개 입력해주세요.
+
올바른 예) 139
+
틀린 예) 122
+
+
+
📄결과
+
+
+
+
diff --git a/src/components/makeHint.js b/src/components/makeHint.js
new file mode 100644
index 0000000..d6281f0
--- /dev/null
+++ b/src/components/makeHint.js
@@ -0,0 +1,12 @@
+export function calculateHint(playerInput, comRandom) {
+ let strike = 0
+ let ball = 0
+
+ playerInput.forEach((num, index) => {
+ if (num === comRandom[index]) strike++
+ else if (comRandom.includes(num)) ball++
+ });
+
+ console.log('스트라이크 개수: ', strike, ', 볼 개수: ', ball)
+ return {strike, ball}
+}
\ No newline at end of file
diff --git a/src/components/makeRandom.js b/src/components/makeRandom.js
new file mode 100644
index 0000000..d1b0b2a
--- /dev/null
+++ b/src/components/makeRandom.js
@@ -0,0 +1,10 @@
+export function threeRandom () {
+ const randomNum = new Set()
+
+ while (randomNum.size < 3) {
+ const randomOne = Math.floor(Math.random() * 9) +1
+ randomNum.add(randomOne)
+ }
+
+ return Array.from(randomNum)
+}
\ No newline at end of file
diff --git a/src/components/numberInput.js b/src/components/numberInput.js
new file mode 100644
index 0000000..a5e749a
--- /dev/null
+++ b/src/components/numberInput.js
@@ -0,0 +1,15 @@
+import { inputError } from './rewriteInput.js';
+
+export const userInput = document.getElementById('userInput')
+
+export function checkInput() { // 잘못된 값 입력하는지 검증
+ const numbers = userInput.value.split('').map(Number)
+ const isValid = numbers.length === 3 && numbers.every(num => num>=1 && num<=9 && Number.isInteger(num))
+ const isDuplicate = new Set(numbers).size === numbers.length
+
+ if (!isValid || !isDuplicate) {
+ inputError()
+ }
+ console.log('입력 받은 숫자: ', numbers)
+ return numbers
+}
\ No newline at end of file
diff --git a/src/components/printHint.js b/src/components/printHint.js
new file mode 100644
index 0000000..628bf0e
--- /dev/null
+++ b/src/components/printHint.js
@@ -0,0 +1,19 @@
+export function classifyHint({ strike, ball}) {
+ const resultElement = document.getElementById('result')
+
+ if (strike === 3) {
+ resultElement.textContent = '🎉정답을 맞히셨습니다🎉'
+ }
+ else if (strike !== 0 && ball === 0) {
+ resultElement.textContent = `${strike}스트라이크`
+ }
+ else if (ball !== 0 && strike === 0) {
+ resultElement.textContent = `${ball}볼`
+ }
+ else if (ball != 0 && strike != 0) {
+ resultElement.textContent = `${ball}볼 ${strike}스트라이크`
+ }
+ else {
+ resultElement.textContent = '낫싱'
+ }
+}
\ No newline at end of file
diff --git a/src/components/rewriteInput.js b/src/components/rewriteInput.js
new file mode 100644
index 0000000..9696e1c
--- /dev/null
+++ b/src/components/rewriteInput.js
@@ -0,0 +1,8 @@
+import { userInput } from './numberInput.js'
+
+export function inputError() {
+ alert('잘못된 값을 입력했습니다. 다시 입력해 주세요!')
+ userInput.value = ''
+ userInput.focus()
+ return;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e69de29..5c3013f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,33 @@
+import { threeRandom } from './components/makeRandom.js';
+import { checkInput } from './components/numberInput.js';
+import { calculateHint } from './components/makeHint.js';
+import { classifyHint } from './components/printHint.js';
+
+const gameState = {
+ comRandom: null
+}
+// 숫자를 모두 맞히면 게임이 종료 메시지와 재시작 버튼이 나오는 기능
+function setRestartButton() {
+ const restartButton = document.getElementById('restartButton')
+ restartButton.addEventListener('click', () => window.location.reload())
+}
+
+function gameResult() {
+ const userInput = checkInput()
+ const calHint = calculateHint(userInput, gameState.comRandom)
+ classifyHint(calHint)
+
+ const resultElement = document.getElementById('result')
+ if (resultElement.textContent.includes('🎉정답을 맞히셨습니다🎉')) {
+ const restartButton = document.getElementById('restartButton')
+ restartButton.style.display = 'block'
+ }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ gameState.comRandom = threeRandom()
+ console.log('상대방(컴퓨터)의 수: ', gameState.comRandom)
+
+ document.getElementById('checkButton').addEventListener('click', gameResult)
+ setRestartButton()
+});
\ No newline at end of file