I love receiving feedback! I am always looking to improve my applications and platform. So if you have anything you'd like to mention, please email hi at [email protected]

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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Solution URL: Asiedu13/my-age
• Live Site URL: my-age-beta.vercel.app

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Styled Components - For styles

With this, I learnt about the font-face and how to import downloaded fonts into the project.

@font-face {
  font-family: poppins_regular;
    src: url(../fonts/Poppins-Regular.ttf);
}

I relied heavily on the concept of flexbox for this project.

Also, I discovered ways to find the number of years from a millisecond form of the difference between birth and current date

  function findYear (mSeconds) {
    var checkYear = Math.floor(mSeconds / 31536000000);
    console.log(checkYear)
  }

  function convertmili( mSeconds ){
    var one_day=1000*60*60*24
    let days = Math.floor(mSeconds / one_day);
    return days;
}

Moreover, I applied functional programming paradigm as this helps make the code easier to understand and debug.

For this project, I used the (successful git model)[https://nvie.com/posts/a-successful-git-branching-model/] by Vincent Driessen for versioning of the project.

Moving forwards, I would focus on css grid and have a firm grip of the Javascript data types and their common methods.

• (The Successful git model)[https://nvie.com/posts/a-successful-git-branching-model/] by Vincent Driessen - This helped me with code versioning. I really liked this pattern and will use it going forward.

• (Color Picker )[https://colorpicker.fr/] - This is an amazing tool for identifying colors in various formats. I'd recommend it to anyone who would like to clone a product.

• Website - Prince Kofi Asiedu

• Frontend Mentor - @Asiedu13

• Twitter - @Prince_KAsiedu

• LinkedIn - Prince Asiedu

• Email - [email protected]

I would like to thank my university roommates, Nana Kwame Oduro-Marfo and Mark Korankye for their support during development of this project.