├── index.html ├── style.css └── script.js /index.html: -------------------------------------------------------------------------------- 1 | !DOCTYPE html> 2 | 3 | 4 | 5 | 6 | Beautiful To-Do List 7 | 8 | 9 | 10 | 11 |
12 |

My To-Do List

13 |
14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* styles.css */ 2 | 3 | body { 4 | font-family: Arial, sans-serif; 5 | background-color: #f4f4f4; 6 | } 7 | 8 | .container { 9 | max-width: 400px; 10 | margin: 50px auto; 11 | background-color: #fff; 12 | padding: 20px; 13 | border-radius: 8px; 14 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 15 | } 16 | 17 | h1 { 18 | text-align: center; 19 | } 20 | 21 | form { 22 | margin-bottom: 20px; 23 | } 24 | 25 | input[type="text"] { 26 | width: 70%; 27 | padding: 10px; 28 | border: 1px solid #ccc; 29 | border-radius: 4px; 30 | } 31 | 32 | button { 33 | padding: 10px 20px; 34 | background-color: #4caf50; 35 | color: #fff; 36 | border: none; 37 | border-radius: 4px; 38 | cursor: pointer; 39 | } 40 | 41 | ul { 42 | list-style-type: none; 43 | padding: 0; 44 | } 45 | 46 | li { 47 | padding: 10px; 48 | margin-bottom: 5px; 49 | background-color: #f9f9f9; 50 | border-radius: 4px; 51 | display: flex; 52 | align-items: center; 53 | } 54 | 55 | .delete-btn { 56 | margin-left: auto; 57 | cursor: pointer; 58 | } 59 | 60 | .completed { 61 | text-decoration: line-through; 62 | color: #888; 63 | } 64 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // script.js 2 | 3 | const todoForm = document.getElementById('todo-form'); 4 | const todoInput = document.getElementById('todo-input'); 5 | const todoList = document.getElementById('todo-list'); 6 | 7 | // Event listener for form submission 8 | todoForm.addEventListener('submit', function(event) { 9 | event.preventDefault(); // Prevent default form submission 10 | 11 | const todoText = todoInput.value.trim(); // Get input value and trim whitespace 12 | 13 | if (todoText !== '') { // Check if input value is not empty 14 | addTodoItem(todoText); // Add new to-do item 15 | todoInput.value = ''; // Clear input field 16 | } 17 | }); 18 | 19 | // Function to add a new to-do item 20 | function addTodoItem(todoText) { 21 | const todoItem = document.createElement('li'); 22 | todoItem.textContent = todoText; 23 | 24 | // Event listener for clicking on a to-do item to mark as completed 25 | todoItem.addEventListener('click', function() { 26 | this.classList.toggle('completed'); 27 | }); 28 | 29 | // Event listener for clicking on the delete button to remove the to-do item 30 | const deleteButton = document.createElement('span'); 31 | deleteButton.textContent = '❌'; 32 | deleteButton.classList.add('delete-btn'); 33 | deleteButton.addEventListener('click', function(event) { 34 | event.stopPropagation(); // Prevent event from bubbling up to the parent li element 35 | todoItem.remove(); // Remove the todoItem when the delete button is clicked 36 | }); 37 | 38 | todoItem.appendChild(deleteButton); // Append delete button to todoItem 39 | todoList.appendChild(todoItem); // Append todoItem to todoList 40 | } --------------------------------------------------------------------------------