Tip Calculator

Community feedback

• 

  Anton Sukhadolets•330

  @SuhodolecAPosted over 2 years ago

  Hello! Well done!

  In my opinion, you could improve your solution using the next steps:

  1. input[type="number"] add next properties:

  • "cursor: pointer", shows mouse hover.
  • hover effect, using pseudo-class ":hover", ":focuse" like in layout.
  • add "border" with transparent color and by hover change color
  • add "transition" property for smooth animation

  For example:

  input[type="number"] {

  background-color: hsl(189, 41%, 97%);
  border-radius: 5px;
  font-weight: 700;
  height: 30px;
  margin: 0 auto;
  -moz-appearance: textfield;
  padding: 20px 10px;
  text-align: right;
  width: 100%;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border .3s linear;
  

  }

  input[type="number"]:hover { border-color: hsl(172, 67%, 45%); }

  input.bill:focus { border-color: hsl(172, 67%, 45%); outline: none; }

  Looks better!

  2. Your calculator twitches when calculating results. It happens because tip-price divs change the width. You can fix this add fixing "width" and "text-align: right" but it is better for displays using "inputs type text" with disabling property. I show with divs but better use "inputs".

  For example:

  .price { color: hsl(172, 67%, 45%); font-weight: 700; min-width: 220px; text-align: right; }

  And you should restrict max input value in js it exists in all calculators.

  Have a nice day and good luck!

  Marked as helpful

  1

  ---

  

  Ethan Julius•20

  @500EJPosted over 2 years ago

  @SuhodolecA Thank you so much! It looks much cleaner with the new outline. I was confused about how to use inputs instead of divs for the price labels though.

  0