ListSm.art is a modern, and accessible list management application designed for simplicity and shareability. Built with vanilla JavaScript and jQuery, it provides a seamless experience for creating, managing, and sharing lists without requiring user accounts or server-side storage.
Key Highlights
No Registration Required: Start creating lists immediately
URL-Based Sharing: Share lists via direct URL links
Fully Accessible: WCAG 2.1 AA compliant
Responsive Design: Works on all devices
Offline Capable: Works without internet connection
Core Features
List Management
Add, edit, and organize items with intuitive controls. Each item supports up to 200 characters with real-time character counting.
Task Completion
Mark items as complete with visual indicators. Completed items are visually distinguished and can be filtered or cleared.
URL Sharing
Share your entire list via URL. The list data is encoded in the URL, making it instantly shareable without external dependencies.
Smart URL Detection
Automatically detects URLs in list items and converts them to clickable links that open in new tabs.
Bulk Operations
Clear completed items or remove all items with confirmation dialogs. Efficient list management for large collections.
List Statistics
Real-time statistics showing completed and pending items. Visual progress tracking for your lists.
User Guide
Getting Started
Add Items: Type your item in the input field and press Enter or click "Add to List"
Mark Complete: Click the circle icon next to any item to mark it as complete
Delete Items: Click the trash icon to remove individual items
Bulk Actions: Use "Clear Completed" or "Clear All" buttons for bulk operations
Share List: Click "Share List" to copy the URL to your clipboard
Keyboard Shortcuts
Shortcut
Action
Enter
Add new item to list
Escape
Return focus to input field
Tab
Navigate between interactive elements
URL Sharing
When you share a list URL, the recipient will see your exact list when they open the link. The URL contains all list data encoded in base64 format, making it completely self-contained.
Pro Tips
Use descriptive item names for better organization
Include URLs in your items - they'll automatically become clickable
Share lists with colleagues for collaborative planning
Bookmark your list URLs for quick access
Technical Implementation
Architecture
ListSm.art is built using a modern front-end stack with emphasis on accessibility and performance:
Frontend Stack
HTML5 with semantic markup
CSS3 with CSS Grid and Flexbox
Vanilla JavaScript (ES6+)
jQuery for DOM manipulation
Responsive Design
Mobile-first approach
CSS Grid and Flexbox layouts
Dynamic sizing based on screen size
Touch-friendly interface
Data Storage
In-memory JavaScript arrays
URL-based persistence
Base64 encoding for data transfer
No server-side storage required
Performance
Lightweight bundle size
Efficient DOM updates
Minimal external dependencies
Fast loading times
Data Structure
Each list item is stored as a JavaScript object with the following structure: