Hi @tloxiu!
Congrats on finishing another project! Here is my feedback:
- Your logo image conveys no important information necessary for the user to understand the page content so it should be decorative. Keep
alt
attribute empty or wrap your logo witha
element so it point's to home page like your alt text is saying. - You should add
text-align: right
for your.input-bill
and.input-people-number
inputs instead of adding odd padding like you did (padding: 0.4rem 0 0.4rem 17rem;
). If user input is long enough it will cut it since there is no space (i know it won't be case in this scenario but it is just bad practice). - I am using Firefox and in your inputs there are arrows. Find a way to remove them to match design.
- I believe using buttons for selecting tip is just wrong. Instead you should use
input
withtype="radio"
and the custom tip should be a radio input that when selected reveals ainput type="number"
. - It is hard to use your solution with keyboard. First of all you should add some
:focus-visible
styles for focused elements. Then it'd be nice to "calculate" when user click enter in last input field. Now it only calculates when i click on selected tip %. - There is a bug when i input numbers like: bill: 66, num of people: 3 and click on 15% tip, the output is: $3.3000000000003 and it should be fixed to two points after decimal point.
- Using the
!important
rule in CSS is generally considered to be bad practice because it overrides all other styles. You probably did something wrong if you have to use it.
Happy coding!
Marked as helpful