Responsive Tip Calculator App Using SCSS and JS
Design comparison
Solution retrospective
I did my very best for this challenge trying to make it look as close as the design as well as the functionalities. I added some try catch code so that inputs would only accept valid numbers.
I would highly appreciate if you could leave a feedback to my solution even more if you leave some tips on how to do some of the stuff better.
Community feedback
- Account deleted
Hi,
Your solution looks good but you have some functionality issues;
- First thing I noticed is that you have the numbers for
tip amount/person
andtotal/person
mixed up, thetip is the total
and thetotal is the tip
. - The inputs do not only accept numbers, but also allows every key on the keyboard, so that alone may come with a lot of errors.
- The
function that handles the output
is only called when youselect a tip
, so no matter what I do I have to always end with selecting the tip otherwise it won't work. You should refactor it to only be called when none of the inputs are empty and it be called no matter the sequence you enter the numbers.
You on the right track but the functionality still needs some work.
Keep coding👍.
Marked as helpful0@Briancarlo24Posted about 3 years ago@thulanigamtee Not gonna lie. Even I got a bit confused with naming variables, It is still a challenge for me at this point.
Should I add If(!Number || Input < 0) {code here} so that it will only accept number? This is how I understand it.
I intentionally made the function to call the output only when you select a tip. At least that's how I understand it. However if it is bad or at least not recommended. I am more than happy to change it :D
Thank you for your feedback <3
0Account deleted@Briancarlo24 You can check out my solution.
I made an
array of keys
that are to be allowed, but there is a lot of other ways to do, like usingregular expressions
0 - First thing I noticed is that you have the numbers for
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