Untitled
unknown
plain_text
a year ago
5.2 kB
2
Indexable
Never
<div class="sidebar"> <button id="add-task-btn">Add Task</button> <button id="show-task-btn">Show Tasks</button> </div> <div id="add-task-content" class="content hidden"> <h2>Add Task</h2> <div id="todo-container"> <input type="text" id="todo-input" placeholder="Enter a task"> <button id="add-button">Add</button> </div> </div> <div id="show-task-content" class="content hidden"> <h2>Tasks</h2> <input type="text" id="search-input" placeholder="Search by assigned person"> <ul id="todo-list"></ul> </div> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .sidebar { width: 200px; background-color: #f1f1f1; padding: 10px; } .sidebar button { display: block; margin-bottom: 10px; } .content { margin: 30px; } .hidden { display: none; } h2 { margin-top: 0; } #todo-container { display: flex; justify-content: center; margin: 30px 0; } #todo-input { padding: 8px; font-size: 16px; border-radius: 4px; border: 1px solid #ccc; width: 300px; margin-right: 10px; } #add-button { padding: 8px 12px; font-size: 16px; border-radius: 4px; border: none; background-color: #4CAF50; color: white; cursor: pointer; } #add-button:hover { background-color: #45a049; } #todo-list { list-style-type: none; margin: 0; padding: 0; } .todo-item { display: flex; align-items: center; background-color: white; padding: 10px; margin-bottom: 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .todo-item span { flex-grow: 1; margin-right: 10px; } .todo-item button { padding: 4px 8px; font-size: 14px; border-radius: 4px; border: none; background-color: #f44336; color: white; cursor: pointer; } .todo-item button:hover { background-color: #e53935; } .todo-item.done { text-decoration: line-through; background-color: #e0e0e0; color: #999999; } show-task-btn'); const addTaskContent = document.getElementById('add-task-content'); const showTaskContent = document.getElementById('show-task-content'); // Add event listener to add task button addTaskBtn.addEventListener('click', showAddTaskContent); // Add event listener to show task button showTaskBtn.addEventListener('click', showShowTaskContent); // Add event listener to add button addButton.addEventListener('click', addTodo); // Add event listener to handle 'Enter' key press on input field todoInput.addEventListener('keyup', function(event) { if (event.key === 'Enter') { addTodo(); } }); // Add event listener to search input searchInput.addEventListener('input', filterTasks); // Array to store all tasks let tasks = []; // Function to show the add task content and hide the show task content function showAddTaskContent() { addTaskContent.classList.remove('hidden'); showTaskContent.classList.add('hidden'); } // Function to show the show task content and hide the add task content function showShowTaskContent() { showTaskContent.classList.remove('hidden'); addTaskContent.classList.add('hidden'); } // Function to add a new todo item function addTodo() { const todoText = todoInput.value.trim(); if (todoText !== '') { const todoItem = createTodoItem(todoText); tasks.push(todoItem); todoList.appendChild(todoItem); todoInput.value = ''; } } // Function to create a new todo item function createTodoItem(text) { const todoItem = document.createElement('li'); todoItem.classList.add('todo-item'); const todoText = document.createElement('span'); todoText.innerText = text; const dropdown = createDropdown(); const deleteButton = document.createElement('button'); deleteButton.innerText = 'Delete'; deleteButton.classList.add('delete-button'); deleteButton.addEventListener('click', deleteTodo); todoItem.appendChild(todoText); todoItem.appendChild(dropdown); todoItem.appendChild(deleteButton); return todoItem; } // Function to create a dropdown for the todo item function createDropdown() { const dropdown = document.createElement('select'); const option1 = document.createElement('option'); option1.value = 'not-started'; option1.innerText = 'Not Started'; const option2 = document.createElement('option'); option2.value = 'in-progress'; option2.innerText = 'In Progress'; const option3 = document.createElement('option'); option3.value = 'completed'; option3.innerText = 'Completed'; dropdown.appendChild(option1); dropdown.appendChild(option2); dropdown.appendChild(option3); return dropdown; } // Function to delete a todo item function deleteTodo() { const todoItem = this.parentNode; tasks = tasks.filter(item => item !== todoItem); todoList.removeChild(todoItem); } // Function to filter tasks based on the search input function filterTasks() { const searchTerm = searchInput.value.trim().toLowerCase(); tasks.forEach(task => { const assignedPerson = task.querySelector('span').innerText.toLowerCase(); if (assignedPerson.includes(searchTerm)) { task.style.display = 'flex'; } else { task.style.display = 'none'; } }); }