Skip to content
Submitted over 1 year ago

Age Calculator App Vanilla CSS + JS

Trisha R•110
@cheribella
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Age calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Things I found difficult in this challenge

JS

  1. Date validity (e.g. There are only 28/29 days in February)
  2. Statements for Loop Year

I got an error with using dayjs() so I was not able to use the isLeapYear() plug-in. I also struggled with creating statements for the date validity, and for this I need some suggestions and feedback in order to further improve my code as well as my skills in logic and programming.

I am new to JS and I thought that doing some projects could somehow help me familiarize with some concepts in JS, even the complex ones.

UPDATE: For some reason, the website's functionality does not work despite its several commits (It works on localhost just fine, though)

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    • Add min-height:100vh to you main to properly center the card.
    • Don't use multiple <form>, use only one form with input inside it with proper submitting for javascript handling.

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    1
    Trisha R•110
    @cheribellaPosted over 1 year ago

    @NehalSahu8055 Thank you for your feedback, I learned something new today, thanks to you. 🤗

    0
  • 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 layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.
    main {
min-height: 100vh;
}
    • Now remove these styles, after removing you can able to see the changes
    .container {
margin: 4rem 0;
}
    • Now your component has been properly centered

    .

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

    Happy coding!

    1
    Trisha R•110
    @cheribellaPosted over 1 year ago

    @0xAbdulKhalid Thank you so much for the heads up! 🤗 It was my bad for not noticing these subtle parts. I have huge admiration and respect for the likes of you.

    0
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    @oyasumibella Glad you found it helpful ! 🤠

    1

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