[ 혜인 ]

index.html

@@ -13,18 +13,18 @@ <h1>혜인이의 계산기</h1>
     </header>
     <main>
       <section>
-        <input type="number" />
-        <select name="calculate">
-          <option value="sum">+</option>
-          <option value="sub">-</option>
-          <option value="mul">x</option>
-          <option value="divide">/</option>
+        <input id="first_number" type="text" />
+        <select id="selector" name="calculate">
+          <option id="sum" value="sum">+</option>
+          <option id="sub" value="sub">-</option>
+          <option id="mul" value="mul">x</option>
+          <option id="divide" value="divide">/</option>
         </select>
-        <input type="number" />
+        <input id="second_number" type="text" />
         <h2>=</h2>
-        <h3>정답</h3>
+        <h3 id="result">정답</h3>
       </section>
-      <button>결과는?</button>
+      <button type="button" id="result_button">결과는?</button>
     </main>
     <script type="module" src="/src/main.ts"></script>
   </body>

src/main.ts

@@ -0,0 +1,57 @@
+const $ = (selector: string) =>
+  document.getElementById(selector) as HTMLElement;
+
+const firstNumber = $("first_number") as HTMLInputElement;
+const secondNumber = $("second_number") as HTMLInputElement;
+const resultBtn = $("result_button") as HTMLButtonElement;
+const selector = $("selector") as HTMLSelectElement;
+const resultHere = $("result") as HTMLHeadingElement;
+
+function blockString(inputDom: HTMLInputElement): void {
+  inputDom.addEventListener("input", (e) => {
+    const input = e.target as HTMLInputElement;
+    const changeToNum = input.value.replace(/[^0-9.]/g, "");
+    if (input.value != changeToNum) {
+      alert("숫자입력하세요");
+      input.value = "";
+    }
+  });
+}
+
+blockString(firstNumber);
+blockString(secondNumber);
+
+function calculator() {
+  const num1 = parseFloat(firstNumber?.value);
+  const num2 = parseFloat(secondNumber?.value);
+  const selectorOptions = selector.value;
+
+  let result: number | string;
+
+  switch (selectorOptions) {
+    case "sum":
+      result = num1 + num2;
+      break;
+    case "sub":
+      result = num1 - num2;
+      break;
+    case "mul":
+      result = num1 * num2;
+      break;
+    case "divide":
+      if (num2 !== 0) {
+        result = num1 / num2;
+      } else {
+        result = "계산 불가";
+      }
+      break;
+    default:
+      result = "";
+      break;
+  }
+  resultHere.textContent = result.toString();
+  firstNumber.value = "";
+  secondNumber.value = "";
+}
+
+resultBtn.addEventListener("click", calculator);