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 팁 입력이 유효한지 판단하는 기능 +- 인원을 입력하는 기능 +- 인원의 입력이 유효한지 판단하는 기능 +- 인당 팁 금액을 계산해 보여주는 기능 +- 인당 총 지불액을 계산해 보여주는 기능 +- 내용을 모두 초기화 하는 기능 diff --git a/index.html b/index.html index 0a2739a..356eea1 100644 --- a/index.html +++ b/index.html @@ -8,37 +8,45 @@ Frontend Mentor | Tip calculator app - - Bill - +

Bill

+ Select Tip % - 5% - 10% - 15% - 25% - 50% - Custom - - Number of People - - Tip Amount - / person - - Total - / person - - Reset - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. +
+ + + + + +
+

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..51a40d4 --- /dev/null +++ b/src/index.js @@ -0,0 +1,77 @@ +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"); +let bill = 0; +let people = 0; +let tipPercent = 0; +let tipPerPeople = 0; +let total = 0; + +const renderWarningStatus = () => { + // some logic... +}; + +const isVaildInput = (target) => { + return !isNaN(target); +}; + +const render = () => { + const vaildCheckList = [bill, people]; + if (!vaildCheckList.every((element) => isVaildInput(element))) { + // handle bad input ... + console.log("bad bill input!"); + } + calcResult(); + renderTipPerPeople(); + renderTotal(); +}; + +const printState = () => { + console.log("bill:", bill); + console.log("people:", people); + console.log("tip:", tipPercent); +}; + +const onChangeBill = (e) => { + bill = +e.target.value; + render(); +}; + +const onChangePeople = (e) => { + people = +e.target.value; + render(); +}; + +const onChangePercentRadio = (e) => { + tipPercent = +e.target.value; + render(); +}; + +const calcResult = () => { + calcTipPerPeople(); + calcTotal(); +}; + +const calcTipPerPeople = () => { + tipPerPeople = (bill * tipPercent) / people; +}; + +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) { + percentRadioBtn.addEventListener("change", onChangePercentRadio); +}