Design comparison
Solution retrospective
Any feedback would be appreciated. I've been studying for a few months now and this was the first project I actually completed and coded from a blank slate that wasn't a tutorial. Super proud and its giving me the drive for more.
Community feedback
- @ChamuMutezvaPosted over 3 years ago
- There are labels with the following:
for="bill
andfor="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 helpful1 - There are labels with the following:
- @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 - @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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord