Responsive tip calculator using CSS flexbox

Community feedback

• 

  Mariusz Olszewski•360

  @molszewski34Posted almost 3 years ago

  Hey. Calculation part works but there are few issues you should work with.

  1. Output should show .toFixed(2). This is required to show proper amount of currency. Right now when user provide 100$ for 3 persons it shows 33.333333.
  2. Reset button should show active status when user use number input and be disabled after use of reset function.
  3. Alert must be shown for person input and has red border when condition is false. 4.There are problems with responsiveness. Some elements as reset btn and output move out of fields and tip amount is not shown on lower resolutions. Especialy with big output. Fixing issue number 1 should also fix some of problems.
  4. It is ok to start function by clicking option button but its better to start it with one of inputs - person field or bill.

  Checked on firefox and chrome.

  Marked as helpful

  0

  ---

  

  Michael Morrison•500

  @mjmorrison10Posted almost 3 years ago

  @molszewski34 Thank you.

  1. I never came across such an issue when testing it. In fact, all my totals per person ended in a regular number (10, not 10.50)
  2. I forgot about the reset button entirely.... Oops. Thanks!
  3. Alerts - There's no problems with the output if you put nothing in the number of people section. Recommend error message even if it's an optional input?

  Note to self: Noticed a bug where I can't touch the bill input on small screen due to error message?

  0
• 

  Olalekan Ogundele•290

  @whoiskekeanywayPosted almost 3 years ago

  Very good work here. there is a bug with the total amount per person. it displays the total amount of the bill not for each person, also center your main content on the laptop view.

  Marked as helpful

  0

  ---

  

  Michael Morrison•500

  @mjmorrison10Posted almost 3 years ago

  @whoiskekeanyway I have display: flex; align-items: center; justify-content; center; It should be centered, and there's no margins on the main container?

  I believe the total is accurate? If I put in a bill of $100, and a tip of 50%, increasing the total price to $150. Then with two people, that's $75. That's what is displayed when I input those numbers.

  Note to self: Found a bug when dividing by 0 people.

  0
• 

  Mariusz Olszewski•360

  @molszewski34Posted almost 3 years ago

  Yes. I see that span when in position: absolute moves over input and block it.

  0