Skip to content
Submitted 2 months ago

Vanilla CSS and Js attempt

Bhavik Thakur•320
@bhavikthakur
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I was able to finish the challenge. I will try some additional checks

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

REGEX! I had to learn it.

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

I will focus more on API-related challenges and accessibility, like ARIA labels, etc. Also, my design isn't pixel-perfect. I use Perfect Pixel extensions, but for some reason, when I see the original design on top of my design, it is always larger than my viewport, so I see horizontal and vertical scrollbars. So, I never seem to understand how to create pixel-perfect design. Do you have any suggestions? I'm open to feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrey•4,580
    @dar-ju

    Hi, Bhavik!

    Great job!

    Don't pay attention to the vertical scrolling, this page will probably have it because of the large paddings at the top and bottom. When you make a real page, this problem will disappear by itself.

    Here, if you make it according to Perfect pixel, don't center the card vertically, it will be much more difficult to adjust it to the layout. Remove align-items: center; from the body. Next, add paddings to the wrapper block: padding: 162px 0;, add margin to the header block margin-bottom: 88px;.

    Now in Chrome, set the screen width to 1440px (the same as the layout image) and select Mobile(no touch). Look, with the settings above, your card is almost Perfect pixel, it remains to adjust the internal blocks a little.

    Marked as helpful
  • Bhuvnesh Upadhayay•2,120
    @bhuvi819381

    First i was confused too how this pixel perfect actually works Later it works but not 100% it's like 80% 90% and pixel perfect takes too much time.

    Marked as helpful

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