Responsive Tip calculator app made with pure HTML, CSS and vanilla js
Design comparison
Solution retrospective
Hey, guys! This is my first project submission. It took me a while since I'm new to programming in HTML, CSS, and JavaScript.
What did you find difficult while building the project? I found some difficulties in DOM manipulating and maybe optimizing my code. It was a nice challenge for me to learn new things.
Any feedback is greatly appreciated! Thanks!😊
Community feedback
- @GesierePosted over 1 year ago
Hi Tiago, nice one. You did well but like the comment above I faced the same issues.
-
When I add 0 on the number of people text field, and the error appears. I expect that the error disappears if I correct it, by adding a number greater than 0. But the error still persist. That needs to be corrected.
-
To change your input border on focus, you need to select that particular input element and add the focus pseudo element eg Input: focus{ border: 2px solid #whatever color you want } For your first you did well but I suggest trying newbie projects first before coming to Junior. Happy coding.
Marked as helpful1@brtiagoPosted over 1 year ago@Gesiere
Thank you for the feedback. I fixed the error. Hope it works fine this time. Any feedback is greatly appreciated. :)
0 -
- @mksoofianPosted over 1 year ago
Hi Tiago,
I really appreciate your submission because your code helped me overcome the challenges I left unsolved with my code. I also only used vanilla JS and CSS!
-
I could not get the border color to change on focus because by default, the browser was highlighting the input a different color. My solution from your code was setting "outline:none".
-
I wasn't able to get my results to calculate as I input numbers in the text field. It would only update after clicking away from the input. My solution based on your code was to run my updateAll() function in every input event listener.
This actually revealed to me bugs in your code. Your app will only work if the bill, tip and number of people are provided in the vertical order of the layout. However, app crashed if number of people is entered first, it also will not let me change the tip% after my initial input/button selection. I would suggest to update the code to update results after every input as I learned in my second point above as we can probably expect users to manipulate and edit fields for any number of reasons.
I hope this feedback helps!
-Mike -Mike
Marked as helpful1@brtiagoPosted over 1 year ago@mksoofian
Thank you for your help. I fixed the bugs you reported. I hope this works properly this time! Any feedback is greatly appreciated. :)
1 -
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