Form with Character Counter

<!DOCTYPE html>
<title>My Example</title>

<div class="char-counter-container">
    <h3>Compose a Short Bio</h3>
    <form action="#" method="post">
        <div class="form-group">
            <label for="bio-textarea">Your Bio</label>
            <textarea id="bio-textarea" name="bio" maxlength="140" placeholder="Tell us something about yourself..."></textarea>
            
            <div class="char-counter" id="char-counter">0/140</div>
        </div>
        <button type="submit">Save</button>
    </form>
</div>

if (textArea && charCounter) {
    const maxLength = textArea.getAttribute('maxlength');

textArea.addEventListener('input', () => {
        const currentLength = textArea.value.length;
        
        // Update the text
        charCounter.textContent = `${currentLength}/${maxLength}`;

// Update the color based on length
        // e.g., show warning at 90% of the max length
        if (currentLength >= maxLength) {
            charCounter.className = 'char-counter error';
        } else if (currentLength >= maxLength * 0.9) {
            charCounter.className = 'char-counter warning';
        } else {
            charCounter.className = 'char-counter';
        }
    });
}
</script>