diff --git a/main.js b/main.js
index 1b83ab6..e9e595c 100644
--- a/main.js
+++ b/main.js
@@ -214,7 +214,6 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _event_handler__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./event-handler */ "./src/modules/event-handler.js");
-// import plus from '../icons/add_circle.svg';
@@ -233,7 +232,7 @@ function clearTasks() {
//? **`` Creates the sorting dropdown menu and all it's options
function createSortingDropdown() {
const sortingDiv = document.createElement('div');
-
+ sortingDiv.classList.add('sorting');
_index__WEBPACK_IMPORTED_MODULE_0__.header.prepend(sortingDiv);
const sortingDropdown = document.createElement('select');
diff --git a/main.js.map b/main.js.map
index 43b4cd3..a79c9d2 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;;AAEA;AACA;AACA;AACA;AACA,EAAE,kDAAc;;AAEhB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA,EAAE,4DAAoB;AACtB,EAAE,+DAAe;AACjB;;AAEA;AACA;AACA;AACA;AACA,uBAAuB,SAAS;AAChC;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;;;;;;;;;;;;;;;;;;;;;;ACnVkB;;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 element and sets it as the new project value\nfunction updateOptions(newProjectField) {\n const getDropdownMenu = document.querySelector('#dropdownProjectMenu');\n const makeOption = document.createElement('option');\n\n makeOption.setAttribute('value', newProjectField.value);\n makeOption.innerText = newProjectField.value;\n getDropdownMenu.appendChild(makeOption);\n}\n\n//? **`` Shows the date\nfunction displayTodaysDate() {\n const today = getTodaysDate();\n const dateDiv = document.createElement('div');\n dateDiv.innerText = today + ' • today';\n header.prepend(dateDiv);\n}\n\n//? **`` Creates the 'Add ToDo' icon button\nfunction createToDoItemButton() {\n const newToDoButton = document.createElement('div');\n newToDoButton.classList.add('new-todo-button');\n header.prepend(newToDoButton);\n\n //? **`` This icon is linked from Google in the HTML head\n const newTaskIcon = document.createElement('span');\n newTaskIcon.classList.add('material-symbols-outlined');\n newTaskIcon.innerText = ' add_circle ';\n newToDoButton.append(newTaskIcon);\n}\n\n//? **`` Creates the form that takes all the todo info\nfunction makeForm() {\n const formWrapper = document.createElement('div');\n formWrapper.classList.add('form-wrapper');\n content.prepend(formWrapper);\n\n const form = document.createElement('form');\n form.setAttribute('action', '');\n form.setAttribute('method', 'get');\n formWrapper.prepend(form);\n\n //? **`` Dropdown select\n const dropdownWrapper = document.createElement('div');\n dropdownWrapper.classList.add('input-wrapper');\n form.append(dropdownWrapper);\n\n const dropdownProjectMenu = document.createElement('select');\n dropdownProjectMenu.setAttribute('id', 'dropdownProjectMenu');\n dropdownProjectMenu.setAttribute('name', 'dropdownProjectMenu');\n\n const dropdownProjectMenuLabel = document.createElement('label');\n dropdownProjectMenuLabel.innerText = 'Assign To Project';\n dropdownProjectMenuLabel.setAttribute('for', 'dropdownProjectMenu');\n dropdownWrapper.append(dropdownProjectMenuLabel, dropdownProjectMenu);\n\n const defaultOption = document.createElement('option');\n defaultOption.setAttribute('value', 'Default Project');\n defaultOption.innerText = 'Default Project';\n dropdownProjectMenu.appendChild(defaultOption);\n\n //? **`` Create new project\n const newProjectWrapper = document.createElement('div');\n newProjectWrapper.classList.add('input-wrapper');\n form.append(newProjectWrapper);\n\n const newProjectTitle = document.createElement('input');\n newProjectTitle.setAttribute('type', 'text');\n newProjectTitle.setAttribute('id', 'newproject');\n newProjectTitle.setAttribute('name', 'newproject');\n const newProjectLabel = document.createElement('label');\n newProjectLabel.innerText = 'Or Create New Project';\n newProjectLabel.setAttribute('for', 'newproject');\n newProjectWrapper.append(newProjectLabel, newProjectTitle);\n\n const projectButton = document.createElement('button');\n projectButton.innerText = 'Create New Project';\n projectButton.classList.add('project-button');\n form.append(projectButton);\n\n //? **`` New todo title\n const todoTaskWrapper = document.createElement('div');\n todoTaskWrapper.classList.add('input-wrapper');\n form.append(todoTaskWrapper);\n\n const todoTask = document.createElement('input');\n todoTask.setAttribute('type', 'text');\n todoTask.setAttribute('id', 'task');\n todoTask.setAttribute('name', 'task');\n const taskLabel = document.createElement('label');\n taskLabel.innerText = 'ToDo Task';\n taskLabel.setAttribute('for', 'task');\n todoTaskWrapper.append(taskLabel, todoTask);\n\n //? **`` Due date\n const todoDateWrapper = document.createElement('div');\n todoDateWrapper.classList.add('input-wrapper');\n form.append(todoDateWrapper);\n\n const todoDate = document.createElement('input');\n todoDate.setAttribute('type', 'date');\n todoDate.setAttribute('id', 'date');\n todoDate.setAttribute('name', 'date');\n const dateLabel = document.createElement('label');\n dateLabel.innerText = 'Due Date';\n dateLabel.setAttribute('for', 'date');\n todoDateWrapper.append(dateLabel, todoDate);\n\n //? **`` Priority\n const priorityWrapper = document.createElement('div');\n priorityWrapper.classList.add('priority-wrapper');\n form.append(priorityWrapper);\n\n const p1Wrapper = document.createElement('div');\n p1Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p1Wrapper);\n\n const radioPriority1 = document.createElement('input');\n radioPriority1.setAttribute('type', 'radio');\n radioPriority1.setAttribute('id', 'P1');\n radioPriority1.setAttribute('name', 'priority');\n radioPriority1.setAttribute('value', 'P1');\n const labelPriority1 = document.createElement('label');\n labelPriority1.innerText = 'P1';\n labelPriority1.setAttribute('for', 'P1');\n p1Wrapper.append(labelPriority1, radioPriority1);\n\n const p2Wrapper = document.createElement('div');\n p2Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p2Wrapper);\n\n const radioPriority2 = document.createElement('input');\n radioPriority2.setAttribute('type', 'radio');\n radioPriority2.setAttribute('id', 'P2');\n radioPriority2.setAttribute('name', 'priority');\n radioPriority2.setAttribute('value', 'P2');\n const labelPriority2 = document.createElement('label');\n labelPriority2.innerText = 'P2';\n labelPriority2.setAttribute('for', 'P2');\n p2Wrapper.append(labelPriority2, radioPriority2);\n\n const p3Wrapper = document.createElement('div');\n p3Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p3Wrapper);\n\n const radioPriority3 = document.createElement('input');\n radioPriority3.setAttribute('type', 'radio');\n radioPriority3.setAttribute('id', 'P3');\n radioPriority3.setAttribute('name', 'priority');\n radioPriority3.setAttribute('value', 'P3');\n const labelPriority3 = document.createElement('label');\n labelPriority3.innerText = 'P3';\n labelPriority3.setAttribute('for', 'P3');\n p3Wrapper.append(labelPriority3, radioPriority3);\n\n const p4Wrapper = document.createElement('div');\n p4Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p4Wrapper);\n\n const radioPriority4 = document.createElement('input');\n radioPriority4.setAttribute('type', 'radio');\n radioPriority4.setAttribute('id', 'P4');\n radioPriority4.setAttribute('name', 'priority');\n radioPriority4.setAttribute('value', 'P4');\n radioPriority4.setAttribute('checked', '');\n const labelPriority4 = document.createElement('label');\n labelPriority4.innerText = 'P4';\n labelPriority4.setAttribute('for', 'P4');\n p4Wrapper.append(labelPriority4, radioPriority4);\n\n //? **`` Additional notes\n const notesWrapper = document.createElement('div');\n notesWrapper.classList.add('input-wrapper');\n form.append(notesWrapper);\n\n const notes = document.createElement('textarea');\n notes.setAttribute('id', 'notes');\n notes.setAttribute('name', 'notes');\n const notesLabel = document.createElement('label');\n notesLabel.innerText = 'Notes';\n notesLabel.setAttribute('for', 'notes');\n notesWrapper.append(notesLabel, notes);\n\n //? **`` Create new todo button\n const todoButton = document.createElement('button');\n todoButton.innerText = 'Add ToDo';\n todoButton.classList.add('todo-button');\n\n //? **`` Go back button\n const button = document.createElement('button');\n button.innerText = 'Go Back';\n button.classList.add('back');\n\n form.append(todoButton, button);\n\n populateDropdownMenu();\n backButtonLogic();\n}\n\n//? **`` Loops through the array and for each object it creates a div, puts the task name on it, adds a class, sets the object's ID number to the element ID, and displays it\nfunction displayTask(array) {\n array.map((obj) => {\n const div = document.createElement('div');\n div.innerText = `${obj.task}`;\n div.classList.add('task');\n div.setAttribute('id', obj.idNumber);\n content.appendChild(div);\n });\n}\n\n//? **`` Displays the object key/value pair except for the ID Number\nfunction displayToDoInfo(key, value) {\n //? **`` This makes sure it doesn't display the 'IDNumber' value from the object\n if (key !== 'idNumber') {\n const paragraph = document.createElement('p');\n paragraph.innerText = `${key}: ${value}`;\n content.appendChild(paragraph);\n }\n}\n\n//? **`` Creates a 'go back' button\nfunction displayBackButton() {\n const button = document.createElement('button');\n button.innerText = 'Go Back';\n button.classList.add('back');\n content.appendChild(button);\n}\n\n//? **`` Creates a 'delete' button\nfunction displayDeleteButton() {\n const button = document.createElement('button');\n button.innerText = 'Delete';\n button.classList.add('delete');\n content.appendChild(button);\n}\n\n//? **`` Creates a warning screen when trying to delete a task\nfunction displayWarning() {\n const div = document.createElement('div');\n div.classList.add('warning');\n content.appendChild(div);\n\n const paragraph = document.createElement('p');\n paragraph.innerText = 'Are you sure?';\n div.appendChild(paragraph);\n\n const backButton = document.createElement('button');\n backButton.innerText = 'Go Back';\n backButton.classList.add('warning-back');\n div.appendChild(backButton);\n\n const deleteButton = document.createElement('button');\n deleteButton.innerText = 'Delete';\n deleteButton.classList.add('warning-delete');\n div.appendChild(deleteButton);\n}\n\n//? **`` Removes all the elements within the main \"content\" class element\nfunction removeChildrenOfContent() {\n while (content.firstChild) {\n content.removeChild(content.firstChild);\n }\n}\n\nfunction removeHeader() {\n while (header.firstChild) {\n header.removeChild(header.firstChild);\n }\n}\n","import {\n addObjectToArray,\n addOptions,\n createObject,\n todoArray,\n createID,\n goToMainScreen,\n goToTaskScreen,\n findPriorities,\n priorityOrder,\n alphaOrder,\n reverseAlphaOrder,\n projectOrder,\n dueDateOrder,\n} from '../index';\n\nimport {\n makeForm,\n removeChildrenOfContent,\n displayWarning,\n displayTask,\n clearTasks,\n removeHeader,\n createHeader,\n} from './dom-manipulation';\n\nexport {\n createToDoItemButtonLogic,\n addToDoButtonLogic,\n taskDisplayLogic,\n backButtonLogic,\n deleteButtonLogic,\n sortingAndDisplayOfTasksLogic,\n};\n\n//? **`` Displays the tasks by the chosen order\nfunction sortingAndDisplayOfTasksLogic() {\n //? **`` The initial task display\n displayTask(todoArray);\n //? **`` Listens for changes in the sorting dropdown menu\n document.querySelector('#sortingDropdown').addEventListener('change', (e) => {\n const sortValue = document.querySelector('#sortingDropdown').value;\n //? **`` Removes the displayed tasks\n clearTasks();\n //? **`` Reorders the tasks based on the user selection and displays them again in the new order\n switch (sortValue) {\n case 'priority':\n displayTask(priorityOrder());\n break;\n\n case 'A-Z':\n displayTask(alphaOrder());\n break;\n\n case 'Z-A':\n displayTask(reverseAlphaOrder());\n break;\n\n case 'project':\n displayTask(projectOrder());\n break;\n\n case 'due-date':\n displayTask(dueDateOrder());\n break;\n }\n //? **`` Adds the logic back to the new task order to display each task's info\n taskDisplayLogic();\n });\n}\n\n//? **`` This is the 'delete task' warning screen's 'Delete' button logic. It removes the object from the array and returns you to the main screen\nfunction warningDeleteButtonLogic(ID) {\n document.querySelector('.warning-delete').addEventListener('click', (e) => {\n // //? **`` Loops through the array and grabs each object and it's index position\n todoArray.map((object, index) => {\n //? **`` If the task ID number to be deleted matches an ID in an object, that object is removed from the array and you're returned to the main screen\n if (ID == object.idNumber) {\n todoArray.splice(index, 1);\n goToMainScreen();\n }\n });\n });\n}\n\n//? **`` This is the 'delete task' warning screen's 'Go Back' button logic. It takes you back to the task screen.\nfunction warningBackButtonLogic(ID) {\n document.querySelector('.warning-back').addEventListener('click', (e) => {\n goToTaskScreen(ID);\n });\n}\n\n//? **`` Clicking the delete button clears the screen and brings up a warning\nfunction deleteButtonLogic(ID) {\n document.querySelector('.delete').addEventListener('click', (e) => {\n removeChildrenOfContent();\n displayWarning();\n warningBackButtonLogic(ID);\n warningDeleteButtonLogic(ID);\n });\n}\n\n//? **`` Clicking the back button takes you back to the starting screen\nfunction backButtonLogic() {\n document.querySelector('.back').addEventListener('click', (e) => {\n e.preventDefault();\n goToMainScreen();\n });\n}\n\n//? **`` The logic that allows you to display the info from the task you clicked on\nfunction taskDisplayLogic() {\n //? **`` Turns your query node list into an array, loops thru each 'task' class, adds a listener to each 'task' class\n [...document.querySelectorAll('.task')].map((task) => {\n task.addEventListener('click', (e) => {\n //? **`` Gets the ID from the html element and uses it as the argument\n goToTaskScreen(e.target.id);\n });\n });\n}\n\n//? **`` This removes the main button, creates the form, then applies the logic to the two buttons within the form.\nfunction createToDoItemButtonLogic() {\n document.querySelector('.new-todo-button').addEventListener('click', (e) => {\n e.preventDefault();\n removeHeader();\n removeChildrenOfContent();\n makeForm();\n addToDoButtonLogic();\n addNewProjectButtonLogic();\n });\n}\n\n//? **`` This gets all the values from the form, puts the values into their own object, puts the object into the main array, displays all the values, removes the form, displays the main 'ToDo button', and applies the logic to the button.\nfunction addToDoButtonLogic() {\n document.querySelector('.todo-button').addEventListener('click', (e) => {\n e.preventDefault();\n //? **`` Assigns all the form values to their own variables\n const project = document.querySelector('#dropdownProjectMenu').value;\n const task = document.querySelector('#task').value;\n const date = document.querySelector('#date').value;\n const notes = document.querySelector('#notes').value;\n const priority = findPriorities();\n const idNumber = createID();\n\n //? **`` If the task field is empty, nothing happens.\n if (task == '') return;\n\n //? **`` Takes all the form values, turns them into a new object, and turns the object into it's own variable\n const newObject = createObject(\n project,\n task,\n date,\n priority,\n notes,\n idNumber\n );\n\n addObjectToArray(newObject);\n goToMainScreen();\n });\n}\n\n//? **`` This gets the value for a new project, then populates the select field with the new project.\nfunction addNewProjectButtonLogic() {\n document.querySelector('.project-button').addEventListener('click', (e) => {\n e.preventDefault();\n let newProjectField = document.querySelector('#newproject');\n\n //? **`` Returns if nothing is added to the new project field\n if (newProjectField.value === '') {\n return;\n }\n\n addOptions(newProjectField);\n\n //? **`` resets 'create new project' input field\n newProjectField.value = '';\n });\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(\"./src/index.js\");\n",""],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"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;;AAkBhD;;AAEF;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,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;;AAEA;AACA;AACA;AACA;AACA,EAAE,kDAAc;;AAEhB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA,EAAE,4DAAoB;AACtB,EAAE,+DAAe;AACjB;;AAEA;AACA;AACA;AACA;AACA,uBAAuB,SAAS;AAChC;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;;;;;;;;;;;;;;;;;;;;;;AClVkB;;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\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 sortingDiv.classList.add('sorting');\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 element and sets it as the new project value\nfunction updateOptions(newProjectField) {\n const getDropdownMenu = document.querySelector('#dropdownProjectMenu');\n const makeOption = document.createElement('option');\n\n makeOption.setAttribute('value', newProjectField.value);\n makeOption.innerText = newProjectField.value;\n getDropdownMenu.appendChild(makeOption);\n}\n\n//? **`` Shows the date\nfunction displayTodaysDate() {\n const today = getTodaysDate();\n const dateDiv = document.createElement('div');\n dateDiv.innerText = today + ' • today';\n header.prepend(dateDiv);\n}\n\n//? **`` Creates the 'Add ToDo' icon button\nfunction createToDoItemButton() {\n const newToDoButton = document.createElement('div');\n newToDoButton.classList.add('new-todo-button');\n header.prepend(newToDoButton);\n\n //? **`` This icon is linked from Google in the HTML head\n const newTaskIcon = document.createElement('span');\n newTaskIcon.classList.add('material-symbols-outlined');\n newTaskIcon.innerText = ' add_circle ';\n newToDoButton.append(newTaskIcon);\n}\n\n//? **`` Creates the form that takes all the todo info\nfunction makeForm() {\n const formWrapper = document.createElement('div');\n formWrapper.classList.add('form-wrapper');\n content.prepend(formWrapper);\n\n const form = document.createElement('form');\n form.setAttribute('action', '');\n form.setAttribute('method', 'get');\n formWrapper.prepend(form);\n\n //? **`` Dropdown select\n const dropdownWrapper = document.createElement('div');\n dropdownWrapper.classList.add('input-wrapper');\n form.append(dropdownWrapper);\n\n const dropdownProjectMenu = document.createElement('select');\n dropdownProjectMenu.setAttribute('id', 'dropdownProjectMenu');\n dropdownProjectMenu.setAttribute('name', 'dropdownProjectMenu');\n\n const dropdownProjectMenuLabel = document.createElement('label');\n dropdownProjectMenuLabel.innerText = 'Assign To Project';\n dropdownProjectMenuLabel.setAttribute('for', 'dropdownProjectMenu');\n dropdownWrapper.append(dropdownProjectMenuLabel, dropdownProjectMenu);\n\n const defaultOption = document.createElement('option');\n defaultOption.setAttribute('value', 'Default Project');\n defaultOption.innerText = 'Default Project';\n dropdownProjectMenu.appendChild(defaultOption);\n\n //? **`` Create new project\n const newProjectWrapper = document.createElement('div');\n newProjectWrapper.classList.add('input-wrapper');\n form.append(newProjectWrapper);\n\n const newProjectTitle = document.createElement('input');\n newProjectTitle.setAttribute('type', 'text');\n newProjectTitle.setAttribute('id', 'newproject');\n newProjectTitle.setAttribute('name', 'newproject');\n const newProjectLabel = document.createElement('label');\n newProjectLabel.innerText = 'Or Create New Project';\n newProjectLabel.setAttribute('for', 'newproject');\n newProjectWrapper.append(newProjectLabel, newProjectTitle);\n\n const projectButton = document.createElement('button');\n projectButton.innerText = 'Create New Project';\n projectButton.classList.add('project-button');\n form.append(projectButton);\n\n //? **`` New todo title\n const todoTaskWrapper = document.createElement('div');\n todoTaskWrapper.classList.add('input-wrapper');\n form.append(todoTaskWrapper);\n\n const todoTask = document.createElement('input');\n todoTask.setAttribute('type', 'text');\n todoTask.setAttribute('id', 'task');\n todoTask.setAttribute('name', 'task');\n const taskLabel = document.createElement('label');\n taskLabel.innerText = 'ToDo Task';\n taskLabel.setAttribute('for', 'task');\n todoTaskWrapper.append(taskLabel, todoTask);\n\n //? **`` Due date\n const todoDateWrapper = document.createElement('div');\n todoDateWrapper.classList.add('input-wrapper');\n form.append(todoDateWrapper);\n\n const todoDate = document.createElement('input');\n todoDate.setAttribute('type', 'date');\n todoDate.setAttribute('id', 'date');\n todoDate.setAttribute('name', 'date');\n const dateLabel = document.createElement('label');\n dateLabel.innerText = 'Due Date';\n dateLabel.setAttribute('for', 'date');\n todoDateWrapper.append(dateLabel, todoDate);\n\n //? **`` Priority\n const priorityWrapper = document.createElement('div');\n priorityWrapper.classList.add('priority-wrapper');\n form.append(priorityWrapper);\n\n const p1Wrapper = document.createElement('div');\n p1Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p1Wrapper);\n\n const radioPriority1 = document.createElement('input');\n radioPriority1.setAttribute('type', 'radio');\n radioPriority1.setAttribute('id', 'P1');\n radioPriority1.setAttribute('name', 'priority');\n radioPriority1.setAttribute('value', 'P1');\n const labelPriority1 = document.createElement('label');\n labelPriority1.innerText = 'P1';\n labelPriority1.setAttribute('for', 'P1');\n p1Wrapper.append(labelPriority1, radioPriority1);\n\n const p2Wrapper = document.createElement('div');\n p2Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p2Wrapper);\n\n const radioPriority2 = document.createElement('input');\n radioPriority2.setAttribute('type', 'radio');\n radioPriority2.setAttribute('id', 'P2');\n radioPriority2.setAttribute('name', 'priority');\n radioPriority2.setAttribute('value', 'P2');\n const labelPriority2 = document.createElement('label');\n labelPriority2.innerText = 'P2';\n labelPriority2.setAttribute('for', 'P2');\n p2Wrapper.append(labelPriority2, radioPriority2);\n\n const p3Wrapper = document.createElement('div');\n p3Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p3Wrapper);\n\n const radioPriority3 = document.createElement('input');\n radioPriority3.setAttribute('type', 'radio');\n radioPriority3.setAttribute('id', 'P3');\n radioPriority3.setAttribute('name', 'priority');\n radioPriority3.setAttribute('value', 'P3');\n const labelPriority3 = document.createElement('label');\n labelPriority3.innerText = 'P3';\n labelPriority3.setAttribute('for', 'P3');\n p3Wrapper.append(labelPriority3, radioPriority3);\n\n const p4Wrapper = document.createElement('div');\n p4Wrapper.classList.add('p-wrapper');\n priorityWrapper.append(p4Wrapper);\n\n const radioPriority4 = document.createElement('input');\n radioPriority4.setAttribute('type', 'radio');\n radioPriority4.setAttribute('id', 'P4');\n radioPriority4.setAttribute('name', 'priority');\n radioPriority4.setAttribute('value', 'P4');\n radioPriority4.setAttribute('checked', '');\n const labelPriority4 = document.createElement('label');\n labelPriority4.innerText = 'P4';\n labelPriority4.setAttribute('for', 'P4');\n p4Wrapper.append(labelPriority4, radioPriority4);\n\n //? **`` Additional notes\n const notesWrapper = document.createElement('div');\n notesWrapper.classList.add('input-wrapper');\n form.append(notesWrapper);\n\n const notes = document.createElement('textarea');\n notes.setAttribute('id', 'notes');\n notes.setAttribute('name', 'notes');\n const notesLabel = document.createElement('label');\n notesLabel.innerText = 'Notes';\n notesLabel.setAttribute('for', 'notes');\n notesWrapper.append(notesLabel, notes);\n\n //? **`` Create new todo button\n const todoButton = document.createElement('button');\n todoButton.innerText = 'Add ToDo';\n todoButton.classList.add('todo-button');\n\n //? **`` Go back button\n const button = document.createElement('button');\n button.innerText = 'Go Back';\n button.classList.add('back');\n\n form.append(todoButton, button);\n\n populateDropdownMenu();\n backButtonLogic();\n}\n\n//? **`` Loops through the array and for each object it creates a div, puts the task name on it, adds a class, sets the object's ID number to the element ID, and displays it\nfunction displayTask(array) {\n array.map((obj) => {\n const div = document.createElement('div');\n div.innerText = `${obj.task}`;\n div.classList.add('task');\n div.setAttribute('id', obj.idNumber);\n content.appendChild(div);\n });\n}\n\n//? **`` Displays the object key/value pair except for the ID Number\nfunction displayToDoInfo(key, value) {\n //? **`` This makes sure it doesn't display the 'IDNumber' value from the object\n if (key !== 'idNumber') {\n const paragraph = document.createElement('p');\n paragraph.innerText = `${key}: ${value}`;\n content.appendChild(paragraph);\n }\n}\n\n//? **`` Creates a 'go back' button\nfunction displayBackButton() {\n const button = document.createElement('button');\n button.innerText = 'Go Back';\n button.classList.add('back');\n content.appendChild(button);\n}\n\n//? **`` Creates a 'delete' button\nfunction displayDeleteButton() {\n const button = document.createElement('button');\n button.innerText = 'Delete';\n button.classList.add('delete');\n content.appendChild(button);\n}\n\n//? **`` Creates a warning screen when trying to delete a task\nfunction displayWarning() {\n const div = document.createElement('div');\n div.classList.add('warning');\n content.appendChild(div);\n\n const paragraph = document.createElement('p');\n paragraph.innerText = 'Are you sure?';\n div.appendChild(paragraph);\n\n const backButton = document.createElement('button');\n backButton.innerText = 'Go Back';\n backButton.classList.add('warning-back');\n div.appendChild(backButton);\n\n const deleteButton = document.createElement('button');\n deleteButton.innerText = 'Delete';\n deleteButton.classList.add('warning-delete');\n div.appendChild(deleteButton);\n}\n\n//? **`` Removes all the elements within the main \"content\" class element\nfunction removeChildrenOfContent() {\n while (content.firstChild) {\n content.removeChild(content.firstChild);\n }\n}\n\nfunction removeHeader() {\n while (header.firstChild) {\n header.removeChild(header.firstChild);\n }\n}\n","import {\n addObjectToArray,\n addOptions,\n createObject,\n todoArray,\n createID,\n goToMainScreen,\n goToTaskScreen,\n findPriorities,\n priorityOrder,\n alphaOrder,\n reverseAlphaOrder,\n projectOrder,\n dueDateOrder,\n} from '../index';\n\nimport {\n makeForm,\n removeChildrenOfContent,\n displayWarning,\n displayTask,\n clearTasks,\n removeHeader,\n createHeader,\n} from './dom-manipulation';\n\nexport {\n createToDoItemButtonLogic,\n addToDoButtonLogic,\n taskDisplayLogic,\n backButtonLogic,\n deleteButtonLogic,\n sortingAndDisplayOfTasksLogic,\n};\n\n//? **`` Displays the tasks by the chosen order\nfunction sortingAndDisplayOfTasksLogic() {\n //? **`` The initial task display\n displayTask(todoArray);\n //? **`` Listens for changes in the sorting dropdown menu\n document.querySelector('#sortingDropdown').addEventListener('change', (e) => {\n const sortValue = document.querySelector('#sortingDropdown').value;\n //? **`` Removes the displayed tasks\n clearTasks();\n //? **`` Reorders the tasks based on the user selection and displays them again in the new order\n switch (sortValue) {\n case 'priority':\n displayTask(priorityOrder());\n break;\n\n case 'A-Z':\n displayTask(alphaOrder());\n break;\n\n case 'Z-A':\n displayTask(reverseAlphaOrder());\n break;\n\n case 'project':\n displayTask(projectOrder());\n break;\n\n case 'due-date':\n displayTask(dueDateOrder());\n break;\n }\n //? **`` Adds the logic back to the new task order to display each task's info\n taskDisplayLogic();\n });\n}\n\n//? **`` This is the 'delete task' warning screen's 'Delete' button logic. It removes the object from the array and returns you to the main screen\nfunction warningDeleteButtonLogic(ID) {\n document.querySelector('.warning-delete').addEventListener('click', (e) => {\n // //? **`` Loops through the array and grabs each object and it's index position\n todoArray.map((object, index) => {\n //? **`` If the task ID number to be deleted matches an ID in an object, that object is removed from the array and you're returned to the main screen\n if (ID == object.idNumber) {\n todoArray.splice(index, 1);\n goToMainScreen();\n }\n });\n });\n}\n\n//? **`` This is the 'delete task' warning screen's 'Go Back' button logic. It takes you back to the task screen.\nfunction warningBackButtonLogic(ID) {\n document.querySelector('.warning-back').addEventListener('click', (e) => {\n goToTaskScreen(ID);\n });\n}\n\n//? **`` Clicking the delete button clears the screen and brings up a warning\nfunction deleteButtonLogic(ID) {\n document.querySelector('.delete').addEventListener('click', (e) => {\n removeChildrenOfContent();\n displayWarning();\n warningBackButtonLogic(ID);\n warningDeleteButtonLogic(ID);\n });\n}\n\n//? **`` Clicking the back button takes you back to the starting screen\nfunction backButtonLogic() {\n document.querySelector('.back').addEventListener('click', (e) => {\n e.preventDefault();\n goToMainScreen();\n });\n}\n\n//? **`` The logic that allows you to display the info from the task you clicked on\nfunction taskDisplayLogic() {\n //? **`` Turns your query node list into an array, loops thru each 'task' class, adds a listener to each 'task' class\n [...document.querySelectorAll('.task')].map((task) => {\n task.addEventListener('click', (e) => {\n //? **`` Gets the ID from the html element and uses it as the argument\n goToTaskScreen(e.target.id);\n });\n });\n}\n\n//? **`` This removes the main button, creates the form, then applies the logic to the two buttons within the form.\nfunction createToDoItemButtonLogic() {\n document.querySelector('.new-todo-button').addEventListener('click', (e) => {\n e.preventDefault();\n removeHeader();\n removeChildrenOfContent();\n makeForm();\n addToDoButtonLogic();\n addNewProjectButtonLogic();\n });\n}\n\n//? **`` This gets all the values from the form, puts the values into their own object, puts the object into the main array, displays all the values, removes the form, displays the main 'ToDo button', and applies the logic to the button.\nfunction addToDoButtonLogic() {\n document.querySelector('.todo-button').addEventListener('click', (e) => {\n e.preventDefault();\n //? **`` Assigns all the form values to their own variables\n const project = document.querySelector('#dropdownProjectMenu').value;\n const task = document.querySelector('#task').value;\n const date = document.querySelector('#date').value;\n const notes = document.querySelector('#notes').value;\n const priority = findPriorities();\n const idNumber = createID();\n\n //? **`` If the task field is empty, nothing happens.\n if (task == '') return;\n\n //? **`` Takes all the form values, turns them into a new object, and turns the object into it's own variable\n const newObject = createObject(\n project,\n task,\n date,\n priority,\n notes,\n idNumber\n );\n\n addObjectToArray(newObject);\n goToMainScreen();\n });\n}\n\n//? **`` This gets the value for a new project, then populates the select field with the new project.\nfunction addNewProjectButtonLogic() {\n document.querySelector('.project-button').addEventListener('click', (e) => {\n e.preventDefault();\n let newProjectField = document.querySelector('#newproject');\n\n //? **`` Returns if nothing is added to the new project field\n if (newProjectField.value === '') {\n return;\n }\n\n addOptions(newProjectField);\n\n //? **`` resets 'create new project' input field\n newProjectField.value = '';\n });\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(\"./src/index.js\");\n",""],"names":[],"sourceRoot":""}
\ No newline at end of file