Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
    <script>
        $(document).ready(() => {
            $("#datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "2017:2021",
            });

            $('.todo-task').draggable();
            $('#inProgress').droppable({
                accept: ".todo-task",
                drop: (event, ui) => {
                    $(ui.draggable[0]).removeClass('bg-success').addClass('bg-warning');
                }
            });
            $('#completed').droppable({
                accept: ".todo-task",
                drop: (event, ui) => {
                    $(ui.draggable[0]).removeClass('bg-warning').addClass('bg-success');
                }
            });
            $('#pending').droppable({
                accept: ".todo-task",
                drop: (event, ui) => {
                    $(ui.draggable[0]).removeClass('bg-warning').removeClass('bg-success');
                }
            });
            $('#delete-div').droppable({
                accept: ".todo-task",
                drop: (event, ui) => {
                    $(ui.draggable[0]).remove();
                }
            });

            $('#addtask').click((e) => {
                let $html = $(`<div class="todo-task my-5" id="">
                    <div class="task-header">${$("#title").val()}</div>
                    <div class="task-date">${$("#datepicker").val()}</div>
                    <div class="task-description">${$("#description").val()}</div>
                </div>`);
                $('#pending').append($html);
                $('.todo-task').draggable();
            });
        });
    </script>
    <style>
        .task-list {
          width: 250px;
          float: left;
          margin: 0 5px;
          background-color: #e3e3e3;
          min-height: 240px;
          border-radius: 10px;
          padding-bottom: 15px;
        }
        .todo-task{
            background:white;
            padding:6px;
        }
        #delete-div {
          background-color: #fff;
          border: 3px dotted #000;

          height: 75px;
          line-height: 75px;
          text-align: center;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="task-list task-container p-2" id="pending">
            <h3 class="text-center">Pending</h3>
            <div class="todo-task" id="randomid-123">
                <div class="task-header">Sample Header</div>
                <div class="task-date">25/06/1992</div>
                <div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
            </div>
        </div>

        <div class="task-list task-container p-2" id="inProgress">
            <h3 class="text-center">In Progress</h3>
        </div>

        <div class="task-list task-container p-2" id="completed">
            <h3 class="text-center">Completed</h3>
        </div>

        <div class="task-list task-container p-2">
            <h3 class="text-center">Add a task</h3>
            <form id="todo-form">
                <div class="form-group">
                    <input type="text" class="form-control" id="title" placeholder="Title" />
                    <textarea placeholder="Descrtipion" id="description" class="form-control"></textarea>
                    <input type="text" id="datepicker" class="form-control" placeholder="Due Date (dd/mm/yyyy)" />
                </div>
                <div class="form-group">
                    <input type="button" class="btn btn-block btn-primary" id="addtask" value="Add Task" />
                </div>
            </form>
            <input type="button" class="btn btn-block btn-primary" value="Clear Data" />

            <div id="delete-div" class=" mt-3">Drag Here to Delete</div>
        </div>
    </div>
</body>
</html>