Tip calculator app uding GRID and JS

Community feedback

• 

  Ahmed•400

  @AhmedLebdaPosted about 2 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

  Marked as helpful

  1

  ---

  

  Dawid Matras•20

  @Davee89Posted about 2 years ago

  @AhmedLebda

  • 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).

  That's really helpfull! Already changed that!

  • users shouldn't be able to enter anything but numbers in the input fields.

  I think, that if I put type=numbers then you cant enter anything but numbers or dots correct?

  • just a plus point you can make result calculated whenever user changes any setting ( input values - or button clicks )

  That part I'm not sure how to make to be honest!

  0

  

  Ahmed•400

  @AhmedLebdaPosted about 2 years ago

  @Davee89

  • I think, that if I put type=numbers then you cant enter anything but numbers or dots correct?

  right , you get automatic validation that the entered text is a number but user still can type text in the input field, it won't cause a problem I think but u can replace any input other than numbers with just "", so users can't enter any letters.

  plus letting users able to type letters may cause some confusion in specific cases for example (1e3 will be equal to 100)

  • That part I'm not sure how to make to be honest!

  by adding event listeners on the inputs just like how u did the custom field in the tip amount section

  Marked as helpful

  0
• 

  Hamid Mahmood•540

  @Hamid210545Posted about 2 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!

  Marked as helpful

  0
• 

  Adriano•38,080

  @AdrianoEscarabotePosted about 2 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... 👍

  Marked as helpful

  0