Responsive app using Flexbox, SCSS and Vanilla JS

Community feedback

• 

  T

  Chamu•13,150

  @ChamuMutezvaPosted over 3 years ago

  • There are labels with the following: for="bill and for="top-sell" , but I do not see the input elements being referred to. No inputs with those id's.
  • yes input elements are supposed to have labels for among other reasons, accessibility
  • the calculations, especially the total per person is not correct. For example a bill of 100 shared between 2 people at 10% should give you a a total of 55 per person.

  Happy coding

  Marked as helpful

  1
• 

  Hyun Don•105

  @hyundonnyPosted over 3 years ago

  Hello, @tekac!

  First of all, congrats on finishing your first project! :) I think you did a great job considering that it was your first project.

  That being said, I noticed some things that you might consider fixing.

  First off, the way your app is set up right now, you can't select a tip percentage until you've filled out the "number of people" input. This input is at the very end, so users should be able to type in the bill and a tip percentage before writing down the number of people.

  Moreover, if you select a tip percentage and write in a number of people, but leave out the bill, it results in an NaN for the total value. You probably want to postpone any calculations until all inputs are filled.

  In the mobile version of the app, the tip options are supposed to be in 2 columns, 3 rows, as opposed to the current 3 columns, 2 rows. Also, more padding is required for the label and the buttons. If you look carefully, the tip percentage area takes up more space than the other two input areas.

  Happy coding! :)

  1
• 

  tekac•40

  @tekacPosted over 3 years ago

  Thanks a ton for your feedback. I fixed the calculation..I didn't catch that it wasn't calculating per multiple people correctly! I will do some reading on the labels so I can fix appropriately.

  0