Edit the index.js to put focus on the input field everytime the page …

…loads
Gambit142 · Sep 26, 2021 · 212fdf9 · 212fdf9
1 parent 313b6d8
commit 212fdf9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 57 deletions.
diff --git a/src/draggable.js b/src/draggable.js
@@ -11,6 +11,7 @@ export default (draggables) => {
         obj.index = i + 1;
       });
       localStorage.setItem('listOfTasks', JSON.stringify(readArray));
+      window.location.reload();
     });
   });
 };
@@ -44,19 +45,7 @@ export const draggover = (container) => {
       const readArray = JSON.parse(localStorage.getItem('listOfTasks'));
       const result = readArray.filter((task) => task.index === idReplaced);
       newStorage.push(...result);
-      console.log(newStorage);
     });
     localStorage.setItem('listOfTasks', JSON.stringify(newStorage));
   });
-//   const lists = [...document.querySelectorAll('.draggable')];
-//   const newStorage = [];
-//   console.log(lists);
-//   lists.forEach((list) => {
-//     const idReplaced = parseInt(list.id.replace('draggable-', ''), 10);
-//     console.log(idReplaced);
-//     const readArray = JSON.parse(localStorage.getItem('listOfTasks'));
-//     const result = readArray.filter((task) => task.index === idReplaced);
-//     newStorage.push(...result);
-//   });
-//   localStorage.setItem('listOfTasks', JSON.stringify(newStorage));
 };
diff --git a/src/index.js b/src/index.js
@@ -1,60 +1,19 @@
 import './style.css';
-import interaction from './interactive.js';
 // eslint-disable-next-line import/no-cycle
 import enterTask, {
-  editTasks, clickEditButton,
+  createToDoListDiv, clickEditButton,
   clickDeleteButton, deleteCompletedTask,
   restartTask,
 } from './functionality.js';
 import draggable, { draggover } from './draggable.js';
 
-const TODOLIST_CONTAINER = document.querySelector('.todo-lists-div');
 const textField = document.getElementById('text-field');
+textField.focus();
+textField.style.outline = 'none';
 const todoListArray = JSON.parse(localStorage.getItem('listOfTasks')) || [];
 
 const enterIcon = document.getElementById('enter-button');
 
-const createToDoListDiv = (array) => {
-  let task = '';
-  array.forEach((div) => {
-    let checked = '';
-    let state = 'none';
-    if (div.completed) {
-      checked = 'checked';
-      state = 'line-through';
-    }
-    task += `<div class="task-div draggable" draggable="true" id="draggable-${div.index}">
-    <div>
-    <input type="checkbox" data-target="task-${div.index}" id="${div.index}" name="task-${div.index}" ${checked}>
-    <input type="text" value="${div.description}" style="text-decoration: ${state};" for="task-${div.index}" id="task-${div.index}" class="task-description"><br>
-    </div>
-    <div><i class="fas fa-ellipsis-v more" data-target="button-${div.index}"></i></div>
-    </div>
-    <div id="button-${div.index}" class="dropdown-menu">
-    <a href="#" class="edit" data-target="task-${div.index}">Edit</a>
-    <a href="#" class="delete">Delete</a>
-    </div>`;
-  });
-  TODOLIST_CONTAINER.innerHTML = task;
-  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
-  checkboxes.forEach((checkbox) => {
-    const textDescription = document.getElementById(checkbox.dataset.target);
-    checkbox.addEventListener('change', (e) => {
-      interaction(e, todoListArray, textDescription);
-    });
-  });
-  const moreButton = document.querySelectorAll('.more');
-
-  moreButton.forEach((btn) => {
-    const dropdownMenu = document.getElementById(btn.dataset.target);
-    btn.addEventListener('click', () => {
-      dropdownMenu.classList.toggle('show');
-    });
-  });
-
-  editTasks(todoListArray);
-};
-
 enterIcon.addEventListener('click', (e) => {
   enterTask(e, textField, todoListArray);
   createToDoListDiv(todoListArray);
@@ -67,6 +26,7 @@ textField.addEventListener('keypress', (e) => {
     enterTask(e, textField, todoListArray);
     createToDoListDiv(todoListArray);
     window.location.reload();
+    // document.getElementById('text-field').focus();
   }
 });
 
@@ -79,5 +39,4 @@ restartTask();
 const draggables = document.querySelectorAll('.draggable');
 const listContainer = document.querySelector('.list-container');
 draggable(draggables);
-console.log(draggables);
 draggover(listContainer);