Age Calculator App | Mobile First | Flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • You already using Grid for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

  ---

  body {
      place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  main {
    margin: 20% auto;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Faruque Dewan•360

  @faruquedewanPosted over 1 year ago

  @0xAbdulKhalid I just realized I used align-content instead of place-content. I just tried place-items after going through your suggestion and it looks good but has a slightly bigger width. Can you please elaborate on the difference between place-content and place-items?

  1
• 

  Sinclair Udochukwu•60

  @SinkycodePosted over 1 year ago

  Congratulations 🎉👏 mate, it was a neat work. My observation -

  • Your validation was not really friendly (like making sure users understood where they missed it and fixing it immediately )
  • Your validation only shows one at a time (I feel you tried to fix it but that's all you could do for you not to mess the whole code up )

  Congratulations 👏🎉 once again. I really love what frontend mentor is doing here. I'm learning a lot from people's project

  Marked as helpful

  0

  ---

  

  Faruque Dewan•360

  @faruquedewanPosted over 1 year ago

  @mosfresh Yeah, my JavaScript skills seriously needs a lot of work as of now. All I was trying to to was make it work and not mess up the whole code.

  1

  

  Sinclair Udochukwu•60

  @SinkycodePosted over 1 year ago

  @faruquedewan Smiles 😊 I believe you'll get better, it's just a matter of time

  1

  

  Faruque Dewan•360

  @faruquedewanPosted over 1 year ago

  @mosfresh Hey, check my new solution. I have updated the code. :)

  1

  

  Sinclair Udochukwu•60

  @SinkycodePosted over 1 year ago

  @faruquedewan okay

  0