Tip calculator using Vanilla JS and Sass

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 3 years ago

  Some issues has been raised in the report which among other things may include the following:

  • the calculations to me are not what i expect - eg a bill of $100 for a single person an a tip rate of 10 percent should give a tip amount of $10 and a total amount of $110. The total amount according to your calculations is $10, that is not correct. For 2 people i would expect the tip amount to be $5 per person and a total of $55 per person. Your total per person is not changing.
  • alt values can be written as alt="" for decorative images, other that let your alt values be descriptive for the benefit of assistive tech users. Values such as logo, image, icon , graphic should be avoided as screen readers announce such words automatically. <img src="./images/logo.svg" alt="logo" class="logo">
  • an h1 heading should be the first heading in your site. Heading elements should follow a sequential order without skipping headings.
  • this heading is not closed correctly <h3 class="label label--left">Select tip %</h>
  • the for attribute is used with labels not heading elements. <h3 for="people" class="label label--left">Number of people</h3>. Yes your input elements should have labels - that's beneficial to assistive tech users , it gives a purpose of the input element.

  Marked as helpful

  0
• 

  Dharmik_487•1,740

  @Dharmik48Posted about 3 years ago

  Hey👋,

  Your solution is really Great! It looks and functions really well! Though some improvements I would suggest are that first you should make the card centered like in the design (maybe remove the 10 rem padding from the bottom). To center your can add a 100vh of height to the body and then add display: grid; and place-items: center to center it!

  Another is that you can try to customize the increment and decrement arrows in the inputs or just hide them cause they are ruining the looks!

  And also there's a minor issue of overflowing of the Total tip amount when it is a very big number.

  Also in the custom tip input, initially there's no border so when the user clicks on it you are adding a border so, it suddenly pops up the heights of the boxes beside it suddenly increases and doesn't look good so either remove the border completely or add a transparent border when it is not focused!

  Apart from these minor issues I really liked your solution, Keep it up🤗.

  Marked as helpful

  0

  ---

  

  Anuar•190

  @anuarshaidenovPosted about 3 years ago

  @Dharmik48 Thanks a lot for your feedback! I managed to fix the bugs that you suggested I should fix. Really appreciate it, God bless you

  0

  

  Dharmik_487•1,740

  @Dharmik48Posted about 3 years ago

  @anuarshaidenov Great! Feels wayyy.. better now👍

  0