Loading repository data…

Age-Calculator-App GitHub Details, Stars and Alternatives | OpenRepoFinder

Yashi-Singh-9 / repository

Age-Calculator-App

A simple web application that calculates a user's age in years, months, and days based on a provided date. The app features form validation, responsive design, and dynamic error handling for invalid or incomplete inputs. Built with HTML, CSS, JavaScript, and LESS.

#css#frontend#frontend-mentor-challenge#frontendmentor#html#javascript

View Repository on GitHub ↗

REPOSITORY OVERVIEW

Live repository statistics

★ 0Stars

⑂ 0Forks

◯ 0Open issues

◉ 0Watchers

README preview

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.

Overview
My Process
Setup Instructions
- Installing LESS
- Running LESS
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).
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

Desktop Screenshot

Mobile Screenshot

My Process

Built With

Semantic HTML5
CSS custom properties
Flexbox for layout
Mobile-first workflow
JavaScript for validation and logic
LESS (CSS Preprocessor)

What I Learned

This project helped me to practice:

Form Validation:
- How to validate fields with JavaScript for specific criteria like empty fields, valid date ranges, and logical date validation.
LESS Preprocessor:
- Improved organization and reusability of styles by leveraging variables and mixins.
Dynamic Error Messaging:
- Providing dynamic feedback for invalid inputs and visually indicating errors on form fields.

Example of a JavaScript Function for Validation:

function showError(input, errorElement, message) {
  input.classList.add("error");
  input.previousElementSibling.classList.add("error");
  errorElement.textContent = message;
}

Continued Development

In the future, I want to:

Add animations for age number changes.
Enhance accessibility by providing better ARIA feedback.
Refactor styles to use modern CSS features like CSS variables more effectively, reducing reliance on preprocessors.

Useful Resources

MDN Web Docs - Date Object - Helped me understand date validation.
LESS Documentation - A great resource for learning LESS and its features.

Setup Instructions

Installing LESS

Install Node.js: If you don't already have Node.js installed, download it from Node.js and follow the installation instructions.
Install LESS: Open your terminal and run:
```
npm install -g less
```
This will globally install LESS on your system.

Running LESS

To compile your .less files into .css, follow these steps:

Navigate to your project directory in the terminal.
Run the following command to compile the LESS file into CSS:
```
lessc style.less style.css
```
Link the generated style.css file in your HTML <head>.

For automatic compilation, you can use a watcher tool like less-watch-compiler:

npm install -g less-watch-compiler
less-watch-compiler less css

This will watch your LESS files for changes and automatically compile them to CSS.

Author

Frontend Mentor - Yashi-Singh-9
LinkedIn - Yashi Singh

Acknowledgments

Thanks to Frontend Mentor for providing such a practical and engaging challenge. It was a great opportunity to polish my JavaScript and LESS skills.