Untitled

unknown
plain_text
a year ago
8.1 kB
Indexable
Never
<!DOCTYPE html>
<html>
<head>
    <title>Todo List App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        #sidebar {
            background-color: #f1f1f1;
            height: 100%;
            padding: 20px;
            width: 200px;
            float: left;
        }

        #content {
            margin-left: 220px;
            padding: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="sidebar">
        <button class="button" onclick="showAddTodoForm()">Add Todo List Item</button><br>
        <button class="button" onclick="showTodoData()">Show Todo Data</button>
    </div>

    <div id="content">
        <h2>Todo List</h2>

        <div id="addTodoForm" style="display: none;">
            <h3>Add Todo Item</h3>
            <form onsubmit="addTodoItem(event)">
                <input type="text" id="taskInput" placeholder="Task" required>
                <input type="text" id="assignInput" placeholder="Assignee" required>
                <input type="submit" value="Submit">
            </form>
        </div>

        <div id="todoData" style="display: none;">
            <h3>Todo Data</h3>

            <input type="text" id="searchInput" placeholder="Search by Assignee" oninput="searchTodoData()">

            <table id="todoTable">
                <tr>
                    <th>Task</th>
                    <th>Assignee</th>
                    <th>Actions</th>
                </tr>
            </table>
        </div>

        <div id="editTodoItem" style="display: none;">
            <h3>Edit Todo Item</h3>
            <form onsubmit="event.preventDefault();">
                <input type="text" id="editTaskInput" placeholder="Task" required>
                <input type="text" id="editAssignInput" placeholder="Assignee" required>
                <button type="button" onclick="saveEditedTodoItem()">Save</button>
                <button type="button" onclick="cancelEdit()">Cancel</button>
            </form>
        </div>
    </div>

    <script>
        let todoList = [];

        function showAddTodoForm() {
            document.getElementById('addTodoForm').style.display = 'block';
            document.getElementById('todoData').style.display = 'none';
            document.getElementById('editTodoItem').style.display = 'none';
        }

        function showTodoData() {
            document.getElementById('addTodoForm').style.display = 'none';
            document.getElementById('todoData').style.display = 'block';
            document.getElementById('editTodoItem').style.display = 'none';

            displayTodoTable();
        }

        function addTodoItem(event) {
            event.preventDefault();

            const taskInput = document.getElementById('taskInput');
            const assignInput = document.getElementById('assignInput');

            const task = taskInput.value;
            const assignee = assignInput.value;

            todoList.push({ task, assignee });

            taskInput.value = '';
            assignInput.value = '';

            displayTodoTable();
        }

        function deleteTodoItem(index) {
            todoList.splice(index, 1);
            displayTodoTable();
        }

        function editTodoItem(index) {
            const taskInput = document.getElementById('editTaskInput');
            const assignInput = document.getElementById('editAssignInput');

            taskInput.value = todoList[index].task;
            assignInput.value = todoList[index].assignee;

            const saveButton = document.getElementById('editSaveButton');
            saveButton.onclick = function() {
                const newAssignee = assignInput.value;

                todoList[index].assignee = newAssignee;

                displayTodoTable();
                cancelEdit();
            };

            document.getElementById('editTodoItem').style.display = 'block';
        }

        function cancelEdit() {
            document.getElementById('editTodoItem').style.display = 'none';
        }

        function displayTodoTable() {
            const table = document.getElementById('todoTable');
            table.innerHTML = `
                <tr>
                    <th>Task</th>
                    <th>Assignee</th>
                    <th>Actions</th>
                </tr>
            `;

            for (let i = 0; i < todoList.length; i++) {
                const todoItem = todoList[i];
                const row = document.createElement('tr');

                const taskCell = document.createElement('td');
                taskCell.textContent = todoItem.task;
                row.appendChild(taskCell);

                const assigneeCell = document.createElement('td');
                assigneeCell.textContent = todoItem.assignee;
                row.appendChild(assigneeCell);

                const actionsCell = document.createElement('td');
                const editButton = document.createElement('button');
                editButton.textContent = 'Edit';
                editButton.onclick = editTodoItem.bind(null, i);
                actionsCell.appendChild(editButton);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.onclick = deleteTodoItem.bind(null, i);
                actionsCell.appendChild(deleteButton);

                row.appendChild(actionsCell);

                table.appendChild(row);
            }
        }

        function searchTodoData() {
            const searchInput = document.getElementById('searchInput');
            const searchValue = searchInput.value.toLowerCase();

            const filteredTodoList = todoList.filter(todoItem => todoItem.assignee.toLowerCase().includes(searchValue));

            displayFilteredTodoTable(filteredTodoList);
        }

        function displayFilteredTodoTable(filteredTodoList) {
            const table = document.getElementById('todoTable');
            table.innerHTML = `
                <tr>
                    <th>Task</th>
                    <th>Assignee</th>
                    <th>Actions</th>
                </tr>
            `;

            for (let i = 0; i < filteredTodoList.length; i++) {
                const todoItem = filteredTodoList[i];
                const row = document.createElement('tr');

                const taskCell = document.createElement('td');
                taskCell.textContent = todoItem.task;
                row.appendChild(taskCell);

                const assigneeCell = document.createElement('td');
                assigneeCell.textContent = todoItem.assignee;
                row.appendChild(assigneeCell);

                const actionsCell = document.createElement('td');
                const editButton = document.createElement('button');
                editButton.textContent = 'Edit';
                editButton.onclick = editTodoItem.bind(null, i);
                actionsCell.appendChild(editButton);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.onclick = deleteTodoItem.bind(null, i);
                actionsCell.appendChild(deleteButton);

                row.appendChild(actionsCell);

                table.appendChild(row);
            }
        }
    </script>
</body>
</html>