Tip Calculator App with CSS and Javascript

Community feedback

• 

  Ayush Nath•360

  @Beats-AyushPosted over 2 years ago

  Nice job completing this challenge. There are some places where you could improve -

  • The hover state isn't persisting on the normal buttons.
  • Also upon selecting the bill and tip percentage, the error for the number of people is automatically coming up even though I haven't touched the input yet.

  You can have a look at my attempt to see what I meant.

  Marked as helpful

  0
• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  Hi, Below are some issue i like to point out:

  1. Consider your design for higher input and result. Your design breaks on getting large digits output. Limit to 2 decimel place only.
  2. On entering large number number overlap with icons.Add left padding to input field to avoid overlapping.
  3. For custom tip use input of type number with maximum percent limit of 100 or something.
  4. If you want you can remove arrow button on input using below code:

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  
    /* Firefox */
    input[type="number"] {
      -moz-appearance: textfield;
    }
  

  Tho arrow wont appear you can still increase or decrease the number using keyboad's arrow.

  Good Luck #happyCoding

  Marked as helpful

  0