Responsive tip calculator app main using flexbox & grid
Design comparison
Solution retrospective
I was thinking that this work it would take me a lot of time the JS part, but I was able to do it in a relatively short amount of time.
What challenges did you encounter, and how did you overcome them?There were a lot of variables for me, that lead me to mistakes in the code, but with time I overcome them.
What specific areas of your project would you like help with?Any feedback and comments are welcome.
Community feedback
- P@toshirokubotaPosted about 2 months ago
Hi. First of all, congratulations on finishing the challenge faster than you anticipated. Your layout looks almost identical to the original design, which I found was impressive. I often struggled to make it exactly like that.
You were concerned about the number of variables. Maybe you could take advantage of some built-in functions on Form, such as FormData, and Object.fromEntries. In your case, something like that.
const data = Object.fromEntries( new FormData(document.getElementById('form'));It converts all named inputs into entries in JSON object. (The inputs need to be 'named'.) So if you name the first input as 'bill', you can find the value by
data['bill']. I found that the approach makes the tracking of all the input fields easier and reduce the number of variables.You could also do
form.reset()to clear all the input fields, rather than doing it one by one manually.Hope this helps a bit. Good luck!
0
Please log in to post a comment
Log in with GitHub
Join 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