Responsive page using flexbox, desktop first design

Community feedback

• 

  willswordpath•35

  @WillSwordpathPosted about 3 years ago

  I want to point out three drawbacks in your implementation i've noticed at the first glance.

  1. Script issues. When I input '50%' into the tip-input, 'invalid input' error message was shown. You are using isNaN to judge the validity of input strings, and you use string directly to participate calculation with number, I regard those as bad practice. The same issue goes with bill and people input, they allow negative number. Consider using regex and number constructor instead of simple isNaN checking.

  2. Semantic issues. Focus style missing. Your did not provide tip-buttons focus style. The RESET button is even un-focusable, which might cause accessibility issues. You should use button instead or add tab-index attribute!

  3. Style issues. Tip Calculator container is too wide on desktop. Consider max-width. And there is many other style issues like color inaccuracy.

  Marked as helpful

  0

  ---

  

  P

  Karthik suryadevara•825

  @karthik2265Posted about 3 years ago

  @WillSwordpath thank you for the feedback

  0
• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Nice work on your submission. You may want to have another look at your output. The tip calculated is not added to the total amount a person is supposed to pay.

  Marked as helpful

  0

  ---

  

  P

  Karthik suryadevara•825

  @karthik2265Posted about 3 years ago

  @dewslyse thank you for the feedback i will look into it

  0