Frontend Mentor - Age calculator app solution

This is a solution to the Age calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Link
  • Screenshots
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

The challenge

Users should be able to:

• View an age in years, months, and days after submitting a valid date through the form
• Receive validation errors if:
  • Any field is empty when the form is submitted
  • The day number is not between 1-31
  • The month number is not between 1-12
  • The year is in the future
  • The date is invalid e.g. 31/04/1991 (there are 30 days in April)
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: See the age numbers animate to their final number when the form is submitted

Link

Github Pages

Screenshots

---

---

---

---

---

---

---

---

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Angular CLI version 15.2.5
• Angular
• date-fns

What I learned

• Angular CLI no longer works on node 14 and on node 18 you need to workaround resolving localhost.
• Not the best design. The readme description mentions submiting the form but the button / circle looks decorative and not like a submit button.
• I originally did not have a submit button but changed to using one before I added the RealDateValidator.
• I added a 'Submit' tooltip to the button.
• No disabled color change on button in the design. The button is not specified to be disabled at any time so you can add the validation error messages.
• Problematic to isolate custom form validator errors and remove a specific error - I used updateValueAndValidity to get around the problem of having a lingering dateError and its associated error styling being shown after values are updated to be valid.
• Animation works well on first submission of form (localForm.submitted value is false) - but when you change any input value to another valid number the animation runs again on the previous submission values.
• Used Time And Date to verify calculation was working correctly.
• Design should have included the end date that was used when the screenshot was taken.
• Design is missing screenshot of error messages on mobile although error message would have to be '10px' to stay on one line.
• Put the invalid class on the containing div to lessen code repetition - could go even further and clean up the ngIfs ?
• When using ngIf have to worry about layout shift - better to use ngStyle or ngClass instead ?
• Wrapped the small tags with the error messages in a fixed height div to prevent the layout shift
• Angular testing is problematic if you use containers - you need to install a browser before you can run tests
• Could make some semantic html adjustments in the results section - could use dl, dd, dt tags?
• Problem with dashes logic using localForm.submitted - after submitting form for the first time, once the form is valid again, the dashes disappear
• tough to inspect the localForm variable - circular structure - thought I could look through its properties to fix the dash issue
• Could have done more to shrink the design for mobile - have to lower font-size / make inputs smaller etc

Continued development

• Account for 'e' in the input type="number" fields
• Remove the arrows in the input type="number" fields ?
• Testing
• Animation
• Mobile tweaks

Useful resources

• Github - angular cli and node 18 conflicts
• Stack Overflow - allow access outside localhost
• Stack Overflow - display reactive form elements in real time
• YouTube - Form Validation of Reactive Forms | Reactive Form | Angular 13+
• Angular JS Wiki - object is possibly null error fix
• PluralSight - validation messages
• YouTube - Display Form Error Messages On Submit Using Angular Reactive Forms
• Programiz - check leap year
• Stack Overflow - element implicitly has an any type
• YouTube - Custom Validation and Error Code | Reactive Forms | Angular 13+
• YouTube - How to add custom validation with two field in Angular
• YouTube - Angular Reactive Forms: Learn How to Create A Custom Validator
• Github - Type '(formGroup: FormGroup) => null | undefined' is not assignable to type 'ValidatorFn'. #44880
• Stack Overflow - object is possibly null or undefined
• Stack Overflow - abstract control remove error
• Stack Overflow - error object is possibly null
• W3 Schools - placeholder css
• Github - Forms: State that setErrors() will make status === INVALID regardless of value passed for key #21564
• Stack Overflow - difference between 2 dates in years, months, & days
• YouTube - 5 Angular Animations Examples - Learn BrowserAnimationsModule in Angular
• Angular Docs - transition and triggers
• Github - angular cli ghpages
• Time and Date - used to verify calculation was working correctly
• Blog - custom directives
• Stack Overflow - make angular ngIf reserve space for showing if event occurs
• The Server Side - gitkeep file
• Stack Overflow - display an object with json pipe
• Stack Overflow - passing form status data between parent and child components
• Stack Overflow - reactive forms reset form state