Skip to content
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.

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

[ 호은 ] #3

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

[ 호은 ] #3

wants to merge 6 commits into from

Conversation

hoeun0723
Copy link
Contributor

@hoeun0723 hoeun0723 commented Nov 7, 2023

계산기 프로젝트

🌮 무엇을:

  • 무엇을 개발했는지 짧게 설명해주세요! (개발 완료된 부분까지 설명)
  • 두개의 input 숫자 입력 받기
  • 사칙연산 기호 option들 중 하나 고르기
  • 결과는 ? 버튼을 누르기
  • 정답 부분에 정답 글자 대신 완료된 계산값 보여주기

🌮 어떻게:

  • const $ = (selector: string) => document.querySelector(selector);: $ 함수는 주어진 선택자에 해당하는 첫 번째 HTML 요소를 선택하는 함수이다. 선택자를 매개변수로 받고, document.querySelector를 사용하여 해당 요소를 선택했다.

  • const num1Input = $('input[type="number"]:nth-of-type(1)') as HTMLInputElement;: 첫 번째 숫자 입력 필드를 선택하고 해당 요소를 HTMLInputElement로 타입 캐스팅했다. $ 함수를 사용하여 선택자 'input[type="number"]:nth-of-type(1)'를 통해 첫 번째 숫자 입력 필드를 선택할 수 있도록 했다.

  • const num2Input = $('input[type="number"]:nth-of-type(2)') as HTMLInputElement;: 두 번째 숫자 입력 필드를 선택하고 해당 요소를 HTMLInputElement로 타입 캐스팅했다. $ 함수를 사용하여 선택자 'input[type="number"]:nth-of-type(2)'를 통해 두 번째 숫자 입력 필드를 선택할 수 있도록 했다.

  • const selectOperator = $('select[name="calculate"]') as HTMLSelectElement;: 연산자 선택 요소를 선택하고 해당 요소를 HTMLSelectElement로 타입 캐스팅했다. $ 함수를 사용하여 선택자 'select[name="calculate"]'를 통해 연산자 선택 요소를 선택할 수 있도록 했다.

  • const resultDisplay = $("h3") as HTMLHeadingElement;: 결과를 표시할 h3 요소를 선택하고 해당 요소를 HTMLHeadingElement로 타입 캐스팅했다. $ 함수를 사용하여 선택자 "h3"를 통해 h3 요소를 선택하도록 했다.

  • const calculateButton = $("button");: "결과는?" 버튼을 의미한다.

  • function calculateResult() { ... }: calculateResult 함수는 버튼 클릭 이벤트에 연결되는 함수로, 입력된 숫자와 선택된 연산자에 따라 계산을 수행하고 결과를 표시하는 역할을 한다. 결과는 resultDisplay에 표시된다.

  • if (calculateButton) { ... }: "결과는?" 버튼이 존재하면 버튼 클릭 이벤트에 calculateResult 함수를 연결한다. 그래서 결과 표시!

🌮 얼마나:

  • css를 안 해서 금방했습니다 허허..
  • 기본 템플릿 자체가 너무 훌륭하게 되어 있었어요..
  • 1시간도 안 걸린거 같음

🌮 구현 사항:

bandicam.2023-11-08.00-22-53-611.mp4

Copy link
Member

@hae2ni hae2ni left a comment

Choose a reason for hiding this comment

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

호으니! 진짜 넘넘 잘해줬다!! 코드도 넘 깔끔쓰하고 고생했어요!

@@ -9,7 +9,7 @@
</head>
<body>
<header>
<h1>혜인이의 계산기</h1>
<h1>호은이의 계산기</h1>
Copy link
Member

Choose a reason for hiding this comment

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

뿅 😍

@@ -0,0 +1,42 @@
const $ = (selector: string) => document.querySelector(selector);

const num1Input = $('input[type="number"]:nth-of-type(1)') as HTMLInputElement;
Copy link
Member

Choose a reason for hiding this comment

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

머야머야! 선택자 장인이자나!!! 진짜 장하다ㅠㅠ 넘넘 잘해

@@ -0,0 +1,42 @@
const $ = (selector: string) => document.querySelector(selector);
Copy link
Member

Choose a reason for hiding this comment

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

querySelector로 해줬군요!


let result: number;

switch (operator) {
Copy link
Member

Choose a reason for hiding this comment

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

굳굳! 깔끔하다!

result = NaN;
}

if (isNaN(result)) {
Copy link
Member

Choose a reason for hiding this comment

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

아예 예외부분을 빼준 거 너무 좋은 거 같애! 굳굳

Copy link

Choose a reason for hiding this comment

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

예외 빼준 부분 좋당

}

if (calculateButton) {
calculateButton.addEventListener("click", calculateResult);
Copy link
Member

Choose a reason for hiding this comment

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

혹시 바로 click이벤트를 안 넣은 이유가 있나요?

Copy link

@SooY2 SooY2 left a comment

Choose a reason for hiding this comment

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

넘 깔끔하게 잘했당!! 수고해써~!~!

result = NaN;
}

if (isNaN(result)) {
Copy link

Choose a reason for hiding this comment

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

예외 빼준 부분 좋당

}
}

if (calculateButton) {
Copy link

Choose a reason for hiding this comment

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

if안에 calculateButton를 넣어준 이유가 몬가요..???? calculateButton가 참/거짓으로 판별되는지 궁금해요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

계산기 프로젝트 구현 내용
3 participants