From dbd7c8d6646692e98f1e4b269048f44a61b106bd Mon Sep 17 00:00:00 2001 From: binllionaire Date: Thu, 9 Nov 2023 03:34:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat=20:=20=E2=9C=A8=20=EA=B3=84=EC=82=B0?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 61 +++++++++++++++++++++++++++------------------------ src/main.ts | 46 ++++++++++++++++++++++++++++++++++++++ tsconfig.json | 2 +- 3 files changed, 79 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index d422693..de681da 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,34 @@ - - - - - - 타입스크립트로 계산기 만들기 - - -
-

혜인이의 계산기

-
-
-
- - - -

=

-

정답

-
- -
- - - + + + + + + + 타입스크립트로 계산기 만들기 + + + +
+

수빈이의 계산기

+
+
+
+ + + +

=

+

정답

+
+ +
+ + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index e69de29..ad0a788 100644 --- a/src/main.ts +++ b/src/main.ts @@ -0,0 +1,46 @@ +const input1: HTMLInputElement = document.querySelector( + "body > main > section > input[type=number]:nth-child(1)" +) as HTMLInputElement; +const input2: HTMLInputElement = document.querySelector( + "body > main > section > input[type=number]:nth-child(3)" +) as HTMLInputElement; +const operation: HTMLSelectElement = document.querySelector( + "body > main > section > select" +) as HTMLSelectElement; +const calculateButton: HTMLButtonElement = document.querySelector( + "body > main > button" +) as HTMLButtonElement; +const answer: HTMLHeadingElement = document.querySelector( + "body > main > section > h3" +) as HTMLHeadingElement; + +calculateButton.addEventListener("click", () => { + const isInputEmpty: boolean = isEmpty(input1.value, input2.value); + if (isInputEmpty) { + alert("뭐 잊은거 없어?"); + return; + } + const num1: number = Number(input1.value); + const num2: number = Number(input2.value); + const result = operate(num1, num2, operation.value); + answer.textContent = String(result); +}); + +function operate(num1: number, num2: number, sign: string): number { + switch (sign) { + case "sum": + return num1 + num2; + case "sub": + return num1 - num2; + case "mul": + return num1 * num2; + case "divide": + return num1 / num2; + default: + return 0; + } +} + +function isEmpty(num1: string, num2: string): boolean { + return num1 === "" || num2 === ""; +} diff --git a/tsconfig.json b/tsconfig.json index 75abdef..ea003a6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, - "isolatedModules": true, + "isolatedModules": false, "noEmit": true, /* Linting */ From e17ea78d38222eda156eeed7149301b4f6777056 Mon Sep 17 00:00:00 2001 From: binllionaire Date: Thu, 9 Nov 2023 03:37:21 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor=20:=20=E2=99=BB=EF=B8=8F=20html=20?= =?UTF-8?q?element=20=EC=83=81=EC=88=98=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/htmlElements.ts | 15 +++++++++++++++ src/main.ts | 22 +++++++--------------- 2 files changed, 22 insertions(+), 15 deletions(-) create mode 100644 src/htmlElements.ts diff --git a/src/htmlElements.ts b/src/htmlElements.ts new file mode 100644 index 0000000..1259d2b --- /dev/null +++ b/src/htmlElements.ts @@ -0,0 +1,15 @@ +export const input1: HTMLInputElement = document.querySelector( + "body > main > section > input[type=number]:nth-child(1)" +) as HTMLInputElement; +export const input2: HTMLInputElement = document.querySelector( + "body > main > section > input[type=number]:nth-child(3)" +) as HTMLInputElement; +export const operation: HTMLSelectElement = document.querySelector( + "body > main > section > select" +) as HTMLSelectElement; +export const calculateButton: HTMLButtonElement = document.querySelector( + "body > main > button" +) as HTMLButtonElement; +export const answer: HTMLHeadingElement = document.querySelector( + "body > main > section > h3" +) as HTMLHeadingElement; diff --git a/src/main.ts b/src/main.ts index ad0a788..76cd8c0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,18 +1,10 @@ -const input1: HTMLInputElement = document.querySelector( - "body > main > section > input[type=number]:nth-child(1)" -) as HTMLInputElement; -const input2: HTMLInputElement = document.querySelector( - "body > main > section > input[type=number]:nth-child(3)" -) as HTMLInputElement; -const operation: HTMLSelectElement = document.querySelector( - "body > main > section > select" -) as HTMLSelectElement; -const calculateButton: HTMLButtonElement = document.querySelector( - "body > main > button" -) as HTMLButtonElement; -const answer: HTMLHeadingElement = document.querySelector( - "body > main > section > h3" -) as HTMLHeadingElement; +import { + answer, + calculateButton, + input1, + input2, + operation, +} from "./htmlElements"; calculateButton.addEventListener("click", () => { const isInputEmpty: boolean = isEmpty(input1.value, input2.value); From 8bdf96d956d6cb6993a695f75d70d9044ea51d02 Mon Sep 17 00:00:00 2001 From: binllionaire Date: Thu, 9 Nov 2023 03:49:49 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor=20:=20=E2=99=BB=EF=B8=8F=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=ED=95=84=EB=93=9C=20=EA=B2=80=EC=A6=9D=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.ts | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/main.ts b/src/main.ts index 76cd8c0..e40a4a6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,17 +7,32 @@ import { } from "./htmlElements"; calculateButton.addEventListener("click", () => { + if (!checkInput()) return; // 입력 필드 검증 + + const num1: number = Number(input1.value); // 입력값을 숫자로 변경 + const num2: number = Number(input2.value); + + const result = operate(num1, num2, operation.value); // 결과 연산 + + answer.textContent = String(result); // 정답 출력 +}); + +/* 입력 필드 검증 */ +function checkInput() { const isInputEmpty: boolean = isEmpty(input1.value, input2.value); if (isInputEmpty) { alert("뭐 잊은거 없어?"); - return; + return false; } - const num1: number = Number(input1.value); - const num2: number = Number(input2.value); - const result = operate(num1, num2, operation.value); - answer.textContent = String(result); -}); + return true; +} +/* 입력 필드가 비었는지 확인하는 함수 */ +function isEmpty(num1: string, num2: string): boolean { + return num1 === "" || num2 === ""; +} + +/* 결과 연산 함수 */ function operate(num1: number, num2: number, sign: string): number { switch (sign) { case "sum": @@ -32,7 +47,3 @@ function operate(num1: number, num2: number, sign: string): number { return 0; } } - -function isEmpty(num1: string, num2: string): boolean { - return num1 === "" || num2 === ""; -} From 7ced940a19589695220546723a63ba1278a4cd93 Mon Sep 17 00:00:00 2001 From: binllionaire Date: Thu, 9 Nov 2023 03:58:12 +0900 Subject: [PATCH 4/5] =?UTF-8?q?comment=20:=20=F0=9F=92=A1=20=EC=A3=BC?= =?UTF-8?q?=EC=84=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.ts b/src/main.ts index e40a4a6..81f06a0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -17,7 +17,7 @@ calculateButton.addEventListener("click", () => { answer.textContent = String(result); // 정답 출력 }); -/* 입력 필드 검증 */ +/* 입력 필드 검증 함수 */ function checkInput() { const isInputEmpty: boolean = isEmpty(input1.value, input2.value); if (isInputEmpty) { From 5e4602f726845e5d5108a09a35b18bda0cb07d1f Mon Sep 17 00:00:00 2001 From: binllionaire Date: Thu, 9 Nov 2023 04:23:55 +0900 Subject: [PATCH 5/5] =?UTF-8?q?rename=20:=20=F0=9F=9A=9A=C2=A0=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main.ts b/src/main.ts index 81f06a0..6ea6e01 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,7 +12,7 @@ calculateButton.addEventListener("click", () => { const num1: number = Number(input1.value); // 입력값을 숫자로 변경 const num2: number = Number(input2.value); - const result = operate(num1, num2, operation.value); // 결과 연산 + const result = calculate(num1, num2, operation.value); // 결과 연산 answer.textContent = String(result); // 정답 출력 }); @@ -33,7 +33,7 @@ function isEmpty(num1: string, num2: string): boolean { } /* 결과 연산 함수 */ -function operate(num1: number, num2: number, sign: string): number { +function calculate(num1: number, num2: number, sign: string): number { switch (sign) { case "sum": return num1 + num2;