Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashi-singh-9/age-calculator
This Age Calculator is a web app that lets users input their birthdate and calculates their exact age in years, months, and days using Luxon for date manipulation and Flatpickr for a custom datepicker.
https://github.com/yashi-singh-9/age-calculator
css dom-manipulation html javascript package-management
Last synced: 3 days ago
JSON representation
This Age Calculator is a web app that lets users input their birthdate and calculates their exact age in years, months, and days using Luxon for date manipulation and Flatpickr for a custom datepicker.
- Host: GitHub
- URL: https://github.com/yashi-singh-9/age-calculator
- Owner: Yashi-Singh-9
- License: mit
- Created: 2024-10-28T04:28:30.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2024-10-28T04:42:09.000Z (19 days ago)
- Last Synced: 2024-10-28T07:49:56.210Z (19 days ago)
- Topics: css, dom-manipulation, html, javascript, package-management
- Language: CSS
- Homepage: https://codepen.io/Yashi-Singh/pen/dyxdOde
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Age Calculator
This project is an **Age Calculator** web application, built as part of a learning exercise on [roadmap.sh](https://roadmap.sh/projects/age-calculator). The primary goal of this project is to demonstrate how to use external libraries and packages (such as Luxon for date manipulation and Flatpickr for a custom datepicker) in a JavaScript application.
## Project Overview
The Age Calculator allows users to input their birthdate using a JavaScript datepicker, then calculates and displays their exact age in years, months, and days. This project demonstrates several key JavaScript skills:
- Using external libraries (Luxon and Flatpickr) for handling dates and user input.
- Calculating precise age differences between two dates.
- Creating a responsive and user-friendly interface.
## Features
1. **Custom Datepicker**: A JavaScript datepicker (Flatpickr) is used instead of the default HTML datepicker, allowing for a consistent and customizable user experience.
2. **Precise Age Calculation**: The Luxon library calculates the exact age in years, months, and days.
3. **Basic Form Validation**: Ensures the birthdate is valid and in the correct format.
4. **Responsive Design**: Styled to be simple, clean, and responsive, providing a visually appealing user interface.
## Learning Objectives
This project is designed to teach the following skills:
- **Date Manipulation**: Using Luxon to calculate time differences and handle date formatting.
- **Form Handling and Validation**: Accepting user input and validating it before processing.
- **Responsive UI Design**: Creating a simple yet effective user interface with CSS for a consistent look and feel.
- **JavaScript Libraries**: Installing and integrating third-party JavaScript libraries using npm.
## Tech Stack
- **HTML/CSS**: For structuring and styling the user interface.
- **JavaScript**: Core functionality, form handling, and event management.
- **Luxon**: A date manipulation library for calculating the exact age in years, months, and days.
- **Flatpickr**: A lightweight and customizable JavaScript datepicker library.
- **NPM**: Used for managing dependencies and installing external libraries.
## Setup Instructions
1. **Clone the Repository**: Clone this project to your local machine using:
```bash
git clone https://github.com/Yashi-Singh-9/Age-Calculator
```
2. **Navigate to Project Directory**: Move into the project directory:
```bash
cd Age-Calculator
```
3. **Install Dependencies**: Install Luxon and Flatpickr using npm:
```bash
npm install
```
4. **Run the Application**: Open the `index.html` file in your browser to start using the age calculator.
Ensure you have a local server if you face any issues opening the file directly (e.g., use Live Server in VS Code).
For more details, see the project listing on [roadmap.sh](https://roadmap.sh/projects/age-calculator).