Scrum Board is an interactive, user-friendly Scrum Board task management application built with JavaScript Vanilla, HTML5, and CSS3 Bootstrap . Designed for efficient task management in a Scrum framework, the application provides a dynamic and accessible board for tracking the stages of tasks across "To Do," "Doing," and "Done" columns, ensuring data persistence and an optimized user experience.
- CRUD Functionalities: Add, edit, and delete tasks with form validation to maintain data integrity.
- Field Validation: Ensures all required fields are filled correctly before adding or updating a task.
- Interactive Modal Window: A modal for creating and editing tasks with validation for smooth user interaction.
- LocalStorage Integration: Automatically saves tasks and board state, allowing data to persist across sessions.
- Drag and Drop (Optional): Move tasks between columns ("To Do," "Doing," "Done") for easy task progress tracking.
- Animations: Light animations enhance the experience when adding, moving, and removing tasks.
- JavaScript (Vanilla): All dynamic functionalities are built without dependencies on frameworks to optimize performance.
- HTML5/CSS3: Structuring and styling of the dashboard are responsive and modern.
- **User: I can add a new task to the "To Do" column by filling in the required fields in the modal.
- **User: I can move tasks between columns by dragging and dropping to visually track progress.
- **User: I want my tasks and their statuses to be saved automatically to LocalStorage for retrieval in future sessions.
- **Developer: Implement field validation to ensure only complete tasks are added or edited.
- **Project Team: Ensure that the task deletion functionality removes only the intended tasks from the board.
- **Developer: Design an interactive modal interface that enables task creation and modification without leaving the main page.
- Clone the repository:
git clone https://github.com/alid404/YoucodeScrum-Board
- Open the
index.htmlfile in your browser to run the application locally.
- **Adding Tasks: Click "Add Task" to open the modal. Fill in the required fields and submit.
- **Editing Tasks: Click on a task to edit it in the modal.
- **Deleting Tasks: Click the delete button within each task to remove it.
- **Data Persistence: All tasks are saved to LocalStorage and automatically reloaded on page refresh.
- Modular, Documented Code:* Code is organized into functional modules for maintainability, following a functional programming approach.
- Accessibility:* The board is designed to be compatible with screen readers and other accessibility devices.