JS-GreenTea · 2yunseong · Nov 3, 2022 · Nov 3, 2022 · Nov 4, 2022 · Nov 4, 2022
diff --git a/docs/specification.md 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
@@ -8,37 +8,45 @@
 
   <title>Frontend Mentor | Tip calculator app</title>
 
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
   <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
+
   </style>
 </head>
 <body>
 
-  Bill
-
+  <p>Bill</p>
+  <input id="bill-input" placeholder="Bill"/>
   Select Tip %
-  5%
-  10%
-  15%
-  25%
-  50%
-  Custom
-
-  Number of People
-
-  Tip Amount
-  / person
-
-  Total
-  / person
-
-  Reset
-
-  <div class="attribution">
-    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-    Coded by <a href="#">Your Name Here</a>.
+  <div id="tip-percent-container"> 
+    <label>
+      5% <input class="percent-radio-btn" type="radio" name="percent" value="0.05"/>  
+    </label>
+    <label>
+      10% <input class="percent-radio-btn" type="radio" name="percent" value="0.1"/>
+    </label>
+    <label>
+      15% <input class="percent-radio-btn" type="radio" name="percent" value="0.15"/>
+    </label>
+    <label>
+      25% <input class="percent-radio-btn" type="radio" name="percent" value="0.25"/>
+    </label>
+    <label>
+      50% <input class="percent-radio-btn" type="radio" name="percent" value="0.5"/>
+    </label>
+    <label>
+      <input id="custom-tip-input" type="text" ><input class="percent-radio-btn" type="radio" name="percent" value=""/>
+    </label>
   </div>
+  <p>Number of People</p>
+  <input id="people-input">
+  <p>Tip Amount</p>
+  <p>/ person</p>
+<div id="tip-amount-result">0.00</div>
+  <p>Total</p>
+  <p>/ person</p>
+  <div id="total-result">0.00</div>
+  <input type="button" value="Reset"/> 
 </body>
+<script src="./src/index.js"></script>
+
 </html>
diff --git a/src/index.js 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);
+}