Create an interactive Text Analyzer tool where users can paste/type a paragraph and the UI will automatically display:
Total characters
Total words
Total sentences
This challenge is focused on simple interaction + clean UI design.
The tool should update counts in real time and remain responsive across screen sizes.
🧩 Requirements
-A clean input area (textarea) where users can type or paste text.
-A stats panel that displays:
Character count
Word count
Sentence count
-Real-time updating: counts should change whenever the text changes.
-Responsive layout for mobile, tablet, and desktop.
-Modern, minimal UI with good spacing and typography.
-Hover & focus states for the input area and UI elements.
-Basic JavaScript allowed but avoid overly complex logic.
📋 Tasks / Checklist
-Set up basic page structure with a header/title.
-Add a large textarea for text input.
-Create a stats container with three boxes/cards:
Characters
Words
Sentences
Write JavaScript to:
-Count characters (including/excluding spaces optional)
-Count words (split on spaces/newlines)
-Count sentences (split on ., ?, !)
-Update counts dynamically on each input event.
-Style the layout with modern UI (rounded cards, shadows, or minimal style).
-Add hover/focus behavior to interactive elements.
-Make the layout responsive with proper breakpoints.
-Test with multiple paragraphs and edge cases (empty text, single word, etc.).
🎯 Acceptance Criteria
-Users can type or paste text into the textarea.
-Character, word, and sentence counts update in real time.
-Counts are displayed clearly in a clean UI panel.
-No layout breaking or overflow issues.
-Input area has visible focus styling.
-JavaScript logic is simple, readable, and accurate.
-No backend or database required.
Mockup:
Create an interactive Text Analyzer tool where users can paste/type a paragraph and the UI will automatically display:
Total characters
Total words
Total sentences
This challenge is focused on simple interaction + clean UI design.
The tool should update counts in real time and remain responsive across screen sizes.
🧩 Requirements
-A clean input area (textarea) where users can type or paste text.
-A stats panel that displays:
Character count
Word count
Sentence count
-Real-time updating: counts should change whenever the text changes.
-Responsive layout for mobile, tablet, and desktop.
-Modern, minimal UI with good spacing and typography.
-Hover & focus states for the input area and UI elements.
-Basic JavaScript allowed but avoid overly complex logic.
📋 Tasks / Checklist
-Set up basic page structure with a header/title.
-Add a large textarea for text input.
-Create a stats container with three boxes/cards:
Characters
Words
Sentences
Write JavaScript to:
-Count characters (including/excluding spaces optional)
-Count words (split on spaces/newlines)
-Count sentences (split on ., ?, !)
-Update counts dynamically on each input event.
-Style the layout with modern UI (rounded cards, shadows, or minimal style).
-Add hover/focus behavior to interactive elements.
-Make the layout responsive with proper breakpoints.
-Test with multiple paragraphs and edge cases (empty text, single word, etc.).
🎯 Acceptance Criteria
-Users can type or paste text into the textarea.
-Character, word, and sentence counts update in real time.
-Counts are displayed clearly in a clean UI panel.
-No layout breaking or overflow issues.
-Input area has visible focus styling.
-JavaScript logic is simple, readable, and accurate.
-No backend or database required.
Mockup: