tip calculator

Community feedback

• 

  Amin Alizadeh•200

  @M-AminAlizadehPosted over 1 year ago

  Hi @luka-tchanukvadze

  First I want to say I'm happy to see you finished the project

  These are my suggestions for this project to make it much better and similar to the design:

  • Please try to use semantic tags instead of div tags because it's much better for accessibility and SEO.

  • In the Bill, Select Tip, and Number of people sections for the input part you use type="text" I suggest using type="number" instead of that because these inputs values can't be alphabet it's only can be numeric and dot.

  • Please try to use the proper names for your classes I suggest you use BEM for more info about this method you can check out this link.

  • In the index.js file you get select tip numbers individually but you can do this by giving all of them the same class for example select-tip__btn and using querySelectorAll it will give you an array of them and you can loop inside them.

  • As you see in this link you repeat the same code 5 times and one of the principles of clean code is DRY (Don't repeat yourself) you should put this event listener inside a loop (forEach or for ) loop.

  • According to the design you should show the error when the user put 0 in the Number of people section by showing the error message on top of it and making the border of the input red but you use alert instead of that (alert is not good for the UX).

  • Your UI is acceptable but there is a way to be like the design (Please review the design and pay attention to the details like padding in inputs in select-tip buttons and other parts.

  I hope my suggestions beneficial to you

  Happy coding

  Cheers🎉

  Marked as helpful

  0