Compare commits

...

6 Commits

Author SHA1 Message Date
Arik Chakma
a4b2d31f49 fix: remove JavaScript roadmap 2024-10-10 09:20:54 +06:00
Arik Chakma
99ee5d59e1 fix: remove JavaScript roadmap 2024-10-10 09:20:33 +06:00
Arik Chakma
5401a91c9a wip: flash cards 2024-10-05 07:37:19 +06:00
Arik Chakma
f4fd1a47eb wip: flash cards project 2024-10-05 07:32:53 +06:00
Arik Chakma
03ce8a46fb fix: update age calculator description 2024-10-05 06:35:55 +06:00
Arik Chakma
0f03764766 wip: age calculator 2024-10-05 06:30:10 +06:00
3 changed files with 99 additions and 18 deletions

View File

@@ -0,0 +1,42 @@
---
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'
---
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.

View File

@@ -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.

View File

@@ -0,0 +1,39 @@
---
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'
---
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.