Tip Calculator App Solution Built With HTML/CSS/JS

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

With my recent experience in JavaScript and familiarity from past projects, I was able to quickly assemble the math logic for my calculator app. While I aim to improve my UI design process by learning front-end libraries like shadcn, I’m proud of how effectively I brought everything together using vanilla HTML and CSS. Despite a few minor imperfections, I’m happy with the result overall.

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

One challenge I faced was getting the custom tip input to work correctly. Initially, when I entered a number in the custom input field, the tip amount always displayed as $0.00. The problem was that I mistakenly selected the entire element that wrapped the input, rather than the input field itself, in my JavaScript, so the value wasn't being read properly for the calculations. To fix this, I updated my code to correctly target the inside the `` and made sure the custom tip value was validated and applied in the calculations. Once I made this adjustment, the custom tip functionality worked as expected. I find most of my challenges end up being small mistakes that are like "A needle in a haystack" so to speak.

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

I’d like guidance on improving my JavaScript workflow, particularly with handling form validation and user input, as I encountered issues with correctly accessing input values. Suggestions on structuring my projects more efficiently, especially when integrating JavaScript functionality with CSS would also be helpful.