Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kanban Board</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .kanban-board { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .column { | |
| width: 300px; | |
| background-color: #f4f4f4; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| padding: 10px; | |
| } | |
| .column h3 { | |
| text-align: center; | |
| } | |
| .card { | |
| background-color: #fff; | |
| border: 1px solid #ddd; | |
| border-radius: 3px; | |
| padding: 10px; | |
| margin: 10px 0; | |
| cursor: move; | |
| } | |
| .column.complete { | |
| background-color: #d4edda; | |
| border-color: #c3e6cb; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="kanban-board" id="kanban-board"></div> | |
| <script> | |
| const config = [ | |
| { | |
| title: "To Do", | |
| cards: [ | |
| { id: 1, title: "Identify key requirements for the healthcare product." }, | |
| { id: 2, title: "Define initial user stories for MVP development." } | |
| ] | |
| }, | |
| { | |
| title: "Doing", | |
| cards: [ | |
| { id: 3, title: "Develop prototype features based on feedback." } | |
| ] | |
| }, | |
| { | |
| title: "Done", | |
| cards: [ | |
| { id: 4, title: "Conduct stakeholder meetings to finalize project goals." } | |
| ] | |
| } | |
| ]; | |
| function createKanbanBoard(config) { | |
| const board = document.getElementById('kanban-board'); | |
| config.forEach(column => { | |
| const columnElement = document.createElement('div'); | |
| columnElement.classList.add('column'); | |
| const titleElement = document.createElement('h3'); | |
| titleElement.textContent = column.title; | |
| columnElement.appendChild(titleElement); | |
| const cardContainer = document.createElement('div'); | |
| cardContainer.classList.add('card-container'); | |
| cardContainer.addEventListener('dragover', (e) => e.preventDefault()); | |
| cardContainer.addEventListener('drop', (e) => { | |
| const cardId = e.dataTransfer.getData('text'); | |
| const card = document.getElementById(cardId); | |
| e.target.appendChild(card); | |
| checkCompletion(); | |
| }); | |
| column.cards.forEach(card => { | |
| const cardElement = document.createElement('div'); | |
| cardElement.classList.add('card'); | |
| cardElement.id = `card-${card.id}`; | |
| cardElement.textContent = card.title; | |
| cardElement.draggable = true; | |
| cardElement.addEventListener('dragstart', (e) => { | |
| e.dataTransfer.setData('text', cardElement.id); | |
| }); | |
| cardContainer.appendChild(cardElement); | |
| }); | |
| columnElement.appendChild(cardContainer); | |
| board.appendChild(columnElement); | |
| }); | |
| } | |
| function checkCompletion() { | |
| const columns = document.querySelectorAll('.column'); | |
| columns.forEach(column => { | |
| const cards = column.querySelectorAll('.card'); | |
| const cardContainer = column.querySelector('.card-container'); | |
| if (cards.length === 0) { | |
| cardContainer.classList.add('active'); | |
| } else { | |
| cardContainer.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| createKanbanBoard(config); | |
| </script> | |
| </body> | |
| </html> | |