Untitled

unknown
plain_text
a year ago
4.7 kB
Indexable
Never
<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    .container {
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
    }

    .todo-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .todo-item input[type="text"] {
      flex-grow: 1;
      margin-right: 10px;
      padding: 5px;
    }

    .todo-item button {
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Todo List</h2>

    <div id="todo-list">
      <!-- The todo items will be dynamically added here -->
    </div>

    <form id="add-todo-form">
      <input type="text" id="todo-input" placeholder="Enter a new task">
      <button type="submit">Add Task</button>
    </form>
  </div>

  <script>
    // Keep track of the todo items
    let todos = [];

    // Function to render the todo list
    function renderTodoList() {
      const todoList = document.getElementById("todo-list");
      todoList.innerHTML = "";

      todos.forEach((todo, index) => {
        const todoItem = document.createElement("div");
        todoItem.classList.add("todo-item");

        const todoText = document.createElement("input");
        todoText.type = "text";
        todoText.value = todo;
        todoText.disabled = true;

        const editButton = document.createElement("button");
        editButton.innerText = "Edit";
        editButton.addEventListener("click", () => enableEditing(index));

        const deleteButton = document.createElement("button");
        deleteButton.innerText = "Delete";
        deleteButton.addEventListener("click", () => deleteTodoItem(index));

        todoItem.appendChild(todoText);
        todoItem.appendChild(editButton);
        todoItem.appendChild(deleteButton);

        todoList.appendChild(todoItem);
      });
    }

    // Function to add a new todo item
    function addTodoItem(event) {
      event.preventDefault();

      const todoInput = document.getElementById("todo-input");
      const newTodo = todoInput.value.trim();

      if (newTodo !== "") {
        todos.push(newTodo);
        renderTodoList();
        todoInput.value = "";
      }
    }

    // Function to enable editing of a todo item
    function enableEditing(index) {
      const todoList = document.getElementById("todo-list");
      const todoItem = todoList.children[index];

      const todoText = todoItem.querySelector("input[type='text']");
      todoText.disabled = false;
      todoText.focus();

      const editButton = todoItem.querySelector("button");
      editButton.innerText = "Save";
      editButton.removeEventListener("click", () => enableEditing(index));
      editButton.addEventListener("click", () => saveEditedItem(index));
    }

    // Function to save an edited todo item
    function saveEditedItem(index) {
      const todoList = document.getElementById("todo-list");
      const todoItem = todoList.children[index];

      const todoText = todoItem.querySelector("input[type='text']");
      todoText.disabled = true;

      const editButton = todoItem.querySelector("button");
      edit

<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
  <style>
    /* ... Existing CSS styles ... */

    .search-container {
      margin-top: 20px;
    }

    .search-container input[type="text"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Todo List</h2>

    <div class="search-container">
      <input type="text" id="search-input" placeholder="Search tasks">
    </div>

    <div id="todo-list">
      <!-- The todo items will be dynamically added here -->
    </div>

    <form id="add-todo-form">
      <input type="text" id="todo-input" placeholder="Enter a new task">
      <button type="submit">Add Task</button>
    </form>
  </div>

  <script>
    // ... Existing JavaScript code ...

    // Function to filter and render the todo list based on search input
    function filterTodoList() {
      const searchInput = document.getElementById("search-input");
      const searchTerm = searchInput.value.trim().toLowerCase();

      const filteredTodos = todos.filter(todo =>
        todo.toLowerCase().includes(searchTerm)
      );

      renderTodoList(filteredTodos);
    }

    // Event listener for search input
    document.getElementById("search-input").addEventListener("input", filterTodoList);
  </script>
</body>
</html>