Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Tip Calculator - Vanilla JS

P

@joshhovis

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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.

Community feedback

Michel 60

@michelNice

Posted

This comment was deleted

0

T
Matt Studdert 13,611

@mattstuddert

Posted

@michelNice, please stop spamming comments on other people's solutions related to your own projects. These comments are reserved for feedback on the solution author's project. Please remove your comments like this one from other people's solutions.

If you need help with something, please use the help channel inside our Discord community in the future.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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