Submitted 2 months ago

Responsive Tip Generator built with Vue, Pinia and TailwindCSS

Dylan Heslop• 620

@dylan-dot-c

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Tip calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

This was my second time using vue for a challenge. It was hard getting some parts work as im kinda new to vue but everything worked out fine at the end. Next time I would better organize my components and make the code more readible. Also would try of a better way to work with the custom tip Percentage part.

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

Had an issue with resetting the form for the reset button, I was using ref() as my state in my pinia store and just put the state back to its orginal value, in pinia and vue devtools the state was reset but not in the actual forms like bill, tipPercentage and persons. What I did was just change from ref to reactive.

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

Refactoring the code, making the tip percentages accessible and generally better components.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 2 months ago

Hey there! 🙋🏽‍♂️

Congrats on completing the challenge! ✅

Your project looks fantastic!

Here's a tip to make it even better:

Try this method to center an element vertically and horizontally:

📌 Apply this CSS to the body (skip position or margins to make it work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

Hope this helps!

Keep up the great work!

Marked as helpful

Please log in to post a comment

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