Merge branch 'plus-1-feature-move' into dev

client/src/components/render-list.js

@@ -25,6 +25,7 @@ export const renderList = (data) => {
     // create table data items
     const inputElNewForCheck = document.createElement('input');
     inputElNewForCheck.type = 'checkbox';
+    inputElNewForCheck.className = 'new-list-checkbox'; // set class name for check box of new list.
     const labelElNewForWord = document.createElement('label');
     labelElNewForWord.innerText = item;
     // use img instead of icon
@@ -62,6 +63,7 @@ export const renderList = (data) => {
     // create table data items
     const inputElRememberedForCheck = document.createElement('input');
     inputElRememberedForCheck.type = 'checkbox';
+    inputElRememberedForCheck.className = 'rem-list-checkbox'; // set class name for check box of remembered list.
     const labelElRememberedForWord = document.createElement('label');
     labelElRememberedForWord.innerText = ele;
     // use img instead of icon

client/src/handlers/input-word.js

@@ -46,8 +46,16 @@ export const inputWordHandler = (event) => {
     return;
   }
 
+  // no duplicate word
+  if (data.newWords.includes(text)) {
+    warnings.innerText = `"${text}" already exists.`;
+    document.getElementById('input').value = '';
+    return;
+  }
+
   // otherwise, push text to new words list.
   data.newWords.push(text);
+
   document.getElementById('input').value = '';
 
   /* -- render new words -- */
@@ -104,6 +112,13 @@ export const getInputWithEnterHandler = (event) => {
     return;
   }
 
+  // no duplicate word
+  if (data.newWords.includes(text)) {
+    warnings.innerText = `"${text}" already exists.`;
+    document.getElementById('input').value = '';
+    return;
+  }
+
   // otherwise, push text to new words list.
   data.newWords.push(text);
   document.getElementById('input').value = '';

client/src/handlers/move-word.js

@@ -0,0 +1,51 @@
+import { data } from '../../data.js';
+import { renderList } from '../components/render-list.js';
+
+/**
+ * Entry point for users move a words between the list.
+ * It is called each time the user clicks the "remembered" or "overlooked" button.
+ *
+ * @param {Event} event - The event triggered when the user clicks the button.
+ */
+
+export const moveItemHandler = (event) => {
+  /* -- entry point for moving words -- */
+  // debugger;
+  /* -- check the target -- */
+  /* -- gather user input from DOM -- */
+  // when event happened on "remembered button".
+  if (event.target.id === 'remembered-button') {
+    // find the checked items
+    const checkedNewBox = Array.from(
+      document.getElementsByClassName('new-list-checkbox'),
+    ).filter((ele) => ele.checked);
+    const itemsToMove = checkedNewBox.map(
+      (ele) =>
+        ele.parentElement.parentElement.children[1].children[0].innerHTML,
+    );
+    // get rid of the checked items from new list, update data.
+    data.newWords = data.newWords.filter((ele) => !itemsToMove.includes(ele));
+    // add items to remembered list
+    data.rememberedWords.push(...itemsToMove);
+  }
+  // when event happened on "overlooked button".
+  if (event.target.id === 'overlooked-button') {
+    // find the checked items
+    const checkedNewBox = Array.from(
+      document.getElementsByClassName('rem-list-checkbox'),
+    ).filter((ele) => ele.checked);
+    const itemsToMove = checkedNewBox.map(
+      (ele) =>
+        ele.parentElement.parentElement.children[1].children[0].innerHTML,
+    );
+    // get rid of the checked items from remembered list, update data.
+    data.rememberedWords = data.newWords.filter(
+      (ele) => !itemsToMove.includes(ele),
+    );
+    // add items to remembered list
+    data.newWords.push(...itemsToMove);
+  }
+
+  /* -- re-render UI -- */
+  renderList(data);
+};

client/src/init/index.js

@@ -5,6 +5,7 @@ import { renderList } from '../components/render-list.js';
 import '../listeners/input-word.js';
 import '../listeners/remove-word.js';
 import '../listeners/sort-words.js';
+import '../listeners/move-word.js';
 
 /* --- any other code that executes when the document or window are ready --- */
 

client/src/listeners/move-word.js

@@ -0,0 +1,8 @@
+import { moveItemHandler } from '../handlers/move-word.js';
+
+document
+  .getElementById('remembered-button')
+  .addEventListener('click', moveItemHandler);
+document
+  .getElementById('overlooked-button')
+  .addEventListener('click', moveItemHandler);

index.html

@@ -53,7 +53,7 @@ <h3>New List</h3>
             type="button"
             value="remembered"
             class="move-to-remenbered"
-            id="new-button"
+            id="remembered-button"
           />
           <i class="fa-solid fa-trash-can" id="new-remove-all"></i>
           <div class="new-list-container" id="new-list-container"></div>
@@ -65,7 +65,7 @@ <h3>remembered List</h3>
             type="button"
             value="overlooked"
             class="move-to-new"
-            id="new-button"
+            id="overlooked-button"
           />
           <i class="fa-solid fa-trash-can" id="rem-remove-all"></i>
           <div