diff --git a/README.md b/README.md
index 8f92214..c206a26 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,22 @@
TO-DO-LIST (Made using HTML5 CSS3 and JavaScript)
-You can see the website live at: https://5codeman.github.io/TO-DO-LIST/
+[Live Demo](https://5codeman.github.io/TO-DO-LIST/)
-ABOUT THIS PROJECT-:
+## ABOUT THIS PROJECT-:
- 1. In this project i have created a simple to-do app using HTML CSS and JavaScript.
+ 1. In this project which I have created is a simple to-do app using HTML CSS and JavaScript.
2. Built a To-Do List application to make a list of daily works written down in one place.
- 3. Implemented functionalities like add task, remove task, filter tasks and also mark tasks as done.
+ 3. Implemented functionalities like add task, edit task, remove task, filter tasks and also mark tasks as done.
+## Getting Started
+To run this project locally, follow these steps:
+ 1. Clone the repository:
+ ```bash
+ git clone https://github.com/5codeman/TO-DO-LIST.git
+ ```
+
+ 2. Open the 'index.html' file in you web browser.
+ 3. Start managing you to-do list efficiently!
+
+Happy task management! 🚀
\ No newline at end of file
diff --git a/index.html b/index.html
index b84ae52..acc6893 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,16 @@
Todo List
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
index 6da3c24..3550b6e 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,7 @@ var todoInput = document.getElementById("todo-input")
var deleteAllButton = document.getElementById("delete-all")
var allTodos = document.getElementById("all-todos");
var deleteSButton = document.getElementById("delete-selected")
+let CurrentSelectedItem;
//event listners for add and delete
@@ -14,13 +15,16 @@ deleteAllButton.addEventListener("click", deleteAll)
deleteSButton.addEventListener("click", deleteS)
-//event listeners for filtersk
+//event listeners for filters
document.addEventListener('click', (e) => {
if (e.target.className.split(' ')[0] == 'complete' || e.target.className.split(' ')[0] == 'ci') {
completeTodo(e);
}
if (e.target.className.split(' ')[0] == 'delete' || e.target.className.split(' ')[0] == 'di') {
- deleteTodo(e)
+ deleteTodo(e);
+ }
+ if (e.target.className.split(' ')[0] === 'edit' || e.target.className.split(' ')[0] === 'ed') {
+ editEntry(e);
}
if (e.target.id == "all") {
viewAll();
@@ -33,6 +37,7 @@ document.addEventListener('click', (e) => {
}
})
+
//event listner for enter key
todoInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
@@ -40,6 +45,56 @@ todoInput.addEventListener('keypress', (e) => {
}
});
+// Edition functionality provider fucntions
+function editEntry(entry) {
+ const listItem = entry.target.closest('li');
+ const itemId = listItem.getAttribute('id');
+
+ CurrentSelectedItem = todoList.find(e => e.id == itemId);
+
+ const taskTitle = CurrentSelectedItem.task;
+ openEditModal(taskTitle);
+}
+
+function openEditModal(taskTitle) {
+ const editModal = document.getElementById('editModal');
+ const overlay = document.getElementById('overlay');
+ const oldTitle = document.getElementById('oldTitle');
+
+ // Set the current task title in the input field
+ oldTitle.innerText += taskTitle;
+
+ // Display the modal and overlay
+ editModal.style.display = 'block';
+ overlay.style.display = 'block';
+}
+
+function closeEditModal() {
+ const editModal = document.getElementById('editModal');
+ const overlay = document.getElementById('overlay');
+ const oldTitle = document.getElementById('oldTitle');
+ const editTaskInput = document.getElementById('editTaskInput');
+
+ // Reset the text of oldTitle label and editTaskInput textbox
+ oldTitle.innerText = "Old: ";
+ editTaskInput.value = "";
+
+ // Hide the modal and overlay
+ editModal.style.display = 'none';
+ overlay.style.display = 'none';
+
+ addinmain(todoList);
+}
+
+function updateTaskTitle() {
+ const editTaskInput = document.getElementById('editTaskInput');
+ const taskTitle = editTaskInput.value;
+
+ CurrentSelectedItem.task = taskTitle;
+
+ // Close the edit modal
+ closeEditModal();
+}
//updates the all the remaining, completed and main list
function update() {
@@ -81,17 +136,21 @@ function addinmain(todoList) {
allTodos.innerHTML = ""
todoList.forEach(element => {
var x = `