Responsive Tip Calculator - Vanilla JS

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

Initially, I attempted to use CSS Grid to align the tip selector elements properly. However, achieving the desired layout and responsiveness proved to be difficult with this approach. To overcome this, I switched to using Flexbox properties. I am much more comfortable with flexbox so I was able to achieve the desired layout.

I also faced challenges in customizing radio inputs to visually fit the design requirements. To address this, I opted to use div elements as tip selectors instead. By attaching JavaScript to these div elements, I was able to replicate the behavior of radio buttons. This approach allowed me to easily manage the active state of each tip selector, providing an experience that is no different in the users eyes.