How to make a word counter in HTML, CSS, and JavaScript ?

 Here's a simple word counter in HTML, CSS, and JavaScript that includes:

  • Word and character count
  • Keyword density analysis
  • Social media post limits for Facebook, Twitter, and Google
------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Counter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
        textarea {
            width: 80%;
            height: 150px;
            padding: 10px;
        }
        .stats {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Word Counter</h1>
    <textarea id="textInput" oninput="updateStats()" placeholder="Type or paste your text here..."></textarea>
    
    <div class="stats">
        <p>Words: <span id="wordCount">0</span></p>
        <p>Characters: <span id="charCount">0</span></p>
        <p>Facebook: <span id="fbCount">0</span> / 250</p>
        <p>Twitter: <span id="twitterCount">0</span> / 280</p>
        <p>Google: <span id="googleCount">0</span> / 300</p>
    </div>
    
    <script>
        function updateStats() {
            let text = document.getElementById("textInput").value;
            let words = text.match(/\b\w+\b/g) || [];
            let characters = text.length;
            
            document.getElementById("wordCount").innerText = words.length;
            document.getElementById("charCount").innerText = characters;
            document.getElementById("fbCount").innerText = characters;
            document.getElementById("twitterCount").innerText = characters;
            document.getElementById("googleCount").innerText = characters;
        }
    </script>
</body>
</html>

Comments