Tip Calculator App - HTML, SCSS, and JS

Community feedback

• 

  Kitalphar•280

  @KitalpharPosted 3 months ago

  Greetings~

  Not sure if i can help with refactoring, as your code appears to be cleaner than mine, but i'll still try to write something hopefully helpful.

  It took me a little while to realise i have to press Enter to have the app calculate the values. Honestly without any instructions it makes it appear like the app is not working, it's a little better on phone, however another issue is the tip buttons also don't work until you press Enter, which on a phone requires that i tap on an input field and press enter. Personally i'd recommend having the values be calculated automatically, for example by using input event listeners on input fields. Your click events on the .percentage tip buttons could include a call to your findPercentage() function to handle the calculation of new values.

  A few other things to note:

  • <li> percentage buttons should have a tabindex for keyboard navigation.
  • Bill and Custom Tip input fields accept negative numbers, that should be fixed.
  • input field for the Number of People accepts decimals, that probably should be changed as well.
  • I see you've used a <div> for the input section design, nesting the <svg> and input field. You could instead style the input field, set the background-color and set the svg as the background-image of the input, or use the shorthand, for example: background: no-repeat center left 1rem / 0.78rem url(./images/icon-dollar.svg);

  Hope i was able to help a little.

  Have a nice day~

  Marked as helpful

  1

  ---

  

  P

  James D•460

  @jdillard2532Posted 3 months ago

  @Kitalphar This is great feedback. I will make the adjustments. Thanks again

  0