Responsive Tip Calculator using HTML, CSS and JavaScript

Community feedback

• 

  P

  Daniel•140

  @obriedanPosted over 2 years ago

  Hey John,

  Your submission looks great! A few thoughts while looking through your live preview.

  • Your <input> elements for "Bill" and "Number of People" are set to text. This allows a user to enter characters other than numbers which results in an error with your JS functions. Consider using type='number' instead.

  • On desktop, your container's max-width is set to 60%. This results in an overly squished container when viewing on a smaller laptop. Check with DEV Tools Responsive at around 1024px. You'll see the "Custom" input box is cut off slightly. To keep things responsive you could look into min(), max(), or clamp()

  • I'm not sure of the root cause, but there is some odd behaviour with the background and veritcal positioning of the container between viewport widths of 767/768 - probably to do with your media query, and again between 499/500.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  John Andrey Galingan•180

  @johnrookie-coderPosted over 2 years ago

  @obriedan thank you for your valuable feedback. I will definitely look into min(), max(), and clamp(). As well as do take notes about your suggestion. Once again thank you and have a great day.

  0