next-step · soyeeee2 · May 9, 2024 · May 9, 2024 · May 9, 2024 · May 9, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": false,
+  "tabWidth": 4
+}
diff --git a/README.md b/README.md
@@ -1 +1,52 @@
-# javascript-baseball-precourse
+# 숫자 야구 게임
+
+## UI
+1. **템플릿 구현**: 화면 디자인 및 템플릿을 구현합니다.
+2. **처음 게임 시작 시 '결과' 부분 숨기기**: 게임이 시작될 때 '결과' 부분을 숨겨 사용자의 눈을 덜 끌어냅니다.
+
+## 야구게임 결과
+게임 진행 중에 발생하는 다양한 결과에 대한 설명입니다.
+
+### 1. 정답인 경우
+- 정답 문구 출력
+- 게임 재시작 문구 출력
+- 게임 재시작 버튼 생성
+
+### 2. 오답인 경우
+- N스트라이크 N볼 형식으로 게임 진행 상황 출력
+
+### 3. 잘못된 값 입력 시
+- `alert()`로 에러 메시지 출력
+
+### 예외 케이스 종류
+1. 문자열 입력
+2. 특수문자 입력
+3. 소수 입력
+4. 중복된 숫자 입력
+5. 3개 이상 또는 이하의 숫자 입력
+
+## 기능 구현
+
+### 정답 세팅 (SetAnswer)
+1. 랜덤 함수로 정답을 생성합니다.
+
+### 숫자 입력 받기 (HandleInput, OnlyNumber)
+1. input 창에 숫자 입력을 받습니다.
+2. 확인 버튼 클릭 시, 입력된 숫자를 전달 받습니다.
+3. 예외 케이스에 해당하는 입력을 받았을 경우 에러 메시지를 출력합니다.
+
+### 게임 진행 (CompareValue)
+1. 입력된 수와 컴퓨터의 수를 비교합니다.
+   - 같은 수, 같은 자리 = 스트라이크
+   - 같은 수, 다른 자리 = 볼
+   - 모두 다른 수 = 낫싱
+
+
+### 출력 (ShowResult)
+1. displayNone으로 숨겨뒀던 결과 content를 보이게 합니다.
+2. 비교한 결과를 사용자에게 보여줍니다. 
+
+### 리셋 (ResetValues, EndGame)
+1. 게임 재시작 버튼을 눌렀을 시, location.reload()로 초기화합니다.
+2. 게임 종료 버튼을 눌렀을 시, 화면을 초기화하고 게임을 종료합니다.
+
diff --git a/index.html b/index.html
@@ -1,12 +1,35 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>숫자 야구 게임</title>
+  <link rel="stylesheet" href="./src/style/style.css">
+</head>
+
+<body>
+  <div id="app">
+    <h1>⚾숫자 야구 게임</h1>
+    <p><strong>1~9까지의 수</strong>를 중복없이 <strong>3개</strong> 입력해주세요</p>
+    <p>올바른 예&#41; 139</p>
+    <p>틀린 예&#41; 122</p>
+    <form>
+      <input type="text" maxlength="3" />
+      <button type="submit" id="submitBtn">확인</button>
+    </form>
+    <h3>결과</h3>
+    <section id="result__section">
+      <div id="contents" class="displayNone">
+        <div id="ansEl"></div>
+        <div class="btn-wrap">
+          <button id="resetBtn">게임 재시작</button>
+          <button id="endGameBtn">게임 종료</button>
+        </div>
+      </div>
+    </section>
+  </div>
+  <script type="module" src="./src/main.js"></script>
+</body>
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,14 @@
+import { HandleInput } from "./modules/HandleInput.js";
+import { SetAnswer } from "./modules/SetAnswer.js";
+import { OnlyNumber } from "./modules/OnlyNumber.js";
+import { ResetValues } from "./modules/ResetValues.js";
+import { EndGame } from "./modules/EndGame.js";
+
+SetAnswer();
+
+document.querySelector("form").addEventListener("submit", HandleInput);
+document.querySelector("input").addEventListener("keydown", OnlyNumber);
+
+// 추가된 버튼의 이벤트 리스너를 할당합니다.
+document.getElementById("resetBtn").addEventListener("click", ResetValues);
+document.getElementById("endGameBtn").addEventListener("click", EndGame);
diff --git a/src/modules/CompareValue.js b/src/modules/CompareValue.js
@@ -0,0 +1,18 @@
+import { ShowResult } from "./ShowResult.js";
+import { answer } from "./SetAnswer.js";
+
+export const CompareValue = () => {
+    const inputEl = document.querySelector("input");
+
+    let strikes = 0;
+    let balls = 0;
+    for (let i = 0; i < 3; i++) {
+        if (inputEl.value[i] === answer[i]) {
+            strikes++;
+        } else if (answer.includes(inputEl.value[i])) {
+            balls++;
+        }
+    }
+
+    ShowResult(strikes, balls);
+};
diff --git a/src/modules/EndGame.js b/src/modules/EndGame.js
@@ -0,0 +1,4 @@
+export const EndGame = () => {
+    const app = document.getElementById("app");
+    app.innerHTML = "<h1>게임이 종료되었습니다.</h1>";
+};
diff --git a/src/modules/HandleInput.js b/src/modules/HandleInput.js
@@ -0,0 +1,16 @@
+import { CompareValue } from "./CompareValue.js";
+
+export const HandleInput = (e) => {
+    e.preventDefault();
+    const inputEl = document.querySelector("input");
+    const contents = document.getElementById("contents");
+
+    if (inputEl.value.length < 3) {
+        alert("3글자 이상 입력해주세요.");
+        return;
+    }
+
+    contents.setAttribute("class", "");
+
+    CompareValue();
+};
diff --git a/src/modules/OnlyNumber.js b/src/modules/OnlyNumber.js
@@ -0,0 +1,21 @@
+export const OnlyNumber = (event) => {
+    const key = event.key;
+
+    // 입력된 키가 숫자인지, 백스페이스 또는 엔터인지 확인합니다.
+    if (/\d/.test(key) || key === "Backspace" || key === "Enter") {
+        const inputEl = document.querySelector("input");
+        const value = inputEl.value;
+
+        // 현재 입력된 값과 이전 값이 같으면 입력을 막고 경고창을 표시합니다.
+        if (value.length > 0 && value[value.length - 1] === key) {
+            event.preventDefault();
+            alert("중복된 값을 입력할 수 없습니다.");
+            return false;
+        }
+        return true;
+    } else {
+        event.preventDefault();
+        alert("숫자만 입력 가능합니다.");
+        return false;
+    }
+};
diff --git a/src/modules/ResetValues.js b/src/modules/ResetValues.js
@@ -0,0 +1,8 @@
+export const ResetValues = () => {
+    const inputEl = document.querySelector("input");
+    const ansEl = document.getElementById("ansEl");
+    inputEl.value = "";
+    ansEl.innerText = "";
+
+    location.reload();
+};
diff --git a/src/modules/SetAnswer.js b/src/modules/SetAnswer.js
@@ -0,0 +1,14 @@
+let answer;
+
+export const SetAnswer = () => {
+    answer = "";
+    while (answer.length < 3) {
+        let num = Math.floor(Math.random() * 9) + 1;
+        if (!answer.includes(num.toString())) {
+            answer += num.toString();
+        }
+    }
+    console.log(answer);
+};
+
+export { answer };
diff --git a/src/modules/ShowResult.js b/src/modules/ShowResult.js
@@ -0,0 +1,12 @@
+export const ShowResult = (strikes, balls) => {
+    const ansEl = document.getElementById("ansEl");
+
+    if (strikes === 3) {
+        ansEl.innerHTML =
+            "<span>🎉정답을 맞추셨습니다!🎉<br>게임을 새로 시작하시겠습니까?</span>";
+    } else if (strikes === 0 && balls === 0) {
+        ansEl.innerText = "낫싱";
+    } else {
+        ansEl.innerText = `${strikes} 스트라이크, ${balls} 볼`;
+    }
+};
diff --git a/src/style/style.css b/src/style/style.css
@@ -0,0 +1,27 @@
+.displayNone {
+	display: none;
+}
+
+#result__section {
+	width: 350px;
+	height: 200px;
+	border-radius: 10px;
+	background-color: beige;
+
+	position: relative;
+}
+
+#ansEl {
+	width: 100%;
+	text-align: center;
+	position: absolute;
+	top: 48%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.btn-wrap{
+	position: absolute;
+	bottom: 15px;
+	right: 15px;
+}