├── index.html ├── script.js ├── style.css └── README.md /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To-Do List 7 | 8 | 9 | 10 |

11 |

To-Do List

12 | 13 | 14 |

15 |

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function addTask() { 2 | const taskInput = document.getElementById('taskInput'); 3 | const taskText = taskInput.value.trim(); 4 | 5 | if (taskText === '') return; 6 | 7 | const li = document.createElement('li'); 8 | li.textContent = taskText; 9 | 10 | li.addEventListener('click', () => { 11 | li.classList.toggle('completed'); 12 | }); 13 | 14 | const deleteBtn = document.createElement('button'); 15 | deleteBtn.textContent = 'X'; 16 | deleteBtn.style.background = 'red'; 17 | deleteBtn.style.color = 'white'; 18 | deleteBtn.style.border = 'none'; 19 | deleteBtn.style.marginLeft = '10px'; 20 | deleteBtn.style.cursor = 'pointer'; 21 | deleteBtn.onclick = () => li.remove(); 22 | 23 | li.appendChild(deleteBtn); 24 | document.getElementById('taskList').appendChild(li); 25 | 26 | taskInput.value = ''; 27 | } 28 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f4f4f4; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | } 9 | 10 | .todo-container { 11 | background: white; 12 | padding: 2rem; 13 | border-radius: 10px; 14 | box-shadow: 0 0 10px rgba(0,0,0,0.1); 15 | width: 300px; 16 | text-align: center; 17 | } 18 | 19 | input[type="text"] { 20 | width: 80%; 21 | padding: 0.5rem; 22 | margin-bottom: 1rem; 23 | border: 1px solid #ccc; 24 | border-radius: 5px; 25 | } 26 | 27 | button { 28 | padding: 0.5rem 1rem; 29 | border: none; 30 | background: #28a745; 31 | color: white; 32 | border-radius: 5px; 33 | cursor: pointer; 34 | } 35 | 36 | button:hover { 37 | background: #218838; 38 | } 39 | 40 | ul { 41 | list-style: none; 42 | padding: 0; 43 | } 44 | 45 | li { 46 | padding: 0.5rem; 47 | background: #eee; 48 | margin-top: 0.5rem; 49 | display: flex; 50 | justify-content: space-between; 51 | border-radius: 5px; 52 | } 53 | 54 | li.completed { 55 | text-decoration: line-through; 56 | color: gray; 57 | } 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 📝 To-Do List App 2 | A simple and intuitive web-based to-do list application that helps users manage daily tasks effectively. Built with HTML, CSS, JavaScript 3 | 4 | 🚀 Features 5 | ✅ Add new tasks 6 | 🗑️ Delete tasks 7 | ✏️ Edit tasks 8 | 📌 Mark tasks as completed 9 | 🎨 Responsive design 10 | 11 | 🔧 Tech Stack 12 | Frontend: [HTML/CSS/JavaScript or React/Vue/Angular, etc.] 13 | 14 | Backend: [Optional: Node.js, Express, etc.] 15 | 16 | Database: [Optional: MongoDB, Firebase, etc.] 17 | 18 | 📂 Project Structure 19 | pgsql 20 | Copy 21 | Edit 22 | /to-do-list 23 | ├── index.html 24 | ├── style.css 25 | ├── app.js 26 | └── README.md 27 | 28 | 🛠️ Installation & Setup 29 | Clone the repository 30 | 31 | bash 32 | Copy 33 | Edit 34 | git clone https://github.com/your-Ramyasree/todo-list.git 35 | 36 | bash 37 | Copy 38 | Edit 39 | npm install 40 | Run the app 41 | 42 | bash 43 | Copy 44 | Edit 45 | npm start 46 | Open in your browser: 47 | 48 | arduino 49 | Copy 50 | Edit 51 | http://localhost:3000 52 | 🧪 Testing 53 | Include instructions for running tests if your project has any 54 | 55 | bash 56 | Copy 57 | Edit 58 | npm test 59 | 🤝 Contributing 60 | Contributions are welcome! Please fork the repository and submit a pull request. 61 | 62 | Fork the Project 63 | 64 | Create your Feature Branch (git checkout -b feature/AmazingFeature) 65 | 66 | Commit your Changes (git commit -m 'Add some AmazingFeature') 67 | 68 | Push to the Branch (git push origin feature/AmazingFeature) 69 | 70 | Open a Pull Request 71 | 72 | 📄 License 73 | This project is licensed under the MIT License - see the LICENSE file for details. 74 | 75 | 🙋‍♂️ Author 76 | Your Name – @Ramyasree003 77 | --------------------------------------------------------------------------------