Skip to content

Latest commit

 

History

History
108 lines (77 loc) · 4.4 KB

README.md

File metadata and controls

108 lines (77 loc) · 4.4 KB
Raw

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

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

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

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).