tools/letter-counter.php

    <style>
        /* body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        } */

        .container-dyz {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #3d3d3d;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .table-container {
            max-width: 900px;
            margin: 50px auto;
            padding: 20px;
            background-color: #3d3d3d;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            font-weight: bold;
        }

        .textarea-text {
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
            resize: vertical;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-size: 16px;
            background-color: #1d1d1d;
        }
        span {
            color: #007bff;
            font-weight: bold;
        }
        .content-table {
        width: 100%;
        border-collapse: collapse;
        }
        .content-table th, .content-table td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
        }
        .content-table .table-head {
        background-color: #f2f2f2;
        }
  </style>
    <div class="container-dyz">
        <h1>Text Counter</h1>
        <label for="inputText">Enter your text:</label><br>
        <textarea class="textarea-text" id="inputText" placeholder="Type your text here..." oninput="countTextMetrics()"></textarea>
        <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 class="table-container">
    <h2 style="text-align: center; font-size: 25px; font-weight: bold;">Content Limitations</h2>
    <table class="content-table">
    <tr>
      <th class="name">Name</th>
      <th class="min-max">Min/Max</th>
      <th class="limit">Limit</th>
      <th class="type">Type</th>
    </tr>
    <tr>
      <td class="name">Meta Title</td>
      <td class="min-max">Max</td>
      <td class="limit">55</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Meta Description</td>
      <td class="min-max">Max</td>
      <td class="limit">160</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Google Ideal Post Content</td>
      <td class="min-max">Min</td>
      <td class="limit">300</td>
      <td class="type">Word</td>
    </tr>
    <tr>
      <td class="name">Instagram Captions/Comments</td>
      <td class="min-max">Max</td>
      <td class="limit">2200</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Twitter Post</td>
      <td class="min-max">Max</td>
      <td class="limit">280</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Twitter Username</td>
      <td class="min-max">Max</td>
      <td class="limit">20</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Facebook Wall Post (Truncation)</td>
      <td class="min-max">Max</td>
      <td class="limit">477</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Facebook Wall Post (All)</td>
      <td class="min-max">Max</td>
      <td class="limit">63206</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Facebook Comment</td>
      <td class="min-max">Max</td>
      <td class="limit">8000</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Facebook Page Description</td>
      <td class="min-max">Max</td>
      <td class="limit">255</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Facebook Username</td>
      <td class="min-max">Max</td>
      <td class="limit">50</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Facebook Messenger Message</td>
      <td class="min-max">Max</td>
      <td class="limit">20000</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">YouTube Video Title</td>
      <td class="min-max">Max</td>
      <td class="limit">70</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">YouTube Video Description</td>
      <td class="min-max">Max</td>
      <td class="limit">5000</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Snapchat Caption</td>
      <td class="min-max">Max</td>
      <td class="limit">250</td>
      <td class="type">Letter</td>
    </tr>
    <tr>
      <td class="name">Pinterest Pin Description</td>
      <td class="min-max">Max</td>
      <td class="limit">500</td>
      <td class="type">Letter</td>
    </tr>
  </table>
    </div>

    <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>