next-step · Hyoeunkh · May 5, 2024 · May 5, 2024 · May 5, 2024 · May 5, 2024
diff --git a/README.md b/README.md
@@ -1 +1,7 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+1. 초기화면 구현 및 랜덤 숫자 생성
+2. 입력 범위 확인, alert
+3. 틀렸을 경우, 볼 or 스트라이크 판별 및 결과 확인
+4. 정답일 경우, 재시작
+5. 디자인
diff --git a/index.html b/index.html
@@ -3,10 +3,41 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>Baseball Game With Hyoeun</title>
+
+    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./src/main.css" />
+
+    <script type="module" src="./src/main.js"></script>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="app">
+      <div class="inner">
+
+        <h1>⚾숫자 야구 게임⚾</h1>
+        <div class="baseball-game">
+          <p class="descripion">
+            <strong>1~9까지의 수</strong>를 중복없이 <strong>3개</strong> 입력해주세요<br>
+            올바른 예&rpar; 139<br>
+            틀린 예&rpar; 122
+          </p>
+          <div class="search">
+            <input type="text" />
+            <input type="button" class="search-submit btn" value="확인"></input>
+          </div>
+        </div>
+
+        <div class="result">
+          <h3>📄결과</h3>
+          <div class="result-hint"></div>
+          <div class="result-correct">
+            <h4 class="result-ment">🎉정답을 맞추셨습니다🎉</h4>
+            <p>게임을 새로 시작하시겠습니까?</p>
+            <button class="restart btn">게임 재시작</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
   </body>
 </html>
diff --git a/src/ballOrStrike.js b/src/ballOrStrike.js
@@ -0,0 +1,38 @@
+import { random } from "./createRandomNum.js";
+
+// 볼 or 스트라이크 판별
+const correct = document.querySelector('.result-correct');
+
+export const ballOrStrike = (inputNum) => {
+  var res ='';
+  var strike = 0;
+  var ball = 0;
+  inputNum.split('').forEach((num, index) => {
+  if (random.indexOf(num) === index)
+    strike++;
+  else if (random.includes(num))
+    ball++;
+  })
+  res = createResult(ball, strike)
+  console.log(document.querySelector('.result-hint').textContent = res);
+  if (strike === 3) {
+    correct.classList.add('block');
+  } else {
+    correct.classList.remove('block');
+  }
+}
+
+// 숫자 입력 결과 확인
+function createResult(ball, strike) {
+  var resultText = '';
+  if (strike === 0 && ball >0)
+    resultText = `${ball}볼`
+  else if (strike > 0 && ball === 0)
+    resultText = `${strike}스트라이크`
+  else if (ball > 0 || strike > 0)
+    resultText = `${ball}볼 ${strike}스트라이크`
+  else 
+    resultText = '낫싱';
+  return resultText
+}
+
diff --git a/src/createRandomNum.js b/src/createRandomNum.js
@@ -0,0 +1,13 @@
+const numbers = Array(9).fill().map((item, index) => index + 1);
+export let random = [];
+
+export const createRandomNum = () => {
+  random.length = 0;
+  for(var i=0; i<3; i++) {
+    const num = Math.floor(Math.random() * numbers.length);
+    const newArr = numbers.splice(num, 1);
+    const val = newArr[0];
+    random.push(String(val));
+  }
+  console.log(random);
+}
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,44 @@
+body {
+    background-color: beige;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 1.4;
+      font-family: "Nanum Gothic", sans-serif;
+  }
+  .inner {
+     width: 1100px;
+     margin: 0 auto;
+  }
+  .btn {
+      padding: 6px 10px;
+      border: 1px solid #333;
+      border-radius: 4px;
+      color: #333;
+      font-size: 14px;
+      font-weight: 700;
+      text-align: center;
+      cursor: pointer;
+      box-sizing: border-box;
+      display: block;
+      transition: .4s;
+  }
+  .btn:hover {
+     background-color: #333;
+      color: #fff;
+  }
+  #app .inner .baseball-game .search {
+     display: flex;
+     gap: 3px;
+  }
+
+  h4, strong, h3 {
+      font-weight: 700;
+  }
+  #app .result .result-correct {
+     display: none;
+     background-color: beige;
+  }
+  #app .result .result-correct.block {
+     display: block;
+  }
+
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,12 @@
+import { createRandomNum } from "./createRandomNum.js"
+import { playBaseball } from "./playBaseball.js";
+import { restart } from "./restart.js";
+
+//랜덤 숫자 생성
+createRandomNum()
+
+// 야구게임 시작
+document.querySelector('.search-submit').addEventListener('click', playBaseball);
+
+// 재시작
+document.querySelector('.restart').addEventListener('click', restart);
diff --git a/src/playBaseball.js b/src/playBaseball.js
@@ -0,0 +1,27 @@
+import { ballOrStrike } from "./ballOrStrike.js";
+
+export const playBaseball = () => {
+	const inputNum = document.querySelector('.search input').value;
+	var checkVal = checkValue(inputNum);
+
+	if (checkVal) {
+		ballOrStrike(inputNum)
+	}
+	else {
+		document.querySelector('.search input').focus();
+	}
+}
+ // 입력 범위 확인
+function checkValue(inputNum) {
+	if(inputNum == null || inputNum.length !== 3) {
+		alert(`3자리를 입력해주세요.`);
+		return false;
+	} else if(inputNum < '0' || inputNum >= '999') {
+		alert(`숫자만 입력해야 합니다.`);
+		return false;
+	} else if(new Set(inputNum).size !== 3) {
+		alert('중복없이 입력해주세요.');
+		return false;
+	}
+	return true;
+}
diff --git a/src/restart.js b/src/restart.js
@@ -0,0 +1,8 @@
+import { createRandomNum } from "./createRandomNum.js";
+
+export const restart = () => {
+  document.querySelector('.result-hint').textContent = '';
+  document.querySelector('.result-correct').classList.remove('block');
+  document.querySelector('.search input').value = '';
+  createRandomNum();
+}