Skip to content
Submitted 3 months ago

💸 Tip Calculator App 📱| Vanilla JS & Flexbox with CSS Grid 🧮

bem, accessibility, semantic-ui
LVL 3
Christian Diaz•225
@chrisdzasc
A solution to the Tip calculator app challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am most proud of the logic synchronization between the preset buttons and the custom tip input. Implementing a system that automatically clears the "active" state of the buttons when a user types in the custom field (and vice versa) was a great exercise in DOM manipulation. I also feel confident about the real-time validation.

What challenges did you encounter, and how did you overcome them?

The most significant challenge was managing the mutual exclusivity between the fixed tip percentage buttons and the custom tip input. I had to ensure that if a user clicked a button, the custom input would clear, and if they typed in the custom field, the buttons would lose their "active" state.

What specific areas of your project would you like help with?

I would love to get some feedback on my JavaScript logic. While the calculator works as intended, I am looking for ways to make my code more DRY and efficient.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Christian Diaz’s solution.

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