Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Age calculator app

#typescript#vite#accessibility
P

@andreasremdt

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@NaQu2003

Posted

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

P

@andreasremdt

Posted

@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

@NaQu2003

Posted

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

1
P

@andreasremdt

Posted

@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-hsf

Posted

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
Discord logo

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