tip calculator

Community feedback

• 

  P

  Vishika•400

  @VishikaPosted 3 months ago

  Hey, great work on your solution, I really like your javascript, it was very well organised and easy to read!

  Some tips on your solution:

  • I quite liked how you made the whole output section into a button, I really really at odds with how to get the user to signal input! Although it might be helpful to indicate it can be used as a button with `` and something like:

  .calculated_amount:hover {
      cursor: pointer;
      opacity: 80%; /* or a background / color change */
  }
  

  • I noticed that you had been playing around with the the custom tip inputs width, I had a similar, though different problem, instead of specifying the width at different media queries you can simply have the following:

  .input_btn {
      width: 100%;
      box-sizing: border-box;
  }
  

  • In your media query, update the grid template rows, so you don't get an extra line when you shift to three columns:

  screen and (min-width: 1000px) {
      .tip-buttons {
          grid-template-rows: repeat(2, 1fr);
      }
  }
  

  • Finally your #bill_amount and .party inputs would look better with width: 100%; at certain screen widths :)

  0
• 

  matt2282•310

  @matt2282Posted 3 months ago

  Good job on the overall layout of the app, but I would recommend giving this another shot. I can't seem to get your calculator to give any values or at least when it does output some values they are not correct.

  The grey "bill" and "number of people" and "custom" divs do not go 100% of the container and they don't line up with everything else. The text in placeholder for Custom also isn't centered.

  Some additional features you may consider adding: -border around the custom tip, bill, number of people and amount to know you have it selected. -when you press reset it may be preferential to set 0 as the placeholder and not have it be an actual zero. Additionally, having the reset unselect the selected tip value if you prefer. -error checking for zero and subsequent error message -allow only positive integers as the input -greying out the reset button after it is pressed.

  0