React Vite Age Calculator component using SCSS

Age Calculator The Age Calculator is a simple web application that calculates a person's age based on their birth date. Users can input their birth date, and the app will display their age in year! s, months, and days.

Technologies Used This project was built using the following technologies:

React - A popular JavaScript library for building user interfaces. Vite - A build tool and development server for web applications, used for faster development and optimized production builds. Sass - A preprocessor scripting language that extends CSS, allowing for more advanced features and better code organization. GitHub Pages - A platform for hosting static websites directly from GitHub repositories. The site is live at https://marktim24.github.io/age-calculator-app-main/

React Components and Functions The Age Calculator application consists of several React components, as well as custom hooks for handling form input and validation:

InputForm: A reusable component for rendering form inputs with labels and error messages. AgeForm: A component that uses the InputForm component to create a form for entering the user's birth date (day, month, and year). CalculateButton: A component for rendering a button to calculate the user's age. OutputForm: A component for displaying the calculated age in years, months, and days. AgeCalculator: The main component that combines all other components and manages the state and logic of the application. useAgeCalculator: A custom hook that handles form input, validation, and age calculation. Features useState hook: The Age Calculator App utilizes React's useState hook to manage component state, allowing the app to respond to user input and update the user interface accordingly.

Custom hook: The app implements a custom hook, useAgeCalculator.js, which encapsulates the age calculation logic and state management. This custom hook makes the code more modular and easier to maintain.

Responsive design: The app's layout and styling are optimized for various screen sizes using media queries in SCSS. This ensures a consistent and user-friendly experience across different devices.

Form validation: The app includes input validation to ensure that users provide valid date values for their date of birth. Error messages are displayed to guide users in correcting any input mistakes.

SCSS structure: The SCSS files are organized in a modular fashion, with separate files for variables and each component. This structure allows for better maintainability and ease of customization.

Vite: The project uses Vite as the build tool and development server, providing a fast and efficient development experience.