HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    textarea { width: 100%; max-width: 400px; font-size: 1rem; }
  </style>
</head>
<body>
  <h1>Character counter</h1>
  <textarea id="textInput" rows="4" cols="40" placeholder="Type here…"></textarea>
  <p id="charCount">Characters: 0</p>
  <script>
    var textarea = document.getElementById("textInput");
    var charCount = document.getElementById("charCount");
    textarea.addEventListener("input", function () {
      charCount.textContent = "Characters: " + textarea.value.length;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript String length — live counter (Try It)