next-step · daeun0726 · May 6, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/README.md b/README.md
@@ -1 +1,67 @@
-# javascript-baseball-precourse
+# ⚾️ javascript-baseball-precourse
+카카오 테크 캠퍼스 2기 1회차 미니과제 - 숫자 야구 게임
+
+
+## 🖥️ 과제 진행 요구 사항
+- 기능을 구현하기 전 README.md 에 구현할 기능 목록을 정리해 추가한다.
+- Git의 커밋 단위는 앞 단계에서 README.md 에 정리한 기능 목록 단위로 추가한다
+
+
+## 🧑‍🤝‍🧑 기능 요구 사항
+ #### 1) 컴퓨터
+ - 1에서 9까지 서로 다른 임의의 수 3개를 선택
+ - 사용자가 입력한 숫자에 대해 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱 출력
+ - 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력
+ - 사용자가 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시
+
+
+ #### 2) 게임 플레이어
+ - 컴퓨터가 생각하고 있는 3개의 숫자를 입력
+ - alert() 에러 메시지가 나타날 경우 그 부분부터 다시 입력
+ - 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료 가능
+
+<br>
+
+## ⚙️ 구현할 기능 목록
+
+### 초기 화면 구성
+- "**시작하기**" 버튼 클릭시  1에서 9까지 서로 다른 임의의 수 3개를 선택
+- 게임 시작 후 사용자에게 값을 입력받을 수 있다.
+
+<br>
+
+### 입력값 유효성 검사
+
+#### 1) 올바른 형식의 값 입력
+- 1에서 9까지 서로 다른 임의의 정수 3개인 경우이며 반대의 경우는 모두 잘못된 형식이다.
+- 입력한 값에 대한 결과를 출력한다.
+
+#### 2) 잘못된 형식의 값 입력
+- alert()을 통해 "잘못된 입력 형식입니다!" 에러메세지를 출력 후 그 부분부터 다시 입력받는다.
+
+<br>
+
+### 결과 출력 
+
+#### 1) 정답
+- 🎉정답을 맞추셨습니다🎉 문구 출력 후 게임 종료된다
+
+#### 2) 오답
+- 같은 수가 같은 자리에 있으면 스트라이크 출력
+- 다른 자리에 있으면 볼 출력
+- 같은 수가 전혀 없으면 낫싱 출력
+
+<br>
+
+### 게임 종료
+
+#### 1) 재시작
+- "**게임 재시작**" 버튼을 클릭시 초기 화면으로 돌아가 입력을 받을 수 있다.
+
+#### 2) 완전 종료
+- "**종료하기**" 버튼을 클릭시 게임이 완전히 종료되고 초기 화면으로 돌아가 "**시작하기**" 버튼을 클릭 할 수 있다.
+
+
+<br>
+
+## 📌 과제 진행 소감
diff --git a/index.html b/index.html
@@ -3,10 +3,44 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>⚾️숫자 야구 게임⚾️</title>
+    <link rel="stylesheet" href="/src/css/main.css"/>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="app">
+
+      <div class="container">
+        <h1>⚾️숫자 야구 게임⚾️</h1>
+        <div><b>1~9까지의 수</b>를 <b>중복없이 3개</b> 입력해주세요.</div>
+        <div>올바른 예) 139</div>
+        <div>틀린 예) 122</div>
+
+        <form class="input">
+          <input  disabled  type="text" id="input--answer" />
+          <button class="btn--answer">확인</button>
+        </form>
+
+        <div class="result">
+          <h2>⚾️ 결과</h2>
+          <div class="result--text"></div>
+        </div>
+
+        <div class="game-start">
+          <div class="question--start">게임을 시작하시겠습니까?</div>
+          <button class="btn--start">게임 시작</button>
+        </div>
+        <div class="game-restart hide">
+          <div class="question--restart">게임을 새로 시작하시겠습니까?</div>
+          <button class="btn--restart">게임 재시작</button>
+        </div>
+        <div class="game-quit hide">
+          <div class="question--quit">게임을 종료하시겠습니까?</div>
+          <button class="btn--quit">게임 종료</button>
+        </div>
+      </div>
+
+
+    </div>
+    <script type="module" src="/src/js/main.js"></script>
   </body>
 </html>
diff --git a/src/css/main.css b/src/css/main.css
@@ -0,0 +1,58 @@
+#app{
+    display: flex;
+    justify-content: center;
+}
+
+.container{
+    border: 3px solid #000;
+    border-radius: 10px;
+    padding: 30px;
+    margin-top: 150px;
+}
+
+
+
+.result .result--text{
+    font-weight: 700;
+    font-size: 17px;
+}
+
+
+
+.game-start{
+    display: block;
+}
+
+.game-start.hide{
+    display: none;
+}
+
+.game-start .question--start{
+    margin-bottom: 10px;
+}
+
+
+.game-restart{
+    display: block;
+}
+
+.game-restart.hide{
+    display: none;
+}
+
+.game-restart .question--restart{
+    margin-bottom: 10px;
+}
+
+.game-quit{
+    display: block;
+}
+
+.game-quit.hide{
+    display: none;
+}
+
+.game-quit .question--quit{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
diff --git a/src/js/main.js b/src/js/main.js
@@ -0,0 +1,91 @@
+let randomNumbers;
+
+const startBtn = document.querySelector('.btn--start');
+const restartBtn = document.querySelector('.btn--restart');
+const quitBtn = document.querySelector('.btn--quit');
+const answerInput = document.getElementById('input--answer');
+const form = document.querySelector("form");
+const answerBtn = document.querySelector('.btn--answer');
+const gameStart = document.querySelector('.game-start');
+const gameRestart = document.querySelector('.game-restart');
+const gameQuit = document.querySelector('.game-quit');
+const resultEl = document.querySelector(".result--text");
+
+
+startBtn.addEventListener('click', () =>{
+    gameStart.classList.add('hide');
+    gameRestart.classList.add('hide');
+    gameQuit.classList.add('hide');
+    answerInput.disabled = false;
+    randomNumbers = getRandomNumbers();
+});
+
+restartBtn.addEventListener('click', function(){
+    gameRestart.classList.add('hide');
+    gameStart.classList.add('hide');
+    gameQuit.classList.add('hide');
+    answerInput.disabled = false;
+    randomNumbers = getRandomNumbers();
+});
+
+quitBtn.addEventListener('click', function(){
+    gameRestart.classList.add('hide');
+    gameQuit.classList.add('hide');
+    gameStart.classList.remove('hide');
+    answerInput.disabled = true;
+});
+
+form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const answerValue = answerInput.value;
+    isValid(answerValue);
+    event.target.reset();
+});
+
+function getRandomNumbers() {
+    const numbers = [];
+    while (numbers.length < 3) {
+        const randomNumber = Math.floor(Math.random() * 9) + 1;
+        if (!numbers.includes(randomNumber)) {
+            numbers.push(randomNumber);
+        }
+    }
+    return numbers;
+}
+
+function showResult(inputArray, randomNumbers){
+    let strike = 0;
+    let ball = 0;
+
+    for(let i = 0; i < 3; i++){
+      if(inputArray[i] === randomNumbers[i]){
+        strike++;
+      }else if(randomNumbers.includes(inputArray[i])){
+        ball++;
+      }
+    }
+
+    if(strike === 3){
+        resultEl.textContent = " 🎉정답을 맞추셨습니다🎉";
+        answerInput.disabled = true;
+        gameRestart.classList.remove('hide');
+        gameQuit.classList.remove('hide');
+    }else if(strike == 0 && ball == 0){
+        resultEl.textContent = "닛싱";
+    }else if(strike == 0){
+        resultEl.textContent = `${ball} 볼`;
+    }else if(ball == 0){
+        resultEl.textContent = `${strike} 스트라이크`;
+    }else{
+        resultEl.textContent = `${strike} 스트라이크 , ${ball} 볼`;
+    }
+}
+
+function isValid(input){
+    const inputArray = Array.from(new Set(input.split('').map(Number)));
+    if(inputArray.length === 3 && input.length === 3){
+        showResult(inputArray,randomNumbers);
+    }else{
+        alert("잘못된 입력 형식입니다!");
+    }
+}
diff --git a/src/main.js b/src/main.js