Skip to content
Submitted 9 months ago

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

Ouss_Ach•810
@OUSSAMAACHICHE
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

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

any feedback are welcome, Thank you 🥰

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 9 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
    1
    Ouss_Ach•810
    @OUSSAMAACHICHEPosted 9 months ago

    Thank you soo much for your help @danielmrz-dev

    1
  • turanarican•200
    @turanarican2022Posted 9 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
    1
    Ouss_Ach•810
    @OUSSAMAACHICHEPosted 9 months ago

    Thank you soo much ✔🙋‍♂️ @turanarican2022

    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