Mobile First approach Tip Calculator | M/W

Community feedback

• 

  Ibrahim Morad•380

  @IbrahimMuradPosted about 2 months ago

  I looked at you code again. It looks a lot better.

  Here are some other suggestions for improvements:

  1. You should remove class="tip-btn" from the custom tip input, this makes this input takes the styles of other buttons. Let it take the common style of input[type="number"], which you did, but the class ruins it when hovered.

  2. Add error messages to other inputs, same as number of customers, and for the style, do not be afraid of breaking everything, I found that all inputs of type number are the same, all labels are the same, and all error messages are the same, you will just add other error messages the same way you did with number of people.

  3. number of people has more than probable bad inputs, zero, negative, and decimal. So, I would recommend leave it empty in the HTML and fill it based on the input, "can't be zero", "can't be negative", or "must be a whole number".

  4. (I am not a js expert but in this project) I found that using Number to convert input value into number is much better, ParseFloat was not predictable for me. Numbers in js can be integers and floats, and the input with type number can not accept alphabets, so Number is more convenient.

  5. Use const instead of let. Any js styling checker will murder you if it sees your js script, they hate it.

  let numOfPeopleValue = parseFloat(numOfPeople.value) || 1; // Default to 1 if invalid
  
    if (!numOfPeopleValue) {
      errorMessage.classList.remove("hidden");
  
      tipTotal.textContent = "$0.00";
      total.textContent = "$0.00";
      return;
    }
  

  Regardless of this project, the condition in if statement will always be false, because parseFloat(numOfPeople.value) has two boolean options, true if it is a value or false if it is NaN, but you did add || 1, so if it is NaN, it will become 1, so !numOfPeopleValue will always be false.

  Marked as helpful

  0

  ---

  

  Michael Wilson•260

  @mikewil245Posted about 2 months ago

  @IbrahimMurad Thank you for this very detailed observation. I will work on at some point .

  1
• 

  Ibrahim Morad•380

  @IbrahimMuradPosted about 2 months ago

  • You need to add more validations to the inputs, for example, number of people can not be negative or decimal values, bill can not be negative, and custom tip can not be negative and can not exceed 100.

  • Some styles are not applied, such as the chosen tip button should have a different color to indicate it has been chosen.

  Overall, great job. Keep up.

  Marked as helpful

  0

  ---

  

  Michael Wilson•260

  @mikewil245Posted about 2 months ago

  @IbrahimMurad Thank you

  1