Submitted 7 months ago

Tip calculator app using html, css, js and tailwind-css

Ouss_Ach• 780

@OUSSAMAACHICHE

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

Hi 🙋‍♂️there , this is my solution to this challenge

any feedback are welcome, Thank you 🥰

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 7 months ago

Hello @OUSSAMAACHICHE!

Your project looks great!

I have one suggestion for you to improve it even more:

Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

📌 Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

Using Tailwind, that would be <body class="min-h-screen flex/grid justify-center items-center">.

I hope it helps!

Other than that, great job!

Marked as helpful

Ouss_Ach• 780

@OUSSAMAACHICHE

Posted 7 months ago

Thank you soo much for your help @danielmrz-dev

turanarican• 200

@turanarican2022

Posted 7 months ago

Hey, congrats for completing the challenge. I want to make some suggestions in a hope they might help:

you used <li> elements for tip percentages. form the UX point of view, we generally use the interface from top to bottom. I entered $100 and clicked for example %15, it only showed hover state but did not stay that way, after that I entered num of people but I had to come up again and click one of percentages again for calculation to happen.
instead you can wrap all elements in a form and this way user can use them in any order. To achieve this you can use radio buttons for percentages, you can style their wrapper box as you like and with css you can hide circles.
and for the reset button, you don't have to use JS if you follow the above suggestion. There is a "form" attribute you can use for any input. By using this, you can tie a button or input element to a form that it is not inside of that form. This concept is important and along your front end journey it will help you a lot. you can have a look at the following resources to understand this concept better:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form

keep up the great work!

Marked as helpful

Ouss_Ach• 780

@OUSSAMAACHICHE

Posted 7 months ago

Thank you soo much ✔🙋‍♂️ @turanarican2022

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