Skip to content
Submitted about 2 months ago

Tip Calculator App – Responsive Bill Splitter Using HTML, CSS, and Jav

bem, pure-css, van-js
P
Jayco•470
@jayco01
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’m proud of how I handled bad user input in this app. No matter what people enter, even if they leave something empty or put in zero, the calculator never breaks or gives weird results. I also made sure the app gives clear feedback when something needs to be fixed.

Another thing I’m happy about is learning how to use JavaScript’s forEach for adding event listeners and handling button states. My code feels way cleaner and less repetitive now.

Next time, I really want to get better at turning Figma designs into CSS. My site works well, but I know the styling isn’t a perfect match to the design yet. Getting better at this would definitely make my projects look even more polished and professional.

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

The biggest challenge for me was getting the website to match the Figma design, especially the app dimensions at tablet size. I couldn’t really get it to look exact without setting a fixed height and width, but then it wouldn’t be responsive anymore.

I tried using CSS Grid and Flexbox with different units, but it still wasn’t perfect. In the end, I just focused on keeping the site responsive and doing the best I could with what I know. It definitely made me realize I need more practice translating Figma designs into CSS, especially for those tricky layouts.

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

I’d really like some feedback on translating Figma designs into accurate CSS, especially for tricky layouts on tablet and desktop. I feel like my spacing and sizing are always a bit off compared to the original design. If anyone has tips or best practices for matching Figma files more closely (without using fixed sizes), that would be super helpful.

Also, if you see any ways to make my js code more DRY or improve how I handle the active state for the tip buttons, I’d love suggestions on that too.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrey•4,440
    @dar-ju

    Hi Jayco!

    Great job!

    If you work with Figma and specify values ​​in CSS as in Figma, your design will still be different in fact. Your client may require the work to be done according to the layout in Figma, or in the concept of "Perfect Pixel" (PP), that is, a perfect match with the layout. Keep in mind that the layout in PP takes more time to work, and also increases the CSS code.

    Personally, I do all the work in PP and without Figma, firstly, it looks neater, secondly, it is good practice and training.

    Here's how you can do it: Find the extension in the Chrome market - PerfectPixel and install it. Simply upload a JPEG image of the layout, center it, make the scale 1 and adjust the transparency. And you will see all differences your layout and design layout.

    About your work:

    • you have an error in the code - in the label for="percent" percent - there must be an id on another element
    • you do not need to specify alt for decorative images, just leave it empty. There is only one content image here - the logo
    • I see you are using the BEM methodology, but there are errors. There is a parent container .calculator, there should not be elements from other blocks - template-calculator__label and template-calculator__btn, you need to fix it to calculator__label and calculator__btn The same thing needs to be fixed in the .display block
    • look how the blocks twitch when you put focus in the input, this is because the border takes up its place. This problem can be fixed by adding a border for the input with a transparent color - border: 0.2rem solid transparent; In this case, it will initially take up space
    • if you add a large number to the form, it becomes ugly. Add restrictions on the values ​​​​entered into the fields, in custom % no more than 2 numbers. Also prohibit the entry of other characters in the fields except for numbers

    Otherwise, everything is great, good luck with the development!

    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