Untitled

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="sidebar">
    <button id="assignTaskBtn">Assign Task</button>
    <button id="showDoneTasksBtn">Show Done Tasks</button>
    <input type="text" id="searchInput" placeholder="Search by assigned person">
  </div>

  <ul id="taskList"></ul>

  <script src="script.js"></script>
</body>
</html>

.sidebar {
  width: 200px;
  background-color: #f1f1f1;
  padding: 10px;
}

button {
  display: block;
  margin-bottom: 10px;
}

#searchInput {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

#taskList {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

.taskDescription {
  font-weight: bold;
}

.deleteButton {
  margin-left: 10px;
}

const assignTaskBtn = document.getElementById('assignTaskBtn');
const showDoneTasksBtn = document.getElementById('showDoneTasksBtn');
const searchInput = document.getElementById('searchInput');
const taskList = document.getElementById('taskList');

assignTaskBtn.addEventListener('click', assignTask);
showDoneTasksBtn.addEventListener('click', showDoneTasks);
searchInput.addEventListener('keyup', searchTasks);

let tasks = [];

function assignTask() {
  const taskDescription = prompt('Enter task description:');
  const assignedPerson = prompt('Assign task to:');
  
  if (taskDescription && assignedPerson) {
    tasks.push({ description: taskDescription, assignedTo: assignedPerson, done: false });
    displayTasks();
  }
}

function showDoneTasks() {
  const doneTasks = tasks.filter(task => task.done);
  displayTasks(doneTasks);
}

function searchTasks() {
  const searchTerm = searchInput.value.toLowerCase();
  const filteredTasks = tasks.filter(task => task.assignedTo.toLowerCase().includes(searchTerm));
  displayTasks(filteredTasks);
}

function toggleTaskDone(index) {
  tasks[index].done = !tasks[index].done;
  displayTasks();
}

function deleteTask(index) {
  tasks.splice(index, 1);
  displayTasks();
}

function displayTasks(filteredTasks = tasks) {
  taskList.innerHTML = '';

  filteredTasks.forEach((task, index) => {
    const li = document.createElement('li');
    const description = document.createElement('span');
    const assignedTo = document.createElement('span');
    const editButton = document.createElement('button');
    const deleteButton = document.createElement('button');

    description.textContent = task.description;
    assignedTo.textContent = `[Assigned to: ${task.assignedTo}]`;
    editButton.textContent = 'Edit';
    deleteButton.textContent = 'Delete';

    if (task.done) {
      li.style.textDecoration = 'line-through';
    }

    deleteButton.addEventListener('click', () => deleteTask(index));

    li.appendChild(description);
    li.appendChild(assignedTo);
    li.appendChild(editButton);
    li.appendChild(deleteButton);
    taskList.appendChild(li);
  });
}
Editor is loading...