,br>

Word & Character Counter

0 Words

0 Characters

body { font-family: Arial, sans-serif; background-color: #f0f4f8; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%; text-align: center; } h1 { color: #333; margin-bottom: 20px; } textarea { width: 100%; height: 150px; padding: 10px; border: 2px solid #ddd; border-radius: 4px; font-size: 16px; resize: none; outline: none; } textarea:focus { border-color: #007BFF; } .count justify-content: space-around; margin-top: 20px; } .counter p { font-size: 18px; color: #555; } .counter span { font-weight: bold; color: #007BFF; } document.addEventListener("DOMContentLoaded", () => { const textInput = document.getElementById("textInput"); const wordCount = document.getElementById("wordCount"); const charCount = document.getElementById("charCount"); textInput.addEventListener("input", () => { const text = textInput.value; charCount.textContent = text.length; const words = text.trim().split(/\s+/); wordCount.textContent = words.filter(word => word.length > 0).length; }); });