Technical Specification: Free Online List Randomizer & Shuffler

1. Overview

A high-performance, browser-based utility designed to randomize, shuffle, and sort line-separated text. This tool serves as a utility for event planning, task management, and data organization. It operates entirely on the client side using Vanilla JavaScript.

2. Core Features

• Input Management: Multi-line textarea for bulk pasting.
• Fisher-Yates Shuffling: Robust randomizing algorithm for true randomness.
• Sorting Functionality: Options to sort alphabetically (A-Z, Z-A) or by line length.
• Numbered Output: Toggleable option to prepend numbers to the randomized list.
• Utilities: One-click "Copy to Clipboard", "Download as Text File", and "Clear Input" actions.
• Responsive UI: Fully fluid layout adapting from mobile screens to wide desktop monitors.

3. UI Layout Specification

• Header: Simple, clean typography displaying the tool name and a brief instructional subtitle.
• Main Area:
  • A high-contrast, edge-to-edge textarea with subtle drop shadows.
  • A control strip featuring primary action buttons (Shuffle, Sort, Copy, Clear).
  • A secondary configuration panel (checkboxes for line numbering, reverse sorting).
• Results Section:
  • Dynamic preview area that renders the updated list instantly upon interaction.
  • Smooth transition animations (fade-in) when the list order changes.

4. Design System & Aesthetics

• Color Palette (Light Mode Only):
  • Primary: #2563eb (Vibrant Blue for CTAs)
  • Background: #ffffff
  • Surface/Card: #f9fafb
  • Border/Divider: #e5e7eb
  • Typography: #111827 (Heading), #4b5563 (Body)
• Typography: Sans-serif, human-readable stack (e.g., Inter, -apple-system, sans-serif).
• Transitions: Use transition: all 0.2s ease-in-out for all button hover states and list updates.

5. Technical Constraints (Strict Compliance)

• Single File: All CSS/HTML/JS must reside in one .html file. CSS in <style> tags, JS in <script> tags.
• No Persistence: Use memory variables only. localStorage, sessionStorage, and cookies are strictly forbidden to ensure sandboxed compatibility.
• No External Dependencies (Unless CDN): Tailwind CSS via CDN is permitted for rapid styling. No NPM build steps.
• No Browser Popups: All interactions (e.g., "Copied to clipboard" notifications) must be native DOM elements (custom toasts/modals), not alert() or confirm().
• Sandbox-Ready: The code must be compatible with a sandboxed iframe. Ensure no restricted APIs are called.

6. Implementation Notes for Developer

• Algorithm: Use the Fisher-Yates shuffle algorithm for O(n) complexity. Avoid Math.random() - 0.5 as it is statistically biased.
• Performance: For large lists, utilize requestAnimationFrame if the UI becomes jittery during DOM manipulation.
• UX: Provide a clear visual "Success" state when clicking the Copy button (temporary icon change).
• Accessibility: Ensure high contrast ratios and appropriate aria-label tags on all button elements.