-
Notifications
You must be signed in to change notification settings - Fork 0
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
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this 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> |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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) { |
There was a problem hiding this 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)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아예 예외부분을 빼준 거 너무 좋은 거 같애! 굳굳
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
혹시 바로 click이벤트를 안 넣은 이유가 있나요?
There was a problem hiding this 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)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
예외 빼준 부분 좋당
} | ||
} | ||
|
||
if (calculateButton) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if안에 calculateButton를 넣어준 이유가 몬가요..???? calculateButton가 참/거짓으로 판별되는지 궁금해요!
계산기 프로젝트
🌮 무엇을:
🌮 어떻게:
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 함수를 연결한다. 그래서 결과 표시!
🌮 얼마나:
🌮 구현 사항:
bandicam.2023-11-08.00-22-53-611.mp4