Exercise 4: Auto Character Counter (textarea)
Problem Statement
Function `bindCounter(textarea, counterEl, max)` banao jo live count dikhaye and overflow pe red class add kare.
Sample Output:
bindCounter(textarea, counterEl, 100) // Typing "Hello" (5 chars): counterEl.textContent => "5/100", no red class // Typing 150 chars: counterEl.textContent => "150/100", red class added
Solution
const bindCounter = (ta, out, max) => {
const render = () => {
const len = ta.value.length;
out.textContent = String(len) + '/' + String(max);
out.classList.toggle('text-red-600', len > max);
};
ta.addEventListener('input', render);
render();
};Explanation
Overall Goal:
- Textarea me typing ke time live character count dikhana.
- Limit exceed ho to visual feedback (red color).
Line 1: Function header
const bindCounter = (ta, out, max) => {ta→ textarea element.out→ output element (count display karne ke liye).max→ maximum allowed characters.
Line 2-6: Render function
const render = () => {→ function jo count update karega.const len = ta.value.length;→ current text length.out.textContent = String(len) + '/' + String(max);- Count format: "50/100" (current/max).
String()→ number ko string me convert.out.classList.toggle('text-red-600', len > max);classList.toggle(class, condition)→- Agar condition true → class add.
- Agar condition false → class remove.
len > max→ overflow check.
Line 7: Event listener
ta.addEventListener('input', render);'input'→ event type: typing ke time trigger.render→ callback: har keystroke pe count update.
Line 8: Initial render
render();→ page load pe pehli baar count dikhana.
Real world:
- Twitter/X character counter: 280 limit.
- Bio/about sections: character limits.
- Form descriptions: max length validation.