Skip to content
Submitted about 1 year ago

Age calculator app

Andreas Remdt•950
@andreasremdt
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

Hey there,

This is my solution to the age calculator app.

I built the application using HTML, CSS, and TypeScript. The TypeScript code is compiled and bundled through Vite. The CSS uses cutting-edge features, such as nesting, color-mix, and custom properties, hence the preview might be broken.

My main focus was on building a maintainable and accessible form validation logic, utilizing constraint validation and ES6 classes. This approach incorporates best practices for form validation such as clear error states, error messages, and more.

Let me know what you think :)

Community feedback

  • NaQu•570
    @NaQu2003Posted about 1 year ago

    It looks cool, but it would be even better if u implemented a logic that throws an error when user selects above 28 day or 29 year in specific year in February, or when someone sets 31 days in moth that has only 30 days.

    1
    Andreas Remdt•950
    @andreasremdtPosted about 1 year ago

    @NaQu2003 Thank you for your feedback! That should already be the case. Try to enter "2022/02/30" as an example, it'll display the error "Must be a valid date" according to the design provided by Frontend Mentor.

    0
    NaQu•570
    @NaQu2003Posted about 1 year ago

    @andreasremdt It does not throw an error my mate i can even put 31 days in february

    1
    Andreas Remdt•950
    @andreasremdtPosted about 1 year ago

    @NaQu2003 My apologies, I only tested in Firefox. In Chrome it didn't work indeed. The reason was that I used Date.parse to validate the date input, but as it turns out, JS engines implement this function differently. An invalid date (such as Februray 31) results in NaN in Firefox but returns a valid timestamp in Chromium. I changed the validation slightly to accommodate for this inconsistent behavior, it should work now. Thanks for pointing that out!

    0
  • Edu-hsf•40
    @Edu-hsfPosted about 1 year ago

    Your code turned out really good. But it would be even better if you implemented logic that validates birth dates for that year, because when the year 2023 is selected (regardless of the month) it returns an error.

    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