Textarea

About this module

A labeled textarea with a soft focus ring and a live character counter that turns amber near the limit.

Installation

1. 1

   Create the files

   Create `index.html`, `style.css` and (if listed) `script.js` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <div class="mh-field">
     <label for="msg">Message</label>
     <textarea id="msg" rows="4" maxlength="280" placeholder="Write something..."></textarea>
     <span class="mh-count" id="count">0 / 280</span>
   </div>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   const textarea = document.getElementById("msg");
   const count = document.getElementById("count");
   const max = textarea.maxLength;
   textarea.addEventListener("input", () => {
     count.textContent = `${textarea.value.length} / ${max}`;
     count.classList.toggle("warn", textarea.value.length > max * 0.85);
   });