<div style="background:#1e222d; color:#fff; padding:25px; border-radius:12px; font-family:sans-serif; max-width:800px; margin: auto;"> <h2 style="color:#24ee89; text-align:center; margin-bottom:20px;">Word & Character Counter AI</h2> <textarea id="textInput" placeholder="Type or paste your text here..." style="width:100%; height:180px; background:#292d3e; color:#fff; border:1px solid #3a415a; border-radius:8px; padding:12px; font-size:16px; box-sizing:border-box; outline:none; resize:vertical;"></textarea> <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-top:20px;"> <div style="background:#292d3e; padding:15px; border-radius:8px; text-align:center;"> <span style="font-size:22px; font-weight:bold; color:#24ee89;" id="wordCount">0</span> <p style="margin:5px 0 0; font-size:13px; color:#a0a0a0;">Words</p> </div> <div style="background:#292d3e; padding:15px; border-radius:8px; text-align:center;"> <span style="font-size:22px; font-weight:bold; color:#24ee89;" id="charCount">0</span> <p style="margin:5px 0 0; font-size:13px; color:#a0a0a0;">Characters</p> </div> <div style="background:#292d3e; padding:15px; border-radius:8px; text-align:center;"> <span style="font-size:22px; font-weight:bold; color:#24ee89;" id="paraCount">0</span> <p style="margin:5px 0 0; font-size:13px; color:#a0a0a0;">Paragraphs</p> </div> <div style="background:#292d3e; padding:15px; border-radius:8px; text-align:center;"> <span style="font-size:22px; font-weight:bold; color:#24ee89;" id="readingTime">0 min</span> <p style="margin:5px 0 0; font-size:13px; color:#a0a0a0;">Reading Time</p> </div> </div> </div> <script> document.getElementById('textInput').addEventListener('input', function() { const text = this.value; const words = text.trim() ? text.trim().split(/\s+/).length : 0; const chars = text.length; const paras = text.trim() ? text.split(/\n+/).filter(p => p.trim() !== '').length : 0; const readTime = Math.ceil(words / 200); document.getElementById('wordCount').innerText = words; document.getElementById('charCount').innerText = chars; document.getElementById('paraCount').innerText = paras; document.getElementById('readingTime').innerText = readTime + ' min'; }); </script> <hr style="border:0; border-top:1px solid #3a415a; margin:30px 0;"> <h3>About Word & Character Counter AI</h3> <p>Word & Character Counter AI is a fast, client-side utility designed to help bloggers, students, and content creators analyze their text instantly. Whether you are preparing social media posts with character limits or writing long-form essays, this tool provides real-time statistics without sending your data to any server.</p> <h4>Key Features:</h4> <ul> <li><strong>Real-time Analysis:</strong> Instant calculation of words, characters, and paragraphs.</li> <li><strong>Estimated Reading Time:</strong> Based on an average adult reading speed of 200 words per minute.</li> <li><strong>Privacy Focused:</strong> All processing happens directly inside your browser.</li> </ul>