diff --git a/index.html b/index.html
index f8d96e2..af8f45a 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
+
diff --git a/main.js b/main.js
index ee7331e..6585483 100644
--- a/main.js
+++ b/main.js
@@ -298,47 +298,30 @@ function displayTodaysDate() {
dateDiv.innerText = today + ' • today';
_index__WEBPACK_IMPORTED_MODULE_0__.header.prepend(dateDiv);
}
-//! *********************************************************************************
-//! *********************************************************************************
-//! *********************************************************************************
-//! *********************************************************************************
-//! *********************************************************************************
-//? **`` Creates the initial 'ToDo' button
+//? **`` Creates the 'Add ToDo' icon button
function createToDoItemButton() {
const newToDoButton = document.createElement('div');
- // newToDoButton.innerText = 'Create ToDo Item';
newToDoButton.classList.add('new-todo-button');
_index__WEBPACK_IMPORTED_MODULE_0__.header.prepend(newToDoButton);
- // add_circle ;
-
- //* **`` This is the google font code below
-
+ //? **`` This icon is linked from Google in the HTML head
const newTaskIcon = document.createElement('span');
newTaskIcon.classList.add('material-symbols-outlined');
newTaskIcon.innerText = ' add_circle ';
newToDoButton.append(newTaskIcon);
-
- //* **`` This is the import icon code below
-
- // const newTaskIcon = document.createElement('img');
- // newTaskIcon.setAttribute('src', plus);
- // newTaskIcon.setAttribute('alt', 'Add Task');
- // newToDoButton.append(newTaskIcon);
}
-//! *********************************************************************************
-//! *********************************************************************************
-//! *********************************************************************************
-//! *********************************************************************************
-//! *********************************************************************************
//? **`` Creates the form that takes all the todo info
function makeForm() {
+ const formWrapper = document.createElement('div');
+ formWrapper.classList.add('form-wrapper');
+ content.prepend(formWrapper);
+
const form = document.createElement('form');
form.setAttribute('action', '');
form.setAttribute('method', 'get');
- content.prepend(form);
+ formWrapper.prepend(form);
const dropdownProjectMenu = document.createElement('select');
dropdownProjectMenu.setAttribute('id', 'dropdownProjectMenu');
diff --git a/main.js.map b/main.js.map
index 016f00b..8812b8b 100644
--- a/main.js.map
+++ b/main.js.map
@@ -1 +1 @@
-{"version":3,"file":"main.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYoC;;AAQH;;AAmB/B;;AAEF;AACA;;AAEA,uEAAY;AACZ;;AAEA,gFAAqB;AACrB,qFAA6B;;AAE7B,+EAAoB;AACpB,iFAAyB;;AAEzB,4EAAiB;;AAEjB;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,EAAE,kFAAuB;;AAEzB,EAAE,gFAAqB;AACvB,EAAE,qFAA6B;;AAE/B,EAAE,+EAAoB;AACtB,EAAE,iFAAyB;;AAE3B,EAAE,4EAAiB;;AAEnB,EAAE,wEAAgB;AAClB;;AAEA;AACA,EAAE,kFAAuB;AACzB,EAAE,uEAAY;AACd;AACA;AACA;AACA;AACA,IAAI,0EAAe;AACnB,GAAG;AACH,EAAE,4EAAiB;AACnB,EAAE,uEAAe;AACjB,EAAE,8EAAmB;AACrB,EAAE,yEAAiB;AACnB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,wBAAwB;AACxB;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,wEAAa;AACjB;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,WAAW;AACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3LuE;AACrB;AAClD;;AAkBE;;AAEF;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,EAAE,kDAAc;;AAEhB;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,gBAAgB,qDAAa;AAC7B;AACA;AACA,EAAE,kDAAc;AAChB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,EAAE,kDAAc;;AAEhB;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,EAAE,4DAAoB;AACtB,EAAE,+DAAe;AACjB;;AAEA;AACA;AACA;AACA;AACA,0BAA0B,SAAS;AACnC;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,6BAA6B,IAAI,IAAI,MAAM;AAC3C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAAS,qDAAiB;AAC1B,IAAI,sDAAkB,CAAC,qDAAiB;AACxC;AACA;;;;;;;;;;;;;;;;;;;;;;AC/TkB;;AAUU;;AAS1B;;AAEF;AACA;AACA;AACA,EAAE,8DAAW,CAAC,6CAAS;AACvB;AACA;AACA;AACA;AACA,IAAI,6DAAU;AACd;AACA;AACA;AACA,QAAQ,8DAAW,CAAC,qDAAa;AACjC;;AAEA;AACA,QAAQ,8DAAW,CAAC,kDAAU;AAC9B;;AAEA;AACA,QAAQ,8DAAW,CAAC,yDAAiB;AACrC;;AAEA;AACA,QAAQ,8DAAW,CAAC,oDAAY;AAChC;;AAEA;AACA,QAAQ,8DAAW,CAAC,oDAAY;AAChC;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA,IAAI,iDAAa;AACjB;AACA;AACA,QAAQ,oDAAgB;AACxB,QAAQ,sDAAc;AACtB;AACA,KAAK;AACL,GAAG;AACH;;AAEA;AACA;AACA;AACA,IAAI,sDAAc;AAClB,GAAG;AACH;;AAEA;AACA;AACA;AACA,IAAI,0EAAuB;AAC3B,IAAI,iEAAc;AAClB;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA,IAAI,sDAAc;AAClB,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,sDAAc;AACpB,KAAK;AACL,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA,IAAI,+DAAY;AAChB,IAAI,0EAAuB;AAC3B,IAAI,2DAAQ;AACZ;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,sDAAc;AACnC,qBAAqB,gDAAQ;;AAE7B;AACA;;AAEA;AACA,sBAAsB,oDAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAI,wDAAgB;AACpB,IAAI,sDAAc;AAClB,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,IAAI,kDAAU;;AAEd;AACA;AACA,GAAG;AACH;;;;;;;UCnLA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;UENA;UACA;UACA;UACA","sources":["webpack://to-do-list/./src/index.js","webpack://to-do-list/./src/modules/dom-manipulation.js","webpack://to-do-list/./src/modules/event-handler.js","webpack://to-do-list/webpack/bootstrap","webpack://to-do-list/webpack/runtime/define property getters","webpack://to-do-list/webpack/runtime/hasOwnProperty shorthand","webpack://to-do-list/webpack/runtime/make namespace object","webpack://to-do-list/webpack/before-startup","webpack://to-do-list/webpack/startup","webpack://to-do-list/webpack/after-startup"],"sourcesContent":["import {\n createToDoItemButton,\n displayTodaysDate,\n displayToDoInfo,\n updateOptions,\n removeChildrenOfContent,\n displayBackButton,\n displayDeleteButton,\n createSortingDropdown,\n createHeader,\n body,\n removeHeader,\n} from './modules/dom-manipulation';\n\nimport {\n createToDoItemButtonLogic,\n taskDisplayLogic,\n backButtonLogic,\n deleteButtonLogic,\n sortingAndDisplayOfTasksLogic,\n} from './modules/event-handler';\n\nexport {\n populateDropdownMenu,\n addObjectToArray,\n addOptions,\n createObject,\n todoArray,\n getTodaysDate,\n createID,\n goToMainScreen,\n goToTaskScreen,\n findPriorities,\n priorityOrder,\n alphaOrder,\n reverseAlphaOrder,\n projectOrder,\n dueDateOrder,\n header,\n};\n\n//? **`` Initial functions to be ran\nconst todoArray = [];\n\ncreateHeader();\nconst header = document.querySelector('header');\n\ncreateSortingDropdown();\nsortingAndDisplayOfTasksLogic();\n\ncreateToDoItemButton();\ncreateToDoItemButtonLogic();\n\ndisplayTodaysDate();\n\n//* **`` FUNCTIONS ``**\n\n//? **`` Sorts the array by priority\nfunction priorityOrder() {\n return todoArray.sort((a, b) => (a.priority > b.priority ? 1 : -1));\n}\n\n//? **`` Sorts the array by alphabetical A-Z\nfunction alphaOrder() {\n return todoArray.sort((a, b) => (a.task > b.task ? 1 : -1));\n}\n\n//? **`` Sorts the array by reverse alphabetical Z-A\nfunction reverseAlphaOrder() {\n return todoArray.sort((a, b) => (a.task < b.task ? 1 : -1));\n}\n\n//? **`` Sorts the array by project\nfunction projectOrder() {\n return todoArray.sort((a, b) => (a.project > b.project ? 1 : -1));\n}\n\n//? **`` Sorts the array by due date\nfunction dueDateOrder() {\n return todoArray.sort((a, b) => (a.date > b.date ? 1 : -1));\n}\n\nfunction findPriorities() {\n //? **``This finds all the 'priority' attributes, spreads the node list into an array, and returns the one thats checked.\n const checked = [...document.querySelectorAll('[name=\"priority\"]')].find(\n (priority) => priority.checked\n );\n return checked.value;\n}\n\nfunction goToMainScreen() {\n removeChildrenOfContent();\n\n createSortingDropdown();\n sortingAndDisplayOfTasksLogic();\n\n createToDoItemButton();\n createToDoItemButtonLogic();\n\n displayTodaysDate();\n\n taskDisplayLogic();\n}\n\nfunction goToTaskScreen(ID) {\n removeChildrenOfContent();\n removeHeader();\n //? **`` Filters through all objects in the array and returns a new array with the object that matches the ID\n const currentObjArray = todoArray.filter((object) => ID == object.idNumber);\n //? **`` Loops through the object and passes the key/value pairs to the display function\n Object.entries(currentObjArray[0]).map(([key, value]) => {\n displayToDoInfo(key, value);\n });\n displayBackButton();\n backButtonLogic();\n displayDeleteButton();\n deleteButtonLogic(ID);\n}\n\nfunction createID() {\n //? **`` This loops forever, and when we find that the random number does NOT match any ID numbers in the objects within the array, then we kill the loop and return the new unique number\n while (true) {\n const randomNumber =\n Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;\n if (!todoArray.some((obj) => obj.idNumber === randomNumber)) {\n return randomNumber;\n }\n }\n}\n\nfunction getTodaysDate() {\n const date = new Date();\n //? **`` These are the date formatting options\n const dateOptions = { month: 'short', day: 'numeric' };\n const todaysDate = date.toLocaleDateString(undefined, dateOptions);\n return todaysDate;\n}\n\n//? **`` Adds the new projects as options to the select dropdown\nfunction populateDropdownMenu() {\n //? **`` Loops through each object in the array\n todoArray.map((objs) => {\n //? **`` As it loops, it checks to make sure each objects project name doesn't already exist in the dropdown list\n const optionNodeList = document.querySelectorAll(\n '#dropdownProjectMenu > option'\n );\n const duplicateCheck = [...optionNodeList].some(\n (oppies) => oppies.innerText === objs.project\n );\n //? **`` If there are no duplicates, it fills the dropdown menu with the project names\n if (!duplicateCheck) {\n const newOption = document.createElement('option');\n dropdownProjectMenu.appendChild(newOption);\n newOption.setAttribute('value', objs.project);\n newOption.innerText = objs.project;\n }\n });\n}\n\n//? **`` Updates the select dropdown options with the 'Create New Project' value\nfunction addOptions(newProjectField) {\n const optionNodeList = document.querySelectorAll(\n '#dropdownProjectMenu > option'\n );\n //? **`` Big \"if statement\" !!\n if (\n //? **`` Turns the node list into an array then checks for duplicate project names. Notice the \"bang\" mark at the beginning saying \"if this is NOT true...\"\n ![...optionNodeList].some(\n (option) => newProjectField.value == option.innerText\n )\n ) {\n //? **`` If there are no duplicates, it adds it to the select dropdown\n updateOptions(newProjectField);\n //? **`` Automatically sets dropdown menu to last created new project\n document.querySelector('#dropdownProjectMenu').value =\n document.querySelector('#dropdownProjectMenu > option:last-child').value;\n }\n}\n\n//? **`` Takes a new object as an argument and adds it to the front of the array\nfunction addObjectToArray(newObject) {\n todoArray.unshift(newObject);\n}\n\n//? **`` Factory function that creates a new object of all the form values\nfunction createObject(project, task, date, priority, notes, idNumber) {\n return { project, task, date, priority, notes, idNumber };\n}\n","import { populateDropdownMenu, getTodaysDate, header } from '../index';\nimport { backButtonLogic } from './event-handler';\n// import plus from '../icons/add_circle.svg';\n\nexport {\n createToDoItemButton,\n makeForm,\n displayTodaysDate,\n removeChildrenOfContent,\n removeHeader,\n displayTask,\n displayToDoInfo,\n updateOptions,\n displayBackButton,\n displayDeleteButton,\n displayWarning,\n createSortingDropdown,\n clearTasks,\n createHeader,\n body,\n};\n\nconst body = document.querySelector('body');\nconst content = document.querySelector('.content');\n\nfunction createHeader() {\n body.prepend(document.createElement('header'));\n}\n\n//? **`` Finds all the tasks, spreads them into an array, then cycles thru them and removes them from display\nfunction clearTasks() {\n [...document.querySelectorAll('.task')].map((task) => task.remove());\n}\n\n//? **`` Creates the sorting dropdown menu and all it's options\nfunction createSortingDropdown() {\n const sortingDiv = document.createElement('div');\n\n header.prepend(sortingDiv);\n\n const sortingDropdown = document.createElement('select');\n sortingDropdown.setAttribute('id', 'sortingDropdown');\n sortingDropdown.setAttribute('name', 'sortingDropdown');\n const sortingDropdownLabel = document.createElement('label');\n sortingDropdownLabel.innerText = 'Sort Tasks: ';\n sortingDropdownLabel.setAttribute('for', 'sortingDropdown');\n\n sortingDiv.prepend(sortingDropdownLabel, sortingDropdown);\n\n const initialOption = document.createElement('option');\n initialOption.setAttribute('value', '');\n initialOption.setAttribute('disabled', '');\n initialOption.setAttribute('selected', '');\n initialOption.innerText = '--sort by--';\n\n const priorityOption = document.createElement('option');\n priorityOption.setAttribute('value', 'priority');\n priorityOption.innerText = 'priority';\n\n const alphaOption = document.createElement('option');\n alphaOption.setAttribute('value', 'A-Z');\n alphaOption.innerText = 'A-Z';\n\n const reverseAlphaOption = document.createElement('option');\n reverseAlphaOption.setAttribute('value', 'Z-A');\n reverseAlphaOption.innerText = 'Z-A';\n\n const projectOption = document.createElement('option');\n projectOption.setAttribute('value', 'project');\n projectOption.innerText = 'project';\n\n const dueOption = document.createElement('option');\n dueOption.setAttribute('value', 'due-date');\n dueOption.innerText = 'due date';\n\n sortingDropdown.append(\n initialOption,\n priorityOption,\n alphaOption,\n reverseAlphaOption,\n projectOption,\n dueOption\n );\n}\n\n//? **`` Creates a new