FIXED Duplication Todo

Fixed adding the same todo twice.
Abhijitkr · Jun 16, 2023 · 02f07be · 02f07be
1 parent 1c9180f
commit 02f07be
Showing 1 changed file with 47 additions and 39 deletions.
diff --git a/script.js b/script.js
@@ -1,4 +1,5 @@
 var ul = document.getElementById('todos');
+var todos = new Set(); // Collection to store added todos
 
 var addButton = document.getElementById('add');
 addButton.addEventListener('click', addItem);
@@ -9,42 +10,49 @@ removeButton.addEventListener('click', removeItem);
 var removeAllButton = document.getElementById('removeAll');
 removeAllButton.addEventListener('click', removeAllItem);
 
-ul.addEventListener('dblclick', function(event) {
+ul.addEventListener('dblclick', function (event) {
   if (event.target.tagName === 'LABEL') {
     editItem(event.target);
   }
 });
 
 function addItem() {
-    var input = document.getElementById('input');
-    var item = input.value.trim();
-
-    if (item === '') {
-      alert('Please enter your TODO!');
-      return;
-    }
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('POST', 'add_todo.php', true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.onreadystatechange = function() {
-      if (xhr.readyState === XMLHttpRequest.DONE) {
-        if (xhr.status === 200) {
-          var response = JSON.parse(xhr.responseText);
-          if (response.success) {
-            var itemId = response.itemId;
-            addItemToUI(itemId, item, '0'); // Pass '0' for unchecked todo
-          } else {
-            alert(response.message);
-          }
+  var input = document.getElementById('input');
+  var item = input.value.trim();
+
+  if (item === '') {
+    alert('Please enter your TODO!');
+    return;
+  }
+
+  // Check if the todo already exists
+  if (todos.has(item)) {
+    alert('The TODO already exists!');
+    return;
+  }
+
+  todos.add(item); // Add the new todo to the collection
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', 'add_todo.php', true);
+  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      if (xhr.status === 200) {
+        var response = JSON.parse(xhr.responseText);
+        if (response.success) {
+          var itemId = response.itemId;
+          addItemToUI(itemId, item, '0'); // Pass '0' for unchecked todo
         } else {
-          alert('An error occurred while adding the todo.');
+          alert(response.message);
         }
+      } else {
+        alert('An error occurred while adding the todo.');
       }
-    };
-    xhr.send('item=' + encodeURIComponent(item));
-
-    input.value = '';
+    }
+  };
+  xhr.send('item=' + encodeURIComponent(item));
+
+  input.value = '';
 }
 
 function addItemToUI(itemId, item, checked) {
@@ -60,16 +68,16 @@ function addItemToUI(itemId, item, checked) {
 
   // Check if the todo should be marked as checked
   if (checked === '1') {
-      checkbox.checked = true;
-      li.classList.add('myCheck');
+    checkbox.checked = true;
+    li.classList.add('myCheck');
   }
 
   li.appendChild(checkbox);
   li.appendChild(label);
   ul.appendChild(li);
 
-    // Apply animation to the newly added item
-    li.classList.add('animation');
+  // Apply animation to the newly added item
+  li.classList.add('animation');
 }
 
 
@@ -78,11 +86,11 @@ function updateDatabase(event) {
   var isChecked = checkbox.checked ? 1 : 0;
   var itemId = checkbox.id.replace('check', '');
   var text = checkbox.nextElementSibling.textContent;
-  
+
   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'update_todo.php', true);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-  xhr.onreadystatechange = function() {
+  xhr.onreadystatechange = function () {
     if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
       var response = JSON.parse(xhr.responseText);
       if (!response.success) {
@@ -132,7 +140,7 @@ function removeAllItem() {
   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'remove_all_todos.php', true);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-  xhr.onreadystatechange = function() {
+  xhr.onreadystatechange = function () {
     if (xhr.readyState === XMLHttpRequest.DONE) {
       if (xhr.status === 200) {
         var response = JSON.parse(xhr.responseText);
@@ -151,14 +159,14 @@ function removeAllItem() {
 
 function editItem(label) {
   var newText = prompt('Enter the new text for this todo:', label.textContent);
-  
+
   if (newText !== null) {
     var itemId = label.getAttribute('for').replace('check', '');
-    
+
     var xhr = new XMLHttpRequest();
     xhr.open('POST', 'edit_todo.php', true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.onreadystatechange = function() {
+    xhr.onreadystatechange = function () {
       if (xhr.readyState === XMLHttpRequest.DONE) {
         if (xhr.status === 200) {
           var response = JSON.parse(xhr.responseText);
@@ -178,10 +186,10 @@ function editItem(label) {
 
 
 // Fetch todos from the database and add them to the UI on page load
-window.addEventListener('load', function() {
+window.addEventListener('load', function () {
   var xhr = new XMLHttpRequest();
   xhr.open('GET', 'fetch_todos.php', true);
-  xhr.onreadystatechange = function() {
+  xhr.onreadystatechange = function () {
     if (xhr.readyState === XMLHttpRequest.DONE) {
       if (xhr.status === 200) {
         var response = JSON.parse(xhr.responseText);