Tip calculator app uding GRID and JS

Community feedback

• 

  Ahmed•430

  @AhmedLebda

  Posted almost 3 years ago

  Hi @Davee89 Great Code !

  You just need to add some validations for input fields , for example:

  • users shouldn't be able to enter negative values (since you use a number type input this can be easily done with a min="0" attribute to the input element).
  • users shouldn't be able to enter anything but numbers in the input fields.
  • just a plus point you can make result calculated whenever user changes any setting ( input values - or button clicks )

  This is my Solution To this challenge, a review is really appreciated.

  Happy Coding

  12

  Marked as helpful
• 

  Hamid Mahmood•540

  @Hamid210545

  Posted almost 3 years ago

  Hello ..... you have done an amazing job.... but let me correct you ... your card is not in center of the screen as per as design requirements.... but you can fix it by taking one simple step: by setting the properties of body tag { display: flex ; justify-content: center ; align-items: center ; } ............... I hope this will fix your problem............ Thanks!

  00

  Marked as helpful
• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted almost 3 years ago

  Hi Dawid Matras, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  To make the calculation to be done when any value of the inputs change, we can do this:

  first let's declare a global variable with let I put its name as "tipOut" and put its initial value as zero!

  let tipOut = 0

  inside the repetition structure that you made in btn I put it receiving the tip calculation:

  let tip = Number(bill.value) * (parseFloat(btn[i].textContent) / 100);
  tipOut = type
  

  Then I went to the people variable event, and put:

  people.addEventListener("input", function () {
    if (people.value >= 0) {
      people.classList.remove("wrong");
      label.classList.add("hidden");
    }
    showTips(tipOut)
  });
  

  and when the input value is changed the tip display function is called!

  After I did that, some bugs appeared when the number appeared on the screen, I managed to solve it this way:

  tipAmount.innerText = "$" + tipFinal.toFixed(2);
  totalAmount.innerText = "$" + totalFinal.toFixed(2);
  

  See if it's clear what I did!

  The rest is great!

  I hope it helps... 👍

  00

  Marked as helpful