Skip to content

[ 수빈 ] #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
binllionaire wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[ 수빈 ] #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dbd7c8d
feat : ✨ 계산 기능 구현
binllionaire Nov 8, 2023
e17ea78
refactor : ♻️ html element 상수 파일 분리
binllionaire Nov 8, 2023
8bdf96d
refactor : ♻️ 입력 필드 검증 함수 분리
binllionaire Nov 8, 2023
7ced940
comment : 💡 주석 수정
binllionaire Nov 8, 2023
5e4602f
rename : 🚚 함수 이름 변경
binllionaire Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 32 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,34 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/style.css" />
<title>타입스크립트로 계산기 만들기</title>
</head>
<body>
<header>
<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>
</select>
<input type="number" />
<h2>=</h2>
<h3>정답</h3>
</section>
<button>결과는?</button>
</main>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/style.css" />
<title>타입스크립트로 계산기 만들기</title>
</head>

<body>
<header>
<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>
</select>
<input type="number" />
<h2>=</h2>
<h3>정답</h3>
</section>
<button>결과는?</button>
</main>
<script type="module" src="/src/main.ts"></script>
</body>

</html>
15 changes: 15 additions & 0 deletions src/htmlElements.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const input1: HTMLInputElement = document.querySelector(
Copy link
Copy Markdown
Member

@hae2ni hae2ni Nov 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

역시 나누기 장인 황수빈,,, ❤️

"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"
Copy link
Copy Markdown
Member

@hae2ni hae2ni Nov 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

호옥시 그냥 id값으로 만들고 박는거?를 지양하고 다 하나하나 선택자를 이용하신 이유가 있을까요?

) as HTMLHeadingElement;
49 changes: 49 additions & 0 deletions src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import {
answer,
calculateButton,
input1,
input2,
operation,
} from "./htmlElements";
Copy link
Copy Markdown
Member

@hae2ni hae2ni Nov 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굳굳! 너무 깔끔하다!! 진짜 분리 === 황수빈


calculateButton.addEventListener("click", () => {
Copy link
Copy Markdown
Member

@hae2ni hae2ni Nov 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 화살표 함수말고 따로 명명하면 조금 더 가독성있지 않을까 싶어!

if (!checkInput()) return; // 입력 필드 검증

const num1: number = Number(input1.value); // 입력값을 숫자로 변경
const num2: number = Number(input2.value);

const result = calculate(num1, num2, operation.value); // 결과 연산

answer.textContent = String(result); // 정답 출력
});

/* 입력 필드 검증 함수 */
function checkInput() {
const isInputEmpty: boolean = isEmpty(input1.value, input2.value);
if (isInputEmpty) {
alert("뭐 잊은거 없어?");
Copy link
Copy Markdown
Member

@hae2ni hae2ni Nov 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

귀여웤ㅋㅋㅋㅋ

return false;
}
return true;
}

/* 입력 필드가 비었는지 확인하는 함수 */
function isEmpty(num1: string, num2: string): boolean {
return num1 === "" || num2 === "";
}
Comment on lines +21 to +33
Copy link
Copy Markdown

@moondda moondda Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모듈화 좋아용


/* 결과 연산 함수 */
function calculate(num1: number, num2: number, sign: string): number {
Copy link
Copy Markdown
Member

@hae2ni hae2ni Nov 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요오거 interface로 바꾸면!!

Suggested change
function calculate(num1: number, num2: number, sign: string): number {
interface CalculatorInput {
num1: number;
num2: number;
sign: string;
}
function calculate({num1, num2, sign}: CalculatorInput): number {

switch (sign) {
case "sum":
return num1 + num2;
case "sub":
return num1 - num2;
case "mul":
return num1 * num2;
case "divide":
return num1 / num2;
Copy link
Copy Markdown
Member

@hae2ni hae2ni Nov 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

num2가 0일때 예외사항으로 빼면 좋을 것 같아요!

default:
return 0;
}
}
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"isolatedModules": false,
"noEmit": true,

/* Linting */
Expand Down