parent
c26fb97bc7
commit
0f03764766
1 changed files with 43 additions and 0 deletions
@ -0,0 +1,43 @@ |
|||||||
|
--- |
||||||
|
title: 'Age Calculator' |
||||||
|
description: Build a simple application to calculate a person's age based on their birthdate using the Luxon library and a JavaScript datepicker. |
||||||
|
isNew: false |
||||||
|
sort: 1 |
||||||
|
difficulty: 'beginner' |
||||||
|
nature: 'Frontend' |
||||||
|
skills: |
||||||
|
- 'HTML' |
||||||
|
- 'CSS' |
||||||
|
- 'JavaScript' |
||||||
|
- 'DOM Manipulation' |
||||||
|
- 'Package Management' |
||||||
|
seo: |
||||||
|
title: 'Age Calculator using Luxon Project Idea' |
||||||
|
description: Build a simple application to calculate a person's age based on their birthdate using the Luxon library and a JavaScript datepicker. |
||||||
|
keywords: |
||||||
|
- 'age calculator' |
||||||
|
- 'frontend project idea' |
||||||
|
- 'luxon date manipulation' |
||||||
|
- 'javascript datepicker' |
||||||
|
roadmapIds: |
||||||
|
- 'frontend' |
||||||
|
- 'javascript' |
||||||
|
--- |
||||||
|
|
||||||
|
The goal of this project is to help you learn about how to use external packages using [npm](https://www.npmjs.com/). The user inputs their birthdate via a [JavaScript Datepicker](https://www.npmjs.com/package/js-datepicker), and the app calculates and displays their exact age, including years, and months using [Luxon](https://www.npmjs.com/package/luxon). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Requirements |
||||||
|
|
||||||
|
You are required to develop an age calculator with the following features: |
||||||
|
|
||||||
|
- A form that allows users to input their birthdate using a JavaScript datepicker (avoid the default HTML date picker) |
||||||
|
- Use the [Luxon](https://www.npmjs.com/package/luxon) library to calculate the exact age in years, months, and days |
||||||
|
- Display the result on the same page after the user submits the form |
||||||
|
- Implement basic validation to ensure the birthdate is valid |
||||||
|
- Use simple styling to make the calculator visually appealing and responsive |
||||||
|
|
||||||
|
<hr /> |
||||||
|
|
||||||
|
This project will help you understand how to manipulate dates and times in JavaScript using [Luxon](https://www.npmjs.com/package/luxon). You'll gain experience handling user input via a datepicker, performing date calculations, and designing a simple user interface. |
Loading…
Reference in new issue