@alekseibodeev
Posted
Nice solution!
Here are some things you can improve:
Semantic input type
HTML5 has a lot semantic input types with built-in constraint validation. You can use appropriate type to prevent user from entering non-numeric data.
<input type="number" />
You can style it as a text input with following code:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number] {
appearance: textfield;
-moz-appearance: textfield;
}
Disabled state awareness
By providing appropriate styles you can ensure that user understand what's happening on the screen. You can style cursor to give user an extra hint that button does not clickable:
button[disabled] {
cursor: not-allowed;
}
User feedback
It's good to provide additional feedback to user when something off. For example, tip calculator does not really want to "eat" negative tip %, amount of people or bill. It would be nice to show custom error message as you did for zero value.
Hope that was helpful.
