├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Word Counter

15 |
16 | 17 |
18 |
19 |

Words

20 | 0 21 |
22 |
23 |

Characters

24 | 0 25 |
26 |
27 |

Sentences

28 | 0 29 |
30 |
31 |

Paragraphs

32 | 0 33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector("textarea"); 2 | const wordCount = document.querySelector("[data-word-count]"); 3 | const characterCount = document.querySelector("[data-character-count]"); 4 | const sentenceCount = document.querySelector("[data-sentence-count]"); 5 | const paragraphCount = document.querySelector("[data-paragraph-count]"); 6 | 7 | input.addEventListener("input", function () { 8 | if (input.value) { 9 | // Count Words 10 | const wordsArray = input.value.split(" ").filter((word) => word !== ""); 11 | wordCount.innerText = wordsArray.length; 12 | 13 | // Count Characters 14 | characterCount.innerText = input.value.length; 15 | 16 | // Count Sentences 17 | const sentenceArray = input.value.split("."); 18 | 19 | sentenceCount.innerText = sentenceArray.length - 1; 20 | 21 | // Count Paragraph 22 | const paragraphArray = input.value 23 | .split("\n") 24 | .filter((p) => p.trim() !== ""); 25 | 26 | paragraphCount.innerText = paragraphArray.length; 27 | } else { 28 | wordCount.innerText = 29 | characterCount.innerText = 30 | sentenceCount.innerText = 31 | paragraphCount.innerText = 32 | 0; 33 | } 34 | }); 35 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Poppins; 9 | background-color: #090909; 10 | color: #a09fa4; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | gap: 5rem; 16 | } 17 | 18 | .container { 19 | width: 100%; 20 | max-width: 46rem; 21 | background-color: white; 22 | border-radius: 0.5rem; 23 | margin: 0 auto; 24 | display: flex; 25 | flex-direction: column; 26 | gap: 1rem; 27 | } 28 | 29 | textarea { 30 | resize: none; 31 | width: 100%; 32 | height: 250px; 33 | padding: 1rem; 34 | color: #242e3e; 35 | font: inherit; 36 | font-size: 1rem; 37 | border-radius: inherit; 38 | outline: none; 39 | border: 0; 40 | } 41 | 42 | .output-container { 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | gap: 3.5rem; 47 | padding: 1rem; 48 | border-top: 1px solid gray; 49 | } 50 | 51 | .output { 52 | display: flex; 53 | flex-direction: column; 54 | text-align: center; 55 | } 56 | 57 | .output p { 58 | font-size: 0.8rem; 59 | text-transform: uppercase; 60 | letter-spacing: 1px; 61 | } 62 | 63 | .output span { 64 | font-size: 1.6rem; 65 | font-weight: 700; 66 | color: #242e3e; 67 | } 68 | 69 | h1 { 70 | font-size: 2.6rem; 71 | color: white; 72 | text-align: center; 73 | } 74 | --------------------------------------------------------------------------------