WIP Kanban - Not working

index.html

<div class="header">
    <h2>Kanban Board</h2>
  <p> WIP: Currently broken and not working as intended right now </p>
</div>
<div class="addTaskButton">
    <button class="add-task-btn" onclick="showAddTaskModal()">+ Add Task</button>
</div>
<div class="kanban-board">
    <div class="kanban-column" id="todo">
        <h3>Todo</h3>
        <div class="kanban-cards" id="todo-cards"></div>
    </div>
    <div class="kanban-column" id="doing">
        <h3>Doing</h3>
        <div class="kanban-cards" id="doing-cards"></div>
    </div>
    <div class="kanban-column" id="done">
        <h3>Done</h3>
        <div class="kanban-cards" id="done-cards"></div>
    </div>
</div>
<div id="add-task-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('add-task-modal')">&times;</span>
        <form id="add-form">
            <div class="form-group">
                <label for="add-task-title">Title:</label>
                <input type="text" id="add-task-title" class="form-control">
            </div>
            <div class="form-group">
                <label for="add-task-notes">Notes:</label>
                <textarea id="add-task-notes" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label for="add-task-due-date">Due Date:</label>
                <input type="date" id="add-task-due-date" class="form-control">
            </div>
            <button type="button" onclick="addNewTask()" class="btn-save">Add Task</button>
        </form>
    </div>
</div>
<div id="edit-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('edit-modal')">&times;</span>
        <form id="edit-form">
            <div class="form-group">
                <label for="edit-task-title">Title:</label>
                <input type="text" id="edit-task-title" class="form-control">
            </div>
            <div class="form-group">
                <label for="edit-task-notes">Notes:</label>
                <textarea id="edit-task-notes" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label for="edit-task-due-date">Due Date:</label>
                <input type="date" id="edit-task-due-date" class="form-control">
            </div>
            <button type="button" onclick="saveChanges()" class="btn-save">Save Changes</button>
        </form>
    </div>
</div>

script.js

document.addEventListener("DOMContentLoaded", function () {
    let currentEditingCard = null;

    function makeCardDraggable(card) {
        card.draggable = true;
        card.addEventListener("dragstart", function (event) {
            event.dataTransfer.setData("text/plain", event.target.id);
        });
    }

    function makeColumnsDroppable() {
        const columns = document.querySelectorAll(".kanban-column");
        columns.forEach((column) => {
            column.addEventListener("dragover", function (event) {
                event.preventDefault();
            });

            column.addEventListener("drop", function (event) {
                event.preventDefault();
                const id = event.dataTransfer.getData("text/plain");
                const card = document.getElementById(id);
                if (card) {
                    const columnId = column.id;
                    column.querySelector('.kanban-cards').appendChild(card); // Append card to the column's card container
                }
            });
        });
    }

    function createCard(title, notes, dueDate) {
        const card = document.createElement("div");
        card.className = "kanban-card";
        const cardTitle = document.createElement("h4");
        cardTitle.textContent = title;
        const cardNotes = document.createElement("p");
        cardNotes.textContent = `Notes: ${notes}`;
        const cardDueDate = document.createElement("p");
        cardDueDate.textContent = `Due: ${dueDate}`;
        const cardStatus = document.createElement("p");
        cardStatus.className = "card-info";
        cardStatus.textContent = "Status: Todo";

        card.appendChild(cardTitle);
        card.appendChild(cardNotes);
        card.appendChild(cardDueDate);
        card.appendChild(cardStatus);

        card.onclick = function () {
            showEditTaskModal(card);
        };

        return card;
    }

    function showEditTaskModal(card) {
        const editModal = document.getElementById("edit-modal");
        const title = card.querySelector("h4").textContent;
        const notes = card
            .querySelector("p:nth-of-type(2)")
            .textContent.replace("Notes: ", "");
        const dueDate = card
            .querySelector("p:nth-of-type(3)")
            .textContent.replace("Due: ", "");
        document.getElementById("edit-task-title").value = title;
        document.getElementById("edit-task-notes").value = notes;
        document.getElementById("edit-task-due-date").value = dueDate;
        currentEditingCard = card;

        editModal.style.display = "block";
    }

    //Placeholder task
    const defaultTodoColumn = document.getElementById("todo-cards");
    const defaultTitle = "Fix the editing modal";
    const defaultNotes = "The editing modal is not working as intended";
    const defaultDueDate = "";
    const defaultCard = createCard(defaultTitle, defaultNotes, defaultDueDate);
    makeCardDraggable(defaultCard);
    defaultTodoColumn.appendChild(defaultCard);

    const defaultTitle2 = "Fix the drag-drop";
    const defaultNotes2 = "Drag drop is not working as intended";
    const defaultDueDate2 = "";
    const defaultCard2 = createCard(
        defaultTitle2,
        defaultNotes2,
        defaultDueDate2
    );
    makeCardDraggable(defaultCard2);
    defaultTodoColumn.appendChild(defaultCard2);

    const defaultTitle3 = "Add delete functionality";
    const defaultNotes3 = "Option to delete a task";
    const defaultDueDate3 = "";
    const defaultCard3 = createCard(
        defaultTitle3,
        defaultNotes3,
        defaultDueDate3
    );
    makeCardDraggable(defaultCard3);
    defaultTodoColumn.appendChild(defaultCard3);

    // Enable card drag and drop between columns
    makeColumnsDroppable();
});

style.css

:root {
    --primary-color: #005f73;
    --secondary-color: #0077b6;
    --accent-color: #028090;
    --button-color: #02c39a;
    --highlight-color: #bee3db;
    --background-color: #f4f5f7;
    --card-border-color: #00b4d8;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
}

.header {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.addTaskButton {
    text-align: center;
    margin: 10px;
}

.add-task-btn {
    width: 20%;
    padding: 10px;
    margin: 10px auto;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}

.kanban-board {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    min-height: 90vh;
    box-sizing: border-box;
}

.kanban-column {
    width: 30%;
    background-color: #ffffff;
    margin: 0 10px;
    border-radius: 3px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.kanban-column h3 {
    width: 100%;
    background-color: var(--secondary-color);
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.kanban-cards {
    padding: 10px;
    width: 100%;
    min-height: 50px;
}

.kanban-card {
    background-color: #ffffff;
    border-left: 5px solid var(--card-border-color);
    box-shadow: 0 1px 0 rgba(9,30,66,.25);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    cursor: pointer;
    width: 90%;
    word-wrap: break-word;
}

.kanban-card h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.kanban-card p {
    margin: 5px 0;
}

.card-info {
    font-size: 0.9em;
}

.card-info span {
    margin-right: 10px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    border-radius: 3px;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.form-group {
    margin-bottom: 15px;
}

.form-control {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.btn-save {
    width: 100%;
    padding: 10px;
    background-color: var(--button-color);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.kanban-column.highlight {
    background-color: var(--highlight-color);
}

wip-kanban-not-working.markdown

WIP Kanban - Not working

A Pen by devshades on CodePen.

License.