A beautiful, feature-rich personal reading progress tracker built with vanilla HTML, CSS, and JavaScript. Track your reading journey with an elegant, library-inspired interface that keeps all your data completely private in your browser.
- Book Library: Add, edit, and delete books with title, author, pages, and optional cover images
- Progress Tracking: Update reading progress with number inputs and interactive sliders
- Visual Progress: Color-coded progress bars showing reading status at a glance
- Status Management: Automatic categorization (Not Started, In Progress, Completed)
- Smart Search: Find books by title or author with instant filtering
- Flexible Filtering: Filter by reading status or custom tags
- Multiple Sort Options: Sort by title, author, progress, pages, or date added
- Tag System: Organize books with custom tags for easy categorization
- Tag-based Filtering: Click tag chips to quickly filter your library
- Session Tracking: Log reading sessions with date, duration, and pages read
- Reading Timeline: View your reading history with expandable session summaries
- Statistics Dashboard: Track total books, pages read, completion rates, and status breakdowns
- Progress Analytics: Visual insights into your reading habits and completion trends
- Favorites System: Mark books as favorites with star toggle
- 5-Star Rating: Rate completed books from 1-5 stars
- Personal Notes: Add thoughts, intentions, or reminders for each book
- Progress Milestones: Track progress toward completion goals
- Dark Mode: Toggle between light and dark themes with automatic persistence
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Accessible Interface: Screen reader friendly with proper ARIA labels and semantic HTML
- Cozy Aesthetic: Library-inspired design with warm colors and elegant typography
- Interactive Controls: Smooth animations and hover effects for engaging experience
- Import/Export: Backup and share your library with JSON export/import functionality
- Local Storage: All data stays completely private in your browser - no accounts or servers
- Data Persistence: Your library is automatically saved locally across sessions
- Cross-Device Sync: Export from one device, import on another for manual synchronization
- Data Integrity: Robust error handling and data validation on import
- Download the complete application (single
index.htmlfile) - Open the file in any modern web browser (Chrome, Firefox, Safari, Edge)
- Add your first book by clicking the "Add book" button in the toolbar
- Start tracking your reading progress immediately with sliders and quick actions
No installation required, no accounts needed, works completely offline!
- Click "Add book" button in the toolbar
- Fill in required fields: title, author, and total pages
- Optionally add:
- Cover image URL for visual appeal
- Comma-separated tags for organization
- Starting progress if already reading
- Personal notes or reading intentions
- Click "Save" to add to your library
- Number Input: Directly enter pages read
- Interactive Slider: Drag to adjust progress with live updates
- Quick Actions: Use +10, -5, Mark Done, or Reset buttons
- Real-time Updates: Progress bars and statistics update instantly
- Session Logging: Record reading sessions with time and page details
- Search: Type in search box to find books by title or author
- Status Filter: Use dropdown to show only books with specific status
- Tag Filtering: Click tag chips to filter by categories you've created
- Sorting: Choose from multiple sort options (recent, alphabetical, progress, etc.)
- Multi-level Organization: Combine search, filters, and tags for precise book discovery
- Click "Session" button on any book card
- Set date, reading duration (minutes), and pages covered
- Sessions automatically update your overall progress
- View session history by expanding the sessions list
- Sessions are sorted chronologically for easy tracking
- Export: Click "Export" to download complete library as JSON file
- Import: Click "Import" and select previously exported JSON file
- Backup Strategy: Regular exports serve as backups of your reading data
- Data Portability: JSON format ensures data can be used with other applications
Fully supported in all modern browsers:
- Chrome/Chromium 90+
- Firefox 88+
- Safari 14+
- Microsoft Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile, Samsung Internet)
- 100% Client-Side: No data ever leaves your browser or device
- No Tracking: Zero analytics, cookies, or tracking scripts
- Offline Capable: Works completely offline after initial page load
- Local Storage Only: Data stored securely in browser's localStorage API
- No Network Requests: No external API calls or data transmission
- Self-Contained: Single file contains entire application
- Vanilla JavaScript: No frameworks or external dependencies
- Progressive Enhancement: Graceful degradation for accessibility
- Semantic HTML5: Proper document structure and ARIA labels
- CSS Custom Properties: Modern styling with comprehensive theme support
- Event-Driven Architecture: Efficient DOM manipulation and state management
- LocalStorage API: Persistent data storage
- File API: Import/export functionality
- CSS Grid & Flexbox: Responsive layout system
- CSS Transitions: Smooth animations and interactions
- ES6+ Features: Modern JavaScript with proper error handling
- Efficient Rendering: Minimal DOM manipulation with targeted updates
- Debounced Search: Optimized search input with 120ms debounce
- Lazy Rendering: Smart re-rendering only when necessary
- Memory Management: Proper cleanup and garbage collection
reading-tracker/
├── index.html # Complete single-file application
│ # Contains HTML structure, CSS styles, and JavaScript logic
├── README.md # This documentation
└── examples/ # Optional: Sample export files for testing
└── sample-library.json
The application uses CSS custom properties for easy theming. Key customization areas:
Modify the :root and body.dark CSS variables:
- Primary colors for branding
- Background and surface colors
- Text and accent colors
- Progress bar colors
- Grid breakpoints for responsive design
- Card spacing and sizing
- Typography scale and fonts
The modular JavaScript architecture allows for easy feature additions:
- Additional book metadata fields
- Advanced filtering options
- Reading goal tracking
- Statistical visualizations
This single-file application is designed for simplicity and portability. To contribute:
- Test thoroughly across different browsers and screen sizes
- Maintain accessibility standards and ARIA compliance
- Preserve privacy - no external dependencies or network calls
- Keep it self-contained - everything must remain in the single HTML file
- Follow coding standards - consistent formatting and commenting
When reporting bugs or requesting features:
- Include browser version and operating system
- Provide steps to reproduce the issue
- Verify localStorage is enabled in your browser
- Check browser console for error messages
MIT License - Free to use, modify, and distribute. See the full license text for details.
- Inspired by the cozy aesthetics of personal libraries and bookshops
- Design influenced by modern reading applications and book management tools
- Built with accessibility, privacy, and user experience as core principles
- Typography and color palette designed for comfortable long-term use
Ready to start your reading journey? Download the HTML file and begin tracking your literary adventures today. Your books, your data, your privacy - all in one beautiful, self-contained application.