diff --git a/src/data/projects/restricted-textarea.md b/src/data/projects/restricted-textarea.md new file mode 100644 index 000000000..1d452fefb --- /dev/null +++ b/src/data/projects/restricted-textarea.md @@ -0,0 +1,29 @@ +--- +title: 'Restricted Textarea' +description: 'Create a textarea with live character count and a max character limit.' +isNew: false +sort: 15 +difficulty: 'beginner' +nature: 'JavaScript' +skills: + - 'HTML' + - 'CSS' + - 'JavaScript' + - 'DOM Manipulation' +seo: + title: 'Build a Restricted Textarea with JavaScript' + description: 'Learn how to create a textarea with live character count and a maximum limit, with visual feedback as the limit is reached.' + keywords: + - 'character count' + - 'textarea limit' + - 'javascript input' + - 'html and css' +roadmapIds: + - 'frontend' +--- + +You are required to create a textarea that tracks and displays the number of characters typed by the user, along with a maximum character limit. As the user types, the character count will update dynamically. Once the limit is reached, the textarea will prevent further input and the border will turn red to visually indicate the limit has been hit. + +[![Restricted Textarea](https://assets.roadmap.sh/guest/textarea-input-vdclr.png)](https://assets.roadmap.sh/guest/textarea-input-vdclr.png) + +This project will help you practice manipulating input elements with JavaScript, handling user input events, and providing real-time feedback to enhance user experience. \ No newline at end of file