Output Organizer

Overview

This is a web application designed to facilitate the organization and manipulation of text blocks. This tool allows users to add, delete, and reorder text blocks, providing a seamless interface for managing content efficiently. With its easy-to-use page system and clipboard integration, the Output Organizer is ideal for users seeking to streamline their text handling processes.

Features

• Dynamic Page Management: Users can add new pages to organize text blocks more efficiently. Each page acts as a container for a distinct set of text blocks.
• Add Text Blocks: Through a simple form submission, users can add new text blocks to the current page. Each block supports multiline text, allowing for detailed content creation.
• Reorder Text Blocks: Text blocks can be reordered within a page using drag-and-drop functionality or by clicking the up and down arrow icons, offering flexible organization.
• Delete Text Blocks: Users can remove individual text blocks from a page, enabling easy content management and decluttering.
• Clipboard Copying: A specialized feature allows users to copy all text blocks from the current page to the clipboard in a formatted manner, facilitating easy sharing and documentation.
• Responsive Design: The application is styled with responsiveness in mind, ensuring a smooth user experience across various devices.

Technologies Used

• HTML5 for structure
• CSS3 for styling, including Flexbox for layout management and responsive design principles
• Vanilla JavaScript for dynamic interaction and DOM manipulation
• External resources like Google Fonts for typography and Bootstrap Icons for user interface enhancement

Usage

1. Adding Pages: Click the "+" button in the header to add a new page.
2. Navigating Pages: Click on a page number to view its content. The active page is highlighted.
3. Adding Text Blocks: Enter text into the textarea and click "Submit" to add a new text block to the current page.
4. Reordering Text Blocks: Use the up and down arrows beside each text block to reorder them, or drag-and-drop to a new position.
5. Deleting Text Blocks: Click the "X" icon on a text block to remove it from the page.
6. Copying to Clipboard: Click the "Copy to Clipboard" button at the bottom of the indexes list to copy all text blocks from the current page in a formatted manner.