├── README.md ├── index.html ├── app.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # TaskManager 2 | 3 | TaskManager is a simple JavaScript-based task management web application. Users can add, view, and delete tasks. 4 | 5 | ## Features 6 | 7 | - Add new tasks. 8 | - View existing tasks. 9 | - Delete tasks. 10 | 11 | ## Installation 12 | 13 | 1. Clone the repository: 14 | ```bash 15 | git clone https://github.com/YOUR_USERNAME/TaskManager.git 16 | cd TaskManager 17 | ``` 18 | 19 | 2. Open `index.html` in your web browser. 20 | 21 | ## License 22 | 23 | This project is licensed under the MIT License. 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task Manager 7 | 8 | 9 | 10 |
11 |

Task Manager

12 |
13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | document.getElementById('task-form').addEventListener('submit', function(e) { 2 | e.preventDefault(); 3 | const taskInput = document.getElementById('task-input'); 4 | const taskList = document.getElementById('task-list'); 5 | 6 | // Create a new list item 7 | const li = document.createElement('li'); 8 | li.textContent = taskInput.value; 9 | 10 | // Create delete button 11 | const deleteBtn = document.createElement('button'); 12 | deleteBtn.textContent = 'Delete'; 13 | deleteBtn.addEventListener('click', function() { 14 | taskList.removeChild(li); 15 | }); 16 | 17 | li.appendChild(deleteBtn); 18 | taskList.appendChild(li); 19 | 20 | // Clear the input 21 | taskInput.value = ''; 22 | }); 23 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background: #f4f4f4; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .container { 9 | max-width: 600px; 10 | margin: 50px auto; 11 | padding: 20px; 12 | background: #fff; 13 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 14 | } 15 | 16 | h1 { 17 | text-align: center; 18 | margin-bottom: 20px; 19 | } 20 | 21 | form { 22 | display: flex; 23 | justify-content: space-between; 24 | } 25 | 26 | form input { 27 | flex: 1; 28 | padding: 10px; 29 | font-size: 16px; 30 | } 31 | 32 | form button { 33 | padding: 10px 20px; 34 | font-size: 16px; 35 | background: #333; 36 | color: #fff; 37 | border: none; 38 | cursor: pointer; 39 | } 40 | 41 | ul { 42 | list-style: none; 43 | padding: 0; 44 | } 45 | 46 | ul li { 47 | display: flex; 48 | justify-content: space-between; 49 | padding: 10px; 50 | border-bottom: 1px solid #ddd; 51 | } 52 | 53 | ul li button { 54 | background: #ff4d4d; 55 | color: #fff; 56 | border: none; 57 | cursor: pointer; 58 | padding: 5px 10px; 59 | } 60 | --------------------------------------------------------------------------------