Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
  <style>
    /* Sidebar styles */
    .sidebar {
      width: 200px;
      background: #f0f0f0;
      padding: 10px;
      float: left;
    }

    /* Todo list styles */
    .todo-list {
      width: 400px;
      float: left;
      margin-left: 20px;
    }

    .todo-item {
      margin-bottom: 10px;
    }

    /* Button styles */
    .btn {
      display: inline-block;
      padding: 5px 10px;
      background: #4CAF50;
      color: #fff;
      border: none;
      cursor: pointer;
      margin-right: 5px;
    }

    .btn:hover {
      background: #45a049;
    }

    /* Input field styles */
    .input-field {
      margin-bottom: 10px;
    }

    /* Search input styles */
    .search-input {
      width: 100%;
      padding: 5px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <button class="btn" onclick="showCreateForm()">New Todo</button>
    <div class="input-field">
      <label for="assignee">Assignee:</label>
      <input type="text" id="assignee" />
    </div>
    <button class="btn" onclick="displayTodos()">Display Todos</button>
    <button class="btn" onclick="deleteTodos()">Delete Todos</button>
    <button class="btn" onclick="editTodos()">Edit Todos</button>
    <div class="input-field">
      <label for="search">Search by Assignee:</label>
      <input type="text" id="search" onkeyup="filterTodos()" />
    </div>
  </div>

  <div class="todo-list">
    <h3>Todo List</h3>
    <ul id="todoItems"></ul>
  </div>

  <script>
    let todos = [];

    function showCreateForm() {
      const assignee = document.getElementById("assignee").value;
      todos.push(assignee);
      document.getElementById("assignee").value = "";
      displayTodos();
    }

    function displayTodos() {
      const todoItems = document.getElementById("todoItems");
      todoItems.innerHTML = "";
      todos.forEach((assignee) => {
        const li = document.createElement("li");
        li.textContent = assignee;
        todoItems.appendChild(li);
      });
    }

    function deleteTodos() {
      const assignee = document.getElementById("assignee").value;
      todos = todos.filter((todo) => todo !== assignee);
      document.getElementById("assignee").value = "";
      displayTodos();
    }

    function editTodos() {
      const assignee = document.getElementById("assignee").value;
      const index = todos.findIndex((todo) => todo === assignee);
      if (index !== -1) {
        const newAssignee = prompt("Enter the new assignee:");
        todos[index] = newAssignee;
        displayTodos();
      } else {
        alert("Todo not found!");
      }
    }

    function filterTodos() {
  const searchValue = document.getElementById("search").value.toLowerCase();
  const filteredTodos = todos.filter((todo) =>
    todo.toLowerCase().includes(searchValue)
  );
  displayFilteredTodos(filteredTodos);
}

function displayFilteredTodos(filteredTodos) {
  const todoItems = document.getElementById("todoItems");
  todoItems.innerHTML = "";
  filteredTodos.forEach((assignee) => {
    const li = document.createElement("li");
    li.textContent = assignee;
    todoItems.appendChild(li);
  });
}
Editor is loading...