[tip-calculator-app] ddori(조배경) 미션 제출합니다. by baegyeong · Pull Request #2 · JS-GreenTea/tip-calculator-app

baegyeong · 2022-11-06T18:11:29Z

이번 학기는 앱을 하다 보니 확실히 js 공부량이 줄어서 혼자 힘으로 미션을 해내기까지 시간이 꽤 걸렸던 것 같습니다. 이번 미션은 전에 페어 하면서 배웠던 것들이 떠올라서 혼자 적용해보는 시간이 되어 유익했습니다! 반응형을 혼자 짜는 게 처음이었는데, 이 방법이 맞나 잘 모르겠네요... 그리고 변수명, css에 대해 더 공부해야겠다고 느꼈습니다. 또 한 가지 느낀 점은 요구 사항을 명확히 하는 게 중요한 것 같습니다. 이번에는 잘 작성하진 못했는데, 코드를 작성하다 보니 필요한 요구사항들이 자꾸 생각나서 앞으론 잘 정리 해야겠다고 생각했습니다!

loopy-lim

코드 잘 읽었습니다!
show와 event, 복잡한 함수를 잘 나눈 코드를 읽었습니다. CSS도 물론 겹치는 것은 잘 합쳐서 더 읽기 좋았습니다.
다만 아쉬운 점이 몇가지 있는데, 조금만 나열해보자면,

CSS에서 %를 쓰는 것은 저는 매우 좋아합니다. 다만, %를 쓰기전에 부모의 CSS의 크기를 짐작 가능하도록 고정된 크기(ex. px, rem, vw)같은 것을 같이 곁들여 쓰면 좋습니다.
위의 내용에 연장선상에서 375px보다 작아지면 자유롭게 변할 수 있도록 px로 하는 것보다 %같은 단위를 사용하면 좋습니다.

이번 미션도 시간이 없어 힘들었을텐데 수고 하셨습니다.

loopy-lim · 2022-11-07T00:46:18Z

app.js

+  }
+}
+
+function clickedBtn(event) {


Button을 Click 한다는 것에서 직관적으로 받아들일 수 있어 좋은 의미인것 같습니다.
다만 clickedBtn은 변경된 button이라는 생각이 들어서 clickBtn같이 동사형을 쓰면 더욱 직관적인 코드가 될 것 같습니다.

loopy-lim · 2022-11-07T00:56:42Z

app.js

+}
+
+function showResult() {
+  decideZero();


showResult()가 결과를 보여주는 부분인 것은 알기쉬워 좋았습니다.
다만 0으로 나누는 경우 거치지 않고 출력하게 되었습니다.
0으로 나누는 부분을 검사하여 decideZero()를 출력하고, return을 하면 더욱 깔끔한 코드가 될 것 같습니다.

loopy-lim · 2022-11-07T00:59:37Z

app.js

+for (let i = 0; i < selectBtn.length; i++) {
+  selectBtn[i].addEventListener("click", (e) => clickedBtn(e));
+}


for로 순회하면서 selectBtn에 함수를 넣는 것이 좋았습니다.
다만, Array.prototpy을 이용하면 더 깔끔한 코드가 될 수 있습니다.
또한 addEventListener의 경우에는 this 바인딩이 가능하여 함수를 집어 넣어도 됩니다.

selectBtn.forEach((button) => { button.addEventLisnter("click, clickedBtn); }

loopy-lim · 2022-11-07T01:01:29Z

style.css

+.bill,
+.number {
+  margin: 10px 0 20px 0;
+  border: none;
+  background-color: hsl(189, 41%, 97%);
+  color: hsl(184, 14%, 56%);
+  height: 35px;
+  text-align: right;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  font-size: 24px;
+  cursor: pointer;
+}


오!! 이렇게 하니깐 훨신 CSS가 깔끔해지네요!

j8won

이번 스프린트도 수고하셨습니다!!

j8won · 2022-11-09T05:09:45Z

index.html

+    <title>Frontend Mentor | Tip calculator app</title>
+  </head>
+  <body>
+    <div class="top-content">SPLI</div>


svg 파일을 사용하지 않고 로고를 직접 입력한 이유가 궁금합니다!

아 어쩐지..저것도 svg 파일이 있는 줄 몰랐어요..ㅎㅎ

j8won · 2022-11-09T05:14:30Z

style.css

+
+.select-btn {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);


grid에서 repeat()을 사용할 수 있는 건 이번에 처음 알았어요!

j8won · 2022-11-09T05:15:09Z

style.css

+  border-radius: 5px;
+  background-color: hsl(189, 41%, 97%);
+  color: hsl(183, 100%, 15%);
+  text-indent: -5%;


text-indent까지... 꼼꼼한 디자인 반영이네요

j8won · 2022-11-09T05:26:24Z

app.js

+}
+
+customTip.addEventListener("keyup", inputCustom);
+peopleNum.addEventListener("keyup", showResult);


input이 여러 개 있으면 사람들은 대부분 위에서 아래로 입력하는 경향이 있지만, 아닌 경우를 고려해 어느 input이든 showResult가 이벤트 리스너로 있으면 좋을 것 같아요

2yunseong

함수는 한 가지 기능만 한다 라는 고민을 많이 하신걸로 보여요. 학교 일정으로 바쁘셨을텐데 고생하셨습니다.

2yunseong · 2022-11-09T08:18:27Z

app.js

+  for (let i = 0; i < Object.keys(selectBtn).length; i++) {
+    selectBtn[i].classList.remove("clicked");
+  }


Javascript에서 제공하는 api를 사용해봐도 좋을 것 같습니다!

Suggested change

for (let i = 0; i < Object.keys(selectBtn).length; i++) {

selectBtn[i].classList.remove("clicked");

}

const selectBtnsKey = Object.keys(selectBtn) ;

selectBtnsKey.forEach((element) => {

// ... some logic

})

2yunseong · 2022-11-09T08:18:59Z

app.js

+const tipAmount = document.querySelector(".tip-amount");
+const totalAmount = document.querySelector(".total-amount");
+const inputBill = document.querySelector(".bill");
+const selectBtn = document.querySelectorAll("button");


배열이거나 컬렉션인 경우 변수명에 복수형을 의미하는 s를 붙여주면 좋을것 같습니다.

Suggested change

const selectBtn = document.querySelectorAll("button");

const selectBtns = document.querySelectorAll("button");

baegyeong added 6 commits November 6, 2022 02:57

docs: 요구사항 작성

12a67c0

feat: css 적용

ee6928b

feat: input에 따른 결과 출력

7500f53

feat: 버튼 클릭이벤트 구현

255fb3f

feat: custom input 반영, number 0값에 대한 처리

f8176e0

feat: 반응형 css 구현

92a6ebb

loopy-lim approved these changes Nov 8, 2022

View reviewed changes

j8won approved these changes Nov 9, 2022

View reviewed changes

2yunseong reviewed Nov 9, 2022

View reviewed changes

-  for (let i = 0; i < Object.keys(selectBtn).length; i++) {
-    selectBtn[i].classList.remove("clicked");
-  }
+const selectBtnsKey = Object.keys(selectBtn) ;
+selectBtnsKey.forEach((element) => {
+ // ... some logic
+ })

	const selectBtn = document.querySelectorAll("button");
	const selectBtns = document.querySelectorAll("button");

Conversation

baegyeong commented Nov 6, 2022

Uh oh!

loopy-lim left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

j8won left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

2yunseong left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants