Responsive Tip Calculator with JavaScript

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

I made the most progress in my JS so I feel really happy that some JS logic and methods are coming to me faster.

I need to work more on refactoring my code and making it more DRY, as there seem to be some repetitions. Next time I tackle projects with forms, I should implement attribute selectors in CSS to select HTML elements more efficiently.

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

I had a bit of trouble with form manipulation in JS. Upon inputting numbers in the custom tip section, the numbers were coming out different and inaccurate compared to the tip buttons. Prior to hitting the enter key the numbers were the same, but after hitting enter key, the numbers were inaccurate. Turns out, I had to prevent default form submission in JS, and that solved the issue.

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

As an amateur front end developer, I have not had the chance to receive professional critiques that teach me about best practices in HTML, CSS, and JS. I would really appreciate for someone to point out any bad habits that I'm doing that could potentially break my code or cause future issues, or any mistakes in general.

I also don't know how to center the page to make it look exactly as the solution. The current solution I have is a bit off along the Y axis