Real-Time Character and Word Statistics Utility

Overview

A clean, professional, and high-performance utility designed to provide immediate text analytics. This tool allows users to input text and instantly view metrics such as character counts, word counts, and estimated reading time. The design emphasizes clarity, speed, and ease of use.

Technical Requirements

• Architecture: Single HTML file containing all necessary CSS and Vanilla JavaScript.
• Storage: Strictly in-memory state. No localStorage, sessionStorage, or cookies allowed.
• Compatibility: Must run inside a sandboxed iframe. Use custom UI modals instead of alert() or prompt().
• Responsiveness: Fluid layout using CSS Flexbox/Grid to ensure the text area and statistics cards stack appropriately on mobile devices.

Core Features

1. Dynamic Counting Engine: Real-time updates as the user types or pastes text.
2. Detailed Metrics Grid:
   • Characters (Total): Total length including spaces.
   • Characters (No Spaces): Pure alphanumeric character count.
   • Word Count: Standard whitespace-separated word identification.
   • Line Count: Based on newline character detection.
   • Reading Time: Based on an average reading speed of 200 words per minute.
3. Quick Actions:
   • Clear: Reset the input area with a smooth fade animation.
   • Copy to Clipboard: A one-click button to copy processed text, featuring a 'Copied!' toast confirmation.
4. Accessibility: High-contrast typography and screen-reader-friendly metric labels.

UI/UX Design

• Aesthetic: Modern SaaS-style. Clean white background (#FFFFFF), slate-gray text (#334155), and vibrant brand-neutral blue accents (#3B82F6).
• Layout:
  • Header: Simple, centered title block.
  • Main Input: A large, borderless textarea with subtle shadow on focus.
  • Dashboard: A responsive grid below the input area featuring 6 metric cards.
• Animations:
  • Subtle transition: all 0.2s ease-in-out for metric card hover effects.
  • Smooth fade-in for dynamic metric updates.

Color Palette

• Primary Blue: #3B82F6 (Buttons, focus states)
• Background: #F8FAFC (Page bg), #FFFFFF (Card bg)
• Text: #1E293B (Primary), #64748B (Secondary/Labels)
• Borders/Dividers: #E2E8F0