mmxcrono / age-calculator-app

Frontend Mentor - Age calculator app

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
  • Code highlights
  • Continued development
• Author

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

Screenshots

Links

• Solution URL: Git Repo
• Live Site URL: Live

My process

I decided to use Vue for this project to show working knowledge and my coding style. I also wanted to improve my starting point with this stack and examine my own habits.

My steps

1. Identify wrappers needed (flex containers)
2. Identify columns and rows needed
3. Identify possible reusable components
4. Add in styles to get rough look in place
5. Work on components and events emitted
6. Work on logic and unit tests needed
7. Polish styles and add finishing touches to match design

Built with

• Vue
• Vue Test Utils
• Vite
• Vitest
• Test Coverage
• Prettier
• ESLint
• Flexbox

What I learned

I find myself adding tests as I go, but what I would do next time is do Test-Driven Development Creating tests after creating the logic catches things later rather than early on.

Trying to change font by updating variables does not work

element {
  --fs: var(--fs-700);

  font-size: var(--fs);

  @include response-to(large) {
    --fs: var(--fs-800);
  }
}

Code highlights

Use css variables and formatting to easily identify dynamic and referenced properties vs fixed properties.

.ago-value {
  --color: var(--clr-primary);
  --transform: unset;
  --transition: color linear 0.5s;

  color: var(--color);
  transition: var(--transition);
  transform: var(--transform);

  display: inline-block;

  &--animate {
    --color: var(--clr-warn);
    --transition: all linear 0.5s;
    --transform: rotate(360deg);
  }
}

Continued development

• Improve tests and reusable components.
• Add dark and light themes

Author

• Website - Hoang Nguyen
• Frontend Mentor - @mmxcrono