Day 02: Character Count / Textarea Limit

Create a textarea that updates a live character count as the user types.

JavaScript focus

  • input event
  • reading value
  • string length
  • live DOM updates

Nice extras

  • warning style near limit
  • hard character max
  • remaining characters instead of total count

MDN prep

Textarea

0 / 250 Characters

The HTML

							
								<div class="form_field">
								    <label for="message">Message</label>
								    <textarea id="message" name="message" rows="6"></textarea>
								    <p class="field_meta">
								        <span id="character-count">0</span> /
								        <span id="max-length">250</span> Characters
								    </p>
								</div>

The JavaScript

							
								function initCharCount() {
								    const textarea = document.getElementById("message");
								    const charCount = document.getElementById("character-count");
								    const maxLength = document.getElementById("max-length");
								    const fieldMeta = document.querySelector(".field_meta");

								    if (!textarea || !charCount || !maxLength || !fieldMeta) return;

								    textarea.setAttribute("maxlength", "250");
								    textarea.addEventListener("input", updateValue);

								    function updateValue(e) {
								        const count = e.target.value;
								        charCount.textContent = count.length;
								        maxLength.textContent = 250 - count.length;
								        if (count.length >= 240) {
								            fieldMeta.classList.add("red");
								        } else {
								            fieldMeta.classList.remove("red");
								        }
								    }
								}
								initCharCount();