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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View an age in years, months, and days after submitting a valid date through the form.
• You will 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

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Javascript foundation
• bootstrap - For styles

What I learned

I learn't so many things from writing this project, I can't even list them all here but I will just give some. I learn't you can actually style your project by giving it root class at the begining of you css file and you can assign it any where you need it. I learn't in my html that doing inner styling sometimes will make your work rough, so its better to keep it short and write your style in a seperate file.

I also learnt in java script that you can assign a variable on same line.

<div class="container" style="height:100px">

:root{
 --Purple: hsl(259, 100%, 65%);
 --f0nt-size: 40px;
 /* how to use it */
background-color: var(--purple);
}

var labelsInput = document.querySelectorAll('.form-group label')

Continued development

But I still want to build my javascript knowlegde, I think I'm still lacking some things so I hope if I'm able to do more frontend-mentor projects which includes me writing javascript code I will improve.

Useful resources

• Google - This is a useful resource it always help me get out when I'm stuck once I search it will always bring out a result for me.
• Youtube - This is a very useful resource that I hoped every programmer out there stick to it really helps me in most of my projects, even in things I do every day its very useful
• stack overflow - This is an amazing resource and I really appreciate the makers its been really helpful when ever I put in a question its either someone as asked that question before so I will get my answer at once or there are people waiting to answer my question and I get my answer immediately.
• w3schools - Its a wonderful resource you can use it to learn any program beginner and professional its very helpful.
• Bootstrap - I use this for my styling it makes my work beautiful and neat.

Author

• Website - Samuel Ejalonibu
• Frontend Mentor - @SamuelWorld20
• Twitter - @gold_fish126

Acknowledgments

I want to use this to appreciate people that as worked on me to be a wonderful developer. Mr Durodola Kehinde who built me from scratch and Aptech computer education for developing my skills. I'm currently a student at Alx here is there link - (https://twitter.com/alx_africa).