Skip to content

README.md

Latest commit

 

History

History
136 lines (107 loc) · 4.34 KB

README.md

File metadata and controls

136 lines (107 loc) · 4.34 KB
Raw

🔤 Restricted Text Area

License HTML5 CSS3 JavaScript

Text Area Demo

🌟 Overview

A sleek, modern text input component built with pure HTML, CSS, and JavaScript that provides a delightful user experience with real-time character counting and visual feedback. Perfect for comments, reviews, or any application requiring character-limited user input.

✨ Features at a Glance ✨


Real-time Counter
Dynamic character countdown that updates with every keystroke
Visual Feedback
Color transitions to indicate input state
Character Limit
Enforces a strict 200 character limit

🚀 Features

  • ✅ Real-time character countdown - See exactly how many characters you have left
  • ✅ Visual feedback with elegant color transitions:
    • Normal state: Blue focus border
    • Limit reached: Red warning border
  • ✅ Character limit enforcement - Prevents exceeding the 200 character limit
  • ✅ Clean, modern design - Minimalist interface with subtle shadows
  • ✅ Responsive layout - Works perfectly on any device
  • ✅ No dependencies - Pure vanilla JavaScript

🛠️ Technologies

  • HTML5 for semantic structure
  • CSS3 for styling and transitions
  • JavaScript (Vanilla) for interactivity

💻 Implementation Details

The component uses event listeners to track text input in real-time:

textarea.addEventListener('input', function() {
    const currentLength = this.value.length;
    const remaining = maxLength - currentLength;
    
    // Update the counter
    charCount.textContent = remaining;
    
    // Visual feedback based on character count
    if (currentLength >= maxLength) {
        textarea.style.borderColor = 'red';
        textarea.style.boxShadow = '0 0 5px rgba(255, 0, 0, 0.5)';
        
        // Prevent exceeding the limit
        if (currentLength > maxLength) {
            this.value = this.value.substring(0, maxLength);
        }
    } else {
        textarea.style.borderColor = '#007bff';
        textarea.style.boxShadow = '0 0 5px rgba(0, 123, 255, 0.5)';
    }
});

📋 Usage

Simply open index.html in any modern browser to see the component in action.

To integrate into your own project:

  1. Copy the HTML structure
  2. Include the CSS styles
  3. Add the JavaScript for functionality

🔗 Integration Examples

Contact Form

<div class="contact-form">
  <h2>Send us a message</h2>
  <input type="text" placeholder="Your Name">
  <input type="email" placeholder="Your Email">
  <!-- Insert Restricted Text Area here -->
  <button type="submit">Send Message</button>
</div>

Comment Section

<div class="comment-section">
  <h3>Leave a comment</h3>
  <!-- Insert Restricted Text Area here -->
  <button type="submit">Post Comment</button>
</div>

📄 License

MIT License

👨‍💻 Author

@TheRealSaiTama

Part of the SimpleHTML collection.

Inspired by roadmap.sh