tools/.hta_slug/letter-counter.php

<section class="diZContainer diZmxAuto">
    <h1 class="diZBorderBottom">Text Counter</h1>
    <div class="diZMaxW600 diZmxAuto diZmyAuto diZFlexColumn toolsSection diZmt20">
        <label for="inputText">Enter your text:</label><br>
        <textarea class="" rows="10" id="inputText" placeholder="Type your text here..." oninput="countTextMetrics()" style="resize: vertical;"></textarea>
        <div>
          <p>Total letters: <span id="letterCount">0</span></p>
          <p>Total words: <span id="wordCount">0</span></p>
          <p>Total sentences: <span id="sentenceCount">0</span></p>
          <p>Total paragraphs: <span id="paragraphCount">0</span></p>
        </div>
    </div>
</section>
<section class="diZContainer diZmxAuto diZmb20">
  <div>
      <h2 class="diZBorderBottom">Content Limitations</h2>
      <table class="diZw70 diZmxAuto">
          <tr>
              <th class="diZTableBorder diZPadding5px">Name</th>
              <th class="diZTableBorder diZPadding5px">Min/Max</th>
              <th class="diZTableBorder diZPadding5px">Limit</th>
              <th class="diZTableBorder diZPadding5px">Type</th>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Meta Title</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">55</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Meta Description</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">160</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Google Ideal Post Content</td>
              <td class="diZTableBorder diZPadding5px">Min</td>
              <td class="diZTableBorder diZPadding5px">300</td>
              <td class="diZTableBorder diZPadding5px">Word</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Instagram Captions/Comments</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">2200</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Twitter Post</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">280</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Twitter Username</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">20</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Facebook Wall Post (Truncation)</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">477</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Facebook Wall Post (All)</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">63206</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Facebook Comment</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">8000</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Facebook Page Description</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">255</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Facebook Username</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">50</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Facebook Messenger Message</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">20000</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">YouTube Video Title</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">70</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">YouTube Video Description</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">5000</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Snapchat Caption</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">250</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
          <tr>
              <td class="diZTableBorder diZPadding5px">Pinterest Pin Description</td>
              <td class="diZTableBorder diZPadding5px">Max</td>
              <td class="diZTableBorder diZPadding5px">500</td>
              <td class="diZTableBorder diZPadding5px">Letter</td>
          </tr>
      </table>
  </div>
</section>

    <script>
        function countTextMetrics() {
            const text = document.getElementById('inputText').value;

            // Count letters
            const letterCount = text.replace(/[^a-zA-Z]/g, '').length;
            document.getElementById('letterCount').textContent = letterCount;

            // Count words
            const words = text.split(/\s+/).filter(word => word.length > 0);
            const wordCount = words.length;
            document.getElementById('wordCount').textContent = wordCount;

            // Count sentences
            const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0);
            const sentenceCount = sentences.length;
            document.getElementById('sentenceCount').textContent = sentenceCount;

            // Count paragraphs
            const paragraphs = text.split(/\n\n+/).filter(paragraph => paragraph.trim().length > 0);
            const paragraphCount = paragraphs.length;
            document.getElementById('paragraphCount').textContent = paragraphCount;
        }
    </script>