Vanilla CSS + JS Tip Calculator

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  • the validation is working but it has to be tightened again. The error message is showing when a 0 or less is entered in the bill or number of people inputs field but the calculations are still going ahead.
  • non numbers can be entered but no error message or warning
  • this <label class="calc__billTotalLabel" for="billTotal">Bill:</label> label is not pointing to the input elements available. I cannot locate an element with the id billTotal
  • which is the same as this input <label class="calc__billTotalLabel" for="billTotal">Bill:</label> . I think you intention was to label this input element <input class="btn-container__input" type="number" id="people" value="1" /> . Change the value of the for attribute in the label to be the value of the id in the input element.
  • now to your question, create the following function:

   const dollarsUS = Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
      })
  

  to change the following statement from your js tipAmount.innerHTML = tipNumber;

  • use it as follows tipAmount.innerHTML = dollarUS.format(tipNumber);

  Marked as helpful

  0
• 

  Halí V.•230

  @halivertPosted over 3 years ago

  You could use the toFixed method result.toFixed(2)

  0