used html,css,JavaScript created static web page for tip calculation

Community feedback

• 

  Adriano•42,870

  @AdrianoEscarabote

  Posted over 2 years ago

  Hi Saravana Kumar, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

  A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

  Flex-box:

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

  GRID

  body {
      display: grid;
      min height: 100vh;
      place-content: center;
  }
  

  To improve the code structure wrap this div:

  <div class="attribution">

  with the semantic tag footer

  The rest is great!

  I hope it helps... 👍

  11

  Marked as helpful
• 

  Divine Obeten•2,415

  @Deevyn9

  Posted over 2 years ago

  Hi Saravana, congrats on completing this project, your solution looks really great. Although I found the following issues:

  • The calculation for the Tip and Total amounts aren't accurate.
  • The Error messages don't clear out when the reset function is triggered.
  • The container isn't centered vertically, this can be fixed using body { display: grid; place-items: center; }
  • I also noticed that you didn't use the design for the mobile view and it makes it hard to use on small screens.

  If you have issues trying to fix these issues, you can use my solution

  I hope you find this helpful.

  Happy Coding! 🎉

  12

  Marked as helpful