Tip Calculator

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!

1. 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!