This is a solution to the Age calculator app challenge on Frontend Mentor
- 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
The following screenshots shows both the mobile and desktop version of the project.
- Solution URL: Source code
- Live Site URL: Netlify live web
- First build the mobile version of the application and then desktop version,finally implement the javascript logic.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Responsive web design.
- Mobile-first workflow.
- Tailwind css.
- I has been a while since I said that I would be using tailwind css,however I have found it to be a useful tool indeed.I have also learnt that the for each loop js can return a value.
I will continue learning and developing javascript validation forms and make them to be more efficient and useful.
-
Tools - This helped me for color and web testing tools. I really liked this pattern and will use it going forward.
-
Tools - This is stack overflow page which describes on cheking if a date is valid or not.
- Website - Erick Ngechu
- Frontend Mentor - @Rickyngechu
- Twitter - @Ricky_101com
I would like to acknowlegde Jonas schmedtman for the great skills he has offered me in his javascript courses.Furthermore I would like to pass my gratitude towards Kevin powell a great css master who has sharpened my css skills and responsive web design in general.
I would like to acknowledge the developers of Tailwind css.