From 1920b1684a292034dd8e267008a5fe9ad56c7d21 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Thu, 3 Nov 2022 10:01:56 +0900 Subject: [PATCH 01/10] =?UTF-8?q?docs:=20=EA=B8=B0=EB=8A=A5=20=EC=9A=94?= =?UTF-8?q?=EA=B5=AC=20=EC=82=AC=ED=95=AD=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/specification.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 docs/specification.md diff --git a/docs/specification.md b/docs/specification.md new file mode 100644 index 0000000..d141b66 --- /dev/null +++ b/docs/specification.md @@ -0,0 +1,12 @@ +# 기능 요구 사항 +- 금액(Bill)을 입력할 수 있는 기능 +- 금액(Bill)입력이 유효한지 판단하는 기능 +- 팁을 선택할 수 있는 기능 + - 5%, 10%, 15%, 25%, 50%, 사용자 설정 +- custom 팁을 입력하는 기능 +- custom 팁 입력이 유효한지 판단하는 기능 +- 인원을 입력하는 기능 +- 인원의 입력이 유효한지 판단하는 기능 +- 인당 팁 금액을 계산해 보여주는 기능 +- 인당 총 지불액을 계산해 보여주는 기능 +- 내용을 모두 초기화 하는 기능 From 0477b89cc2d6faa334217b657bc10cdbb5e0ac7d Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Thu, 3 Nov 2022 10:19:50 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20html=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 31 ++++++++++++------------------- 1 file changed, 12 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 0a2739a..41716b0 100644 --- a/index.html +++ b/index.html @@ -8,37 +8,30 @@ Frontend Mentor | Tip calculator app - Bill - + Select Tip % - 5% - 10% - 15% - 25% - 50% - Custom +
5%
+
10%
+
15%
+
25%
+
50%
+
Custom
Number of People - +
0
Tip Amount / person - +
0.00
Total / person - - Reset - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. -
+
0.00
+ \ No newline at end of file From 8abee329ecd9dceb98cda252ff76f95673ef67ae Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 22:55:02 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EA=B8=88=EC=95=A1=EC=9D=84=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 22 ++++++++++++---------- src/index.js | 14 ++++++++++++++ 2 files changed, 26 insertions(+), 10 deletions(-) create mode 100644 src/index.js diff --git a/index.html b/index.html index 41716b0..66d548d 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@ - Bill - +

Bill

+ Select Tip %
5%
10%
@@ -24,14 +24,16 @@
50%
Custom
- Number of People -
0
- Tip Amount - / person -
0.00
- Total - / person -
0.00
+

Number of People

+ +

Tip Amount

+

/ person

+
0.00
+

Total

+

/ person

+
0.00
+ + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..6b5f845 --- /dev/null +++ b/src/index.js @@ -0,0 +1,14 @@ +const billInput = document.querySelector("#bill-input"); +const tipAmountResult = document.querySelector("#tip-amount-result"); +const totalResult = document.querySelector("#total-result"); +let bill = 0; +const render = () => { + console.log("bill:", bill); +}; + +const onChangeBill = (e) => { + bill = e.target.value; + render(); +}; + +billInput.addEventListener("change", onChangeBill); From 969ac3256cc8d8d55e9e3bb1362becf3c93db1bc Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 23:05:33 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EA=B8=88=EC=95=A1=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=9D=B4=20=EC=9C=A0=ED=9A=A8=ED=95=9C=EC=A7=80=20?= =?UTF-8?q?=ED=8C=90=EB=8B=A8=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/index.js b/src/index.js index 6b5f845..0b8220d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,20 @@ const billInput = document.querySelector("#bill-input"); const tipAmountResult = document.querySelector("#tip-amount-result"); const totalResult = document.querySelector("#total-result"); let bill = 0; + +const renderWarningStatus = () => { + // some logic... +}; + +const isUnVaildInput = (target) => { + return isNaN(target); +}; + const render = () => { + if (isUnVaildInput(bill)) { + // handle bad input ... + console.log("bad bill input!"); + } console.log("bill:", bill); }; From b4111ed0dfbdafada485fd9e94dd33eb3b3cfbf7 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 23:14:37 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=ED=8C=81=EC=9D=84=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 5%, 10%, 15%, 25%, 50% --- index.html | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 66d548d..356eea1 100644 --- a/index.html +++ b/index.html @@ -17,13 +17,26 @@

Bill

Select Tip % -
5%
-
10%
-
15%
-
25%
-
50%
-
Custom
- +
+ + + + + + +

Number of People

Tip Amount

From 99a37abd5f42203a97659faad97077a6fd0c07aa Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 23:19:51 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EC=9D=B8=EC=9B=90=EC=9D=84=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.js b/src/index.js index 0b8220d..b098664 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,9 @@ const billInput = document.querySelector("#bill-input"); const tipAmountResult = document.querySelector("#tip-amount-result"); const totalResult = document.querySelector("#total-result"); +const percentRadioBtns = document.querySelectorAll(".percent-radio-btn"); let bill = 0; +let people = 0; const renderWarningStatus = () => { // some logic... @@ -24,4 +26,9 @@ const onChangeBill = (e) => { render(); }; +const onChangePeople = (e) => { + people = e.target.value; + render(); +}; + billInput.addEventListener("change", onChangeBill); From ea1c65c7f4cf514e6577f5a73878a7d095274204 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 23:26:13 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=EC=9D=B8=EC=9B=90=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=9D=B4=20=EC=9C=A0=ED=9A=A8=ED=95=9C=EC=A7=80=20?= =?UTF-8?q?=ED=8C=90=EB=8B=A8=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index b098664..be5940e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ const billInput = document.querySelector("#bill-input"); +const peopleInput = document.querySelector("#people-input"); const tipAmountResult = document.querySelector("#tip-amount-result"); const totalResult = document.querySelector("#total-result"); const percentRadioBtns = document.querySelectorAll(".percent-radio-btn"); @@ -9,26 +10,29 @@ const renderWarningStatus = () => { // some logic... }; -const isUnVaildInput = (target) => { - return isNaN(target); +const isVaildInput = (target) => { + return !isNaN(target); }; const render = () => { - if (isUnVaildInput(bill)) { + const vaildCheckList = [bill, people]; + if (!vaildCheckList.every((element) => isVaildInput(element))) { // handle bad input ... console.log("bad bill input!"); } console.log("bill:", bill); + console.log("people:", people); }; const onChangeBill = (e) => { - bill = e.target.value; + bill = +e.target.value; render(); }; const onChangePeople = (e) => { - people = e.target.value; + people = +e.target.value; render(); }; billInput.addEventListener("change", onChangeBill); +peopleInput.addEventListener("change", onChangePeople); From 90170d4542c8bab5d54c3772582f18489e47769e Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 23:33:24 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=ED=8C=81=EC=9D=84=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=ED=95=98=EA=B3=A0=20=EC=83=81=ED=83=9C=EB=A5=BC=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/index.js b/src/index.js index be5940e..f1ec743 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ const totalResult = document.querySelector("#total-result"); const percentRadioBtns = document.querySelectorAll(".percent-radio-btn"); let bill = 0; let people = 0; +let tipPercent = 0; const renderWarningStatus = () => { // some logic... @@ -22,6 +23,7 @@ const render = () => { } console.log("bill:", bill); console.log("people:", people); + console.log("tip:", tipPercent); }; const onChangeBill = (e) => { @@ -34,5 +36,13 @@ const onChangePeople = (e) => { render(); }; +const onChangePercentRadio = (e) => { + tipPercent = +e.target.value; + render(); +}; + billInput.addEventListener("change", onChangeBill); peopleInput.addEventListener("change", onChangePeople); +for (const percentRadioBtn of percentRadioBtns) { + percentRadioBtn.addEventListener("change", onChangePercentRadio); +} From e0e9b829b5d4533fc41b9b972281ae0e55c3b9e3 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 23:39:02 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=EC=9D=B8=EB=8B=B9=20=ED=8C=81=20?= =?UTF-8?q?=EA=B8=88=EC=95=A1=EC=9D=84=20=EA=B3=84=EC=82=B0=ED=95=B4=20?= =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8A=94=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/index.js b/src/index.js index f1ec743..a7fe75d 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ const percentRadioBtns = document.querySelectorAll(".percent-radio-btn"); let bill = 0; let people = 0; let tipPercent = 0; +let tipPerPeople = 0; const renderWarningStatus = () => { // some logic... @@ -21,6 +22,11 @@ const render = () => { // handle bad input ... console.log("bad bill input!"); } + calcResult(); + renderTipPerPeople(); +}; + +const printState = () => { console.log("bill:", bill); console.log("people:", people); console.log("tip:", tipPercent); @@ -41,6 +47,18 @@ const onChangePercentRadio = (e) => { render(); }; +const calcResult = () => { + calcTipPerPeople(); +}; + +const calcTipPerPeople = () => { + tipPerPeople = (bill * tipPercent) / people; +}; + +const renderTipPerPeople = () => { + tipAmountResult.innerText = tipPerPeople; +}; + billInput.addEventListener("change", onChangeBill); peopleInput.addEventListener("change", onChangePeople); for (const percentRadioBtn of percentRadioBtns) { From 51e67a1fb7a2ad817133206235b8325ac460c224 Mon Sep 17 00:00:00 2001 From: 2yunseong Date: Fri, 4 Nov 2022 23:41:51 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=EC=9D=B8=EB=8B=B9=20=EC=B4=9D=20?= =?UTF-8?q?=EC=A7=80=EB=B6=88=EC=95=A1=EC=9D=84=20=EA=B3=84=EC=82=B0?= =?UTF-8?q?=ED=95=B4=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/index.js b/src/index.js index a7fe75d..51a40d4 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ let bill = 0; let people = 0; let tipPercent = 0; let tipPerPeople = 0; +let total = 0; const renderWarningStatus = () => { // some logic... @@ -24,6 +25,7 @@ const render = () => { } calcResult(); renderTipPerPeople(); + renderTotal(); }; const printState = () => { @@ -49,6 +51,7 @@ const onChangePercentRadio = (e) => { const calcResult = () => { calcTipPerPeople(); + calcTotal(); }; const calcTipPerPeople = () => { @@ -59,6 +62,14 @@ const renderTipPerPeople = () => { tipAmountResult.innerText = tipPerPeople; }; +const calcTotal = () => { + total = bill / people; +}; + +const renderTotal = () => { + totalResult.innerText = total; +}; + billInput.addEventListener("change", onChangeBill); peopleInput.addEventListener("change", onChangePeople); for (const percentRadioBtn of percentRadioBtns) {