Skip to content
Submitted almost 2 years ago

Tip Calculator - Mobile First - Vanilla JS

Daniel Thane•50
@danielthane
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Here is my latest FM challenge Solution.

I feel like this one is my best so far by a country mile and I'm really proud of what I've put together!

There are a few things I'd like to get some feedback on though:

  • Getting the icons into the test input fields felt a little bit messy, is there a way to get these laid out easier? I was thinking of the flexbox space between property but I don't think this would work here.

All in all, though I think this works as intended and actually looks reasonably close to the mock-ups both in desktop and mobile view.

I'm 100% converted to mobile-first too this felt so much easier to get the correct media queries up and running.

Thanks in advance for any feedback!

Cheers, Dan

Community feedback

  • Jean-Paul Poullet•130
    @jppoulletPosted over 1 year ago

    Looks great! For your icons within the text field try doing the way below. I too spent a bit of time looking around for a solution for positioning it. Found this worked the best for me. The background-position is what you're missing.

    #bill { background-image: url(images/icon-dollar.svg); background-repeat: no-repeat; background-position: 9px 9px; }

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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