wip: age calculator

feat/frontend-projects
Arik Chakma 7 months ago
parent c26fb97bc7
commit 0f03764766
  1. 43
      src/data/projects/age-calculator.md

@ -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).
![Age Calculator](https://assets.roadmap.sh/guest/age-calculator-do1un.png)
## 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…
Cancel
Save