Tip Calculator app using HTML, CSS and Vanilla JS.

Solution retrospective
Hello,
This challenge was fun, even though it is not working as I intended.
I wanted to display the values once the user fills in the number of people, but couldn't figure out a way to do it, so, the last element to be choosen is the tip, so after the Bill value and the number of people, the user has to select the tip value in order to display the values.
When the user selects the custom tip, they have to click the field once again in order to get the results.
Also implemented some conditions to check if the numbers are positive and not letters.
Overall I believe there's room to improve my code so any comments are welcome.
Happy coding 🤓
Edit:
Refatored the JS code, now the app works 100% as I intented.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Ahmed-Elbald
Hey Renan,
So concerning your questions, I don't really know the logic you used but here's my suggestion:
- Basically you should have your variables like totalAmount, tipPercent (or however you name them) as global variables and set them to null.
- You have three inputs in the page (the bill, number of people and custom tip). You can add an eventListener to all of them (onkeyup OR oninput both will work).
- So when the user types any thing, you can detect what input is being used and then set new values to your global variables
- Then, you can trigger a function to display the final values but this function shouldn't work unless your global values actually have values other than
null
I don't know if I managed to convey my point but the whole thing is... You don't have to click anything to display the final values. The function that will display them should get triggered every time the user types anything
If you still don't get it, you can see my solution here
You have some issues with accessibility. I don't mind helping you solve them. I hope my feedback was beneficial. Thank You
Marked as helpful
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