Tip Calculator App

Community feedback

• 

  Gregor de Cillia•190

  @GregorDeCillia

  Posted 3 days ago

  Nice work!

  You said you are mainly interested in feedback on the JS, so I'll focus on that. Before I get to some recommendations, I want to state that your code is very organized and the naming decisions were great. This is a very important aspect to keep growing whether you do markup languages or coding languages.

  Consider Continuous Evaluation

  It initially took me some time to ralise the outputs are only generated from the return key. It might be better to update them continuously as the user types. If things start lagging as a result (unlikely), you could add a debounce.

  Helper functions for input checks

  The input checks for the three inputs are very similar. To avoid duplication, you could add a helper function that performs the checks.

  function inputValid(input, error, checkZero = false) {
      if(input.value===""){
          showError(billAmount,error,"Can't be empty");
          return false;
      }
      else if(checkZero && input.value==="0"){
          showError(billAmount,error,"Can't be zero");
          return false;
      }
      else if(!isFloat(input.value)){
          showError(input,error,"Must be a number");
          return false;
      }
      return true;
  }
  

  Use the built-in validity checks

  Inputs have a validity property which could be used to simplify some of the logic.

  billAmount.validity
  // {badInput: false, rangeUnderflow: false, valueMissing: false,
  //   valid: true, ...}
  

  For example, the isFloat() helper function could be replaced by a check against badInput. If you set min/max/step on an input, you can also see if things are inside or outside the range and wether the number of decimals is too high.

  <input type="text" id="number-of-people" placeholder="0"
   min="1" max="8005176000" step="1">
  

  if (numberOfPeople.validity.badInput) 
    showError(numberOfPeople,numberOfPeopleError,"Must be a number")
  if (numberOfPeople.validity.rangeOverflow)
    showError(numberOfPeople,numberOfPeopleError,"more people than world population")
  if (numberOfPeople.validity.stepMismatch)
    showError(numberOfPeople,numberOfPeopleError,"must be an integer")
  

  Closing remarks

  Very nice how you used <form> and <input type="radio">. It was also very interesting to see how you used grid for some things, where I used 2 levels of flex instead (e.g. .bill-input).

  00