From 45a7fe6eb89d32b9f7afee085e5b9640e717a7d8 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 3 Sep 2024 23:11:05 +0100 Subject: [PATCH] Add restricted textarea project --- src/data/projects/restricted-textarea.md | 29 ++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/data/projects/restricted-textarea.md 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