text: var taskIdCounter = 0;
  
  // use querySelector method to find elements in the DOM
  var formEl = document.querySelector("#task-form");
  var tasksToDoEl = document.querySelector("#tasks-to-do");
  var tasksInProgressEl = document.querySelector("#tasks-in-progress");
  var tasksCompletedEl = document.querySelector("#tasks-completed");
  var pageContentEl = document.querySelector("#page-content");
  
  // Create an array to hold tasks for saving
  var tasks = [];
  
  // Task Form Handler
  var taskFormHandler = function (event) {
    event.preventDefault();
  
    // Grabs the input from task-name form field, and selected from task-type
    var taskNameInput = document.querySelector("input[name='task-name']").value;
    var taskTypeInput = document.querySelector("select[name='task-type']").value;
  
    // check if input values are empty strings (validate)
    if (!taskNameInput || !taskTypeInput) {
      alert("You need to fill out the task form!");
      return false;
    }
  
    // Reset the form fields for the user
    document.querySelector("input[name='task-name']").value = "";
    document.querySelector("select[name='task-type']").selectedIndex = 0;
  
    // check if task is new or one being edited by seeing if it has a data-task-id attribute
    var isEdit = formEl.hasAttribute("data-task-id");
  
    // If there is a data-task-id, get the id move to the completeEditTask function... else, package up data as an object and pass to createTaskEl function as an argument
    if (isEdit) {
      var taskId = formEl.getAttribute("data-task-id");
      completeEditTask(taskNameInput, taskTypeInput, taskId);
    } else {
      var taskDataObj = {
        name: taskNameInput,
        type: taskTypeInput,
        status: "to do",
      };
  
      createTaskEl(taskDataObj);
    }
  };
  
  // Create Task Function
  var createTaskEl = function (taskDataObj) {
    // Create the list item, set the class, and give an attribute of data-task-id
    var listItemEl = document.createElement("li");
    listItemEl.className = "task-item";
    listItemEl.setAttribute("data-task-id", taskIdCounter);
  
    // Create the div to hold task info, give it a class, and add HTML which includes object properties
    var taskInfoEl = document.createElement("div");
    taskInfoEl.className = "task-info";
    taskInfoEl.innerHTML =
      "<h3 class='task-name'>" +
      taskDataObj.name +
      "</h3><span class='task-type'>" +
      taskDataObj.type +
      "</span>";
    listItemEl.appendChild(taskInfoEl);
  
    // append taskActionesEl to listItemEl
    var taskActionsEl = createTaskActions(taskIdCounter);
    listItemEl.appendChild(taskActionsEl);
  
    // sort element to correct category
    switch (taskDataObj.status) {
      case "to do":
        taskActionsEl.querySelector(
          "select[name='status-change']"
        ).selectedIndex = 0;
        tasksToDoEl.append(listItemEl);
        break;
      case "in progress":
        taskActionsEl.querySelector(
          "select[name='status-change']"
        ).selectedIndex = 1;
        tasksInProgressEl.append(listItemEl);
        break;
      case "completed":
        taskActionsEl.querySelector(
          "select[name='status-change']"
        ).selectedIndex = 2;
        tasksCompletedEl.append(listItemEl);
        break;
      default:
        console.log("Something went wrong!");
    }
  
    // Save task as an object with name, type, status, and id properties then push it into tasks array
    taskDataObj.id = taskIdCounter;
  
    tasks.push(taskDataObj);
  
    // Save the tasks to local storage
    saveTasks();
  
    // Increase task counter for next unique Data id
    taskIdCounter++;
  };
  
  var createTaskActions = function (taskId) {
    // Create a div to hold the elements
    var actionContainerEl = document.createElement("div");
    actionContainerEl.className = "task-actions";
  
    // Create edit button
    var editButtonEl = document.createElement("button");
    editButtonEl.textContent = "Edit";
    editButtonEl.className = "btn edit-btn";
    editButtonEl.setAttribute("data-task-id", taskId);
    actionContainerEl.appendChild(editButtonEl);
  
    // Dreate delete button
    var deleteButtonEl = document.createElement("button");
    deleteButtonEl.textContent = "Delete";
    deleteButtonEl.className = "btn delete-btn";
    deleteButtonEl.setAttribute("data-task-id", taskId);
    actionContainerEl.appendChild(deleteButtonEl);
  
    // Create change status dropdown
    var statusSelectEl = document.createElement("select");
    statusSelectEl.setAttribute("name", "status-change");
    statusSelectEl.setAttribute("data-task-id", taskId);
    statusSelectEl.className = "select-status";
    actionContainerEl.appendChild(statusSelectEl);
  
    // Create the Status options
    var statusChoices = ["To Do", "In Progress", "Completed"];
    for (var i = 0; i < statusChoices.length; i++) {
      // Create option element
      var statusOptionEl = document.createElement("option");
      statusOptionEl.setAttribute("value", statusChoices[i]);
      statusOptionEl.textContent = statusChoices[i];
  
      // Append to select
      statusSelectEl.appendChild(statusOptionEl);
    }
  
    return actionContainerEl;
  };
  
  var completeEditTask = function (taskName, taskType, taskId) {
    // find task list item with taskId value
    var taskSelected = document.querySelector(
      ".task-item[data-task-id='" + taskId + "']"
    );
  
    // set new values
    taskSelected.querySelector("h3.task-name").textContent = taskName;
    taskSelected.querySelector("span.task-type").textContent = taskType;
  
    // loop through tasks array and task object with new content
    for (var i = 0; i < tasks.length; i++) {
      if (tasks[i].id === parseInt(taskId)) {
        tasks[i].name = taskName;
        tasks[i].type = taskType;
      }
    }
  
    alert("Task Updated!");
  
    // remove data attribute from form
    formEl.removeAttribute("data-task-id");
    // update formEl button to go back to saying "Add Task" instead of "Edit Task"
    formEl.querySelector("#save-task").textContent = "Add Task";
    // save tasks to localStorage
    saveTasks();
  };
  
  var taskButtonHandler = function (event) {
    // get target element from event
    var targetEl = event.target;
  
    // If the edit button was clicked- edit task ...else delete task
    if (targetEl.matches(".edit-btn")) {
      console.log("edit", targetEl);
      var taskId = targetEl.getAttribute("data-task-id");
      editTask(taskId);
    } else if (targetEl.matches(".delete-btn")) {
      console.log("delete", targetEl);
      var taskId = targetEl.getAttribute("data-task-id");
      deleteTask(taskId);
    }
  };
  
  var taskStatusChangeHandler = function (event) {
    console.log(event.target.value);
  
    // find task list item based on event.target's data-task-id attribute, then grab the parent element based on id
    var taskId = event.target.getAttribute("data-task-id");
    var taskSelected = document.querySelector(
      ".task-item[data-task-id='" + taskId + "']"
    );
  
    // Convert status to lowercase for conditional statements
    var statusValue = event.target.value.toLowerCase();
  
    if (statusValue === "to do") {
      tasksToDoEl.appendChild(taskSelected);
    } else if (statusValue === "in progress") {
      tasksInProgressEl.appendChild(taskSelected);
    } else if (statusValue === "completed") {
      tasksCompletedEl.appendChild(taskSelected);
    }
  
    // Update task's in tasks array
    for (var i = 0; i < tasks.length; i++) {
      if (tasks[i].id === parseInt(taskId)) {
        tasks[i].status = statusValue;
      }
    }
  
    // Save to local storage
    saveTasks();
  };
  
  // Edit Task
  var editTask = function (taskId) {
    // console.log(taskId);
  
    // get task list item element
    var taskSelected = document.querySelector(
      ".task-item[data-task-id='" + taskId + "']"
    );
  
    // get content from task name and type
    var taskName = taskSelected.querySelector("h3.task-name").textContent;
    // console.log(taskName);
  
    var taskType = taskSelected.querySelector("span.task-type").textContent;
    // console.log(taskType);
  
    // write values of taskName and taskType to form to be edited
    document.querySelector("input[name='task-name']").value = taskName;
    document.querySelector("select[name='task-type']").value = taskType;
  
    // set data attribute to the form with a value of the task's id so it knows which one is being edited
    formEl.setAttribute("data-task-id", taskId);
    // update form's button to reflect editing a task rather than creating a new one
    formEl.querySelector("#save-task").textContent = "Save Task";
  };
  
  // Delete Task
  var deleteTask = function (taskId) {
    // console.log(taskId);
  
    // find task list element with taskID value and remove it
    var taskSelected = document.querySelector(
      ".task-item[data-task-id='" + taskId + "']"
    );
    taskSelected.remove();
  
    // Create a new array to hold updated list of tasks
    var updatedTaskArr = [];
  
    // Loop through current tasks
    for (var i = 0; i < tasks.length; i++) {
      // If tasks[i].id doesn't match the value of taskId, let's keep that task and push it into the new array
      if (tasks[i].id !== parseInt(taskId)) {
        updatedTaskArr.push(tasks[i]);
      }
    }
  
    // Reassign tasks array to be the same as updatedTaskArr
    tasks = updatedTaskArr;
    saveTasks();
  };
  
  // Save Tasks
  var saveTasks = function () {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  };
  
  // Display tasks on page load
  var loadTasks = function () {
    var savedTasks = localStorage.getItem("tasks");
    // if there are no tasks, set tasks to an empty array and return out of the function... else, load up saved tasks
    if (!savedTasks) {
      return false;
    }
  
    // parse into array of objects
    savedTasks = JSON.parse(savedTasks);
  
    // loop through savedTasks array
    for (var i = 0; i < savedTasks.length; i++) {
      // pass each task object into the `createTaskEl()` function
      createTaskEl(savedTasks[i]);
    }
  };
  
  // Create a new task
  formEl.addEventListener("submit", taskFormHandler);
  
  // Edit and Delete buttons
  pageContentEl.addEventListener("click", taskButtonHandler);
  
  // For changing the status of a task
  pageContentEl.addEventListener("change", taskStatusChangeHandler);
  
  loadTasks();
  