Tip calculator app - HTML, SCSS, JS, FlexBox, Grid, mobile-first & BEM
Design comparison
Solution retrospective
Hi everyone š
I upped the ante again on this one and really had to persevere to improve my knowledge and experience with JavaScript.
I'm really happy with the result and the styling. I also really appreciate the ui design on this challenge, it looks great š
Any feedback that could help me to improve would be very welcome, with a focus on the following:
- i'd like to learn a more elegant way to remove special characters on the inputs (perhaps some thoughts on RegEx)
- is there a way to avoid leading zero's, for example at the moment you could enter 000100 into the inputs
- finally I chose <button> for the tip inputs, is there some more suitable/accessible mark up
Until next time, happy coding š¤
Community feedback
- @emestabilloPosted almost 3 years ago
Hi @darryncodes, looks pretty good! I personally might try radios for the tips, but that's just my preference.
Here's a short article on how to deal with the leading zeros.
Two things I observed is that the grand total for each person is not taking the tip amount, and any bill that has less than $100 would result to
NaN
. I haven't done this challenge so I don't know if that is intended behavior. There's an error on the console from the regex that might be causing it.Hope this helps!
Marked as helpful1@darryncodesPosted almost 3 years agoHi @emestabillo, thanks for taking the time to comment.
Radio's is an interesting call.
Thanks for the article link, that website looks excellent. However I still haven't managed to make it work with the code snippet š
I've fixed the NaN and console error, I had some random bits and pieces knocking about in the code that i left behind accidentally whilst testing stuff out!
1 - @GitHub-dev12345Posted almost 3 years ago
Your design have over size I suggest you, you this css property to decrease and increase your whole size of design , šš
0 - @GitHub-dev12345Posted almost 3 years ago
Good Work Bro ā¤ļøš My small suggestion : 1.In Card design CSS Code Used this:
transform : scale(0.8); this property decrease the size of card. š
large size for increase the number of scale & small size for decrease the number of scale
I hope you find this helpful
0@darryncodesPosted almost 3 years agoHi Dev, thanks a lot and for the comment.
I don't really understand what you mean - what problem would your feedback solve?
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord