/age-calculator-app

Frontend Mentor - Age calculator solution

Primary LanguageJavaScript

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • React - JS library
  • Vite.js - Bundler
  • SASS - For styles
  • GSAP - For animation

What I learned

I tried to separate the logic into a separate file as custom hooks that make the calculation and determine the maximum possible value of the inputs.

const { mytime: { days, months, years } } = useDateCalc(birthday)
const { inputState, inputStates, inputChange, updateInput } = useDateInput(
    inputRef,
    id
  )

Another thing I learned is the implementation of React Context and custom hooks to make the code cleaner and fulfill all the requirements of the challenge.

I tried to make the responsive design more dependent on CSS variables rather than having to repeat classes or tags.

@media (min-width:$bkp-desktop) {
	:root{
		--space: 28px;
		--btn-size: 96px;
		--max-width: 840px;
		--padding-h:calc(var(--space) * 2);

		--fz-label:14px;
		--fz-input:32px;
		--fz-input-text:10px;

		--input-w:158px;
		--input-h:72px;

		--fz-result:102px;
	}
}

It's the first time I've used GSAP with React. There is a lot to learn about it, and there are a lot of options to animate elements, but I wanted to use it because I have experience with it in Vanilla JS.

Author