Untitled
unknown
plain_text
2 years ago
9.0 kB
2
Indexable
<!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;
}
.edit-button {
background-color: #2196F3;
}
.delete-button {
background-color: #F44336;
}
</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 class="button" onclick="saveEditedTodoItem()">Save</button>
<button class="button" onclick="cancelEdit()">Cancel</button>
<input type="hidden" id="editTodoIndex">
</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 todoItem = todoList[index];
const editTaskInput = document.getElementById('editTaskInput');
const editAssignInput = document.getElementById('editAssignInput');
const editTodoIndex = document.getElementById('editTodoIndex');
editTaskInput.value = todoItem.task;
editAssignInput.value = todoItem.assignee;
editTodoIndex.value = index;
document.getElementById('editTodoItem').style.display = 'block';
}
function cancelEdit() {
document.getElementById('editTodoItem').style.display = 'none';
}
function saveEditedTodoItem() {
const editTaskInput = document.getElementById('editTaskInput');
const editAssignInput = document.getElementById('editAssignInput');
const editTodoIndex = document.getElementById('editTodoIndex');
const index = parseInt(editTodoIndex.value);
const newTask = editTaskInput.value;
const newAssignee = editAssignInput.value;
todoList[index].task = newTask;
todoList[index].assignee = newAssignee;
displayTodoTable();
cancelEdit();
}
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.className = 'button edit-button';
editButton.onclick = () => editTodoItem(i);
actionsCell.appendChild(editButton);
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.className = 'button delete-button';
deleteButton.onclick = () => deleteTodoItem(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.className = 'button edit-button';
editButton.onclick = () => editTodoItem(i);
actionsCell.appendChild(editButton);
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.className = 'button delete-button';
deleteButton.onclick = () => deleteTodoItem(i);
actionsCell.appendChild(deleteButton);
row.appendChild(actionsCell);
table.appendChild(row);
}
}
</script>
</body>
</html>