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
• 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: [https://github.com/ohenekwabena/age-calculator]
• Live Site URL: [https://age-calculator-woad-ten.vercel.app/]

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Styled Components

What I learned

I really enjoyed working with styled-components. I am also glad for the errors and bugs I encountered lol (especially with my form validation logic)- no better way to learn.

<Value animate={valueAnimate}>{count}</Value>;

const Value = styled.span`
  color: var(--purple);
  display: inline-block;
  ${(props) =>
    props.animate &&
    css`
      animation: ${Bump} 1500ms ease-in 2;
    `}
`;

useEffect(() => {
  if (value === undefined || isNaN(value)) {
    setCount("--");

    return;
  }

  const step = value > count ? 1 : -1;

  const interval = setInterval(() => {
    setValueAnimate(true);
    setCount((prevCount) => {
      const nextCount = prevCount + step;
      return (step > 0 && nextCount <= value) || (step < 0 && nextCount >= value) ? nextCount : value;
    });
  }, 40);
  setValueAnimate(false);
  return () => clearInterval(interval);
}, [value, count]);

Continued development

I struggled a little with logic for form validation. I will hope to learn more about form validation.

Oo and styled-components. They are absolute;y amazing. Just the fact that it can be used with custom props makes it very exciting to work with

Useful resources

• Demystifying styled-components - Josh Comeau's insight into styled components has been most helpful.

• Props from Child to Parent Component (Hack) - Passing the form data from the Input Form component was a little tricky at first. I didn't want to use complex state management like context or redux. Using functional arguments to pass props is quite simple. Thank you Ania for the refresher.

Author

• Frontend Mentor - @ohenekwabena
• Twitter - @OheneKwabs
• LinkedIn -

Acknowledgments

Josh Comeau! What a mental motivation this guy is!.I recommend his news letters and courses. He is really great.

And finally a big thank you to frontend Mentor for the design and assist!