feat: add frontend projects

src/data/projects/age-calculator.md

@@ -0,0 +1,43 @@
+---
+title: Age Calculator
+description: Create an age calculator using HTML, CSS, and JavaScript.
+isNew: true
+sort: 19
+difficulty: 'beginner'
+nature: 'Frontend'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+  - 'Package Management'
+seo:
+  title: Build an Age Calculator App with JavaScript
+  description: Create an age calculator using HTML, CSS, and JavaScript.
+  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.

src/data/projects/custom-dropdown.md

@@ -1,23 +1,23 @@
 ---
-title: 'Custom Dropdown'  
-description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'  
-isNew: false  
-sort: 19
-difficulty: 'intermediate'  
-nature: 'JavaScript'  
-skills:  
-  - 'HTML'  
-  - 'CSS'  
-  - 'JavaScript'  
-  - 'DOM Manipulation'  
-seo:  
-  title: 'Build a Custom Dropdown Menu with JavaScript'  
-  description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.'  
-  keywords:  
+title: 'Custom Dropdown'
+description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'
+isNew: false
+sort: 20
+difficulty: 'intermediate'
+nature: 'JavaScript'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:
+  title: 'Build a Custom Dropdown Menu with JavaScript'
+  description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.'
+  keywords:
     - 'custom dropdown'
     - 'javascript dropdown'
-    - 'html and css'  
-roadmapIds:  
+    - 'html and css'
+roadmapIds:
   - 'frontend'
 ---
 
@@ -27,4 +27,4 @@ Given below is the mockup showing the dropdown in its default, open, and selecte
 
 [![Custom Dropdown](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)
 
-This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript.
+This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript.

src/data/projects/flash-cards.md

@@ -0,0 +1,40 @@
+---
+title: Flash Cards
+description: Create a flash card app using JavaScript frameworks.
+isNew: true
+sort: 20
+difficulty: 'beginner'
+nature: 'Frontend'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'JavaScript Frameworks'
+seo:
+  title: Build a Flash Cards App
+  description: Create a flash card app using JavaScript frameworks
+  keywords:
+    - 'flash cards'
+    - 'frontend project idea'
+    - 'javascript frameworks'
+roadmapIds:
+  - 'frontend'
+  - 'javascript'
+---
+
+The goal of this project is to help you learn about how to use state management and component-based architecture using JavaScript frameworks. You will build a flash card app with pre-defined JavaScript questions and answers that users can flip through to test their knowledge.
+
+![Flash Cards](https://assets.roadmap.sh/guest/flash-cards-crzw6.png)
+
+## Requirements
+
+You are required to develop a flash cards app with the following features:
+
+- Pre-defined flashcards with questions and answers
+- Progress bar to show the user's progress
+- Ability to view flashcards one at a time and flip to reveal the answer
+- Simple navigation to cycle through the flashcards
+
+<hr />
+
+This project will help you understand how to manage state and create reusable components. You can use any framework of your choice, such as React, Angular, or Vue.js, to build this project.