Tip Calculator App

Community feedback

• 

  P

  Genildo Cerqueira Souza•470

  @GenildocsPosted 3 months ago

  Here’s the translation:

  ---

  Hello, congratulations on completing the challenge.
  As a tip, I believe it would be more effective to apply the flex property directly to the body instead of creating the div with the class main-container.
  Example:

  body {
      background-color: var(--light-grayish-cyan);
      font-family: "Space Mono", monospace;
      font-weight: 700;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  Apply the flex property to calculate and create two div elements, one for the calculation and another to display the value.

  <main class="container">
      <div class="section-1"></div>
      <div class="section-2"></div>
  </main>
  

  In the input div, it would be helpful to separate bill, select tip, and number of people each into their own div. This makes it easier to apply styles, and you wouldn't need to use inputForm.

  To properly align select tip, use the grid property and divide it into 3 columns.
  Example:

  .section-1 .percentage-number {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 10rem));
      grid-gap: 2rem;
  }
  

  Marked as helpful

  0

  ---

  

  Cesar Ramirez•100

  @sean365-bitPosted 2 months ago

  Hello @Genildocs Thank you so much for commenting and providing feedback, I will take it into consideration. Best Regards

  0