Responsive tip calculator app with plain JS and Sass

At first I built this with the goal of just making it function as intended, but I later felt to challenge myself to make this a more inclusive app with better accessibility, which meant I opted to use radio inputs for the tip percentages instead of just buttons and also to make the tab button work with the inputs. This took me a really long time because the biggest challenge was in how to group a visually hidden radio input with a text input (i.e., the custom text input) and work out all the logic with :focus, :checked, etc., and also how to make everything work smoothly when tabbing. Because of this, writing out the CSS and HTML was actually a lot harder than the JS, since I needed to figure out how to use the hidden custom radio button to affect the styling of the text input. I think it's pretty close to completion after some major updates, just need to clean and refactor, and do a tad more with the tabindex😌

I found @sedcakmak's solution to be an excellent reference when I was trying to make improvements to my code, so shoutout to her 🙂

Would love to hear some input from the accessibility experts out there or any user really!