My First Time Using JS

This week I started learning JS in my Flatiron bootcamp. This is the language I was most excited to learn. It is definitely more challenging than I anticipated and I still have very basic questions about so many aspects of the language. For instance, semicolons, when to use them? The arrow function expressions are still really muddy for me. Division of concerns is not as clear to me in JS as it was in Ruby. It is only my first week so I am giving myself some room to struggle.

Most of the labs this week were basically code alongs with no real substance. They were very helpful for me, but overall not that interesting. I wanted to share my first real lab in the JS course which is called Task Lister Lite. The point of the lab is to use .preventDefault() so that every time someone submits a new task to the list, the page doesn't refresh. Bonus points for doing anything else. I decided to also add an edit and delete buttons as well. This is purely front end so none of the information is persisted to a database of any sorts.

Instead of doing my usual explanations, I have decided to just share all of the pseudo code I did. Since I am so new to the language, I wrote so much pseudo code that I think is more helpful than me describing every aspect. Anyways I hope you enjoy my first JS project.

let editMode = false;

document.addEventListener("DOMContentLoaded", () => {
  const taskForm = document.getElementById('create-task-form');
  // grab form
  console.log(taskForm);
  taskForm.addEventListener("submit", handleSubmit)
  // add event listener for submit and handling submit
});

function handleSubmit(event) {
  event.preventDefault();
  // prevent the default so the page won't reload
  console.log(event);
  const taskInput = document.getElementById('new-task-description');
  // grab input field

  if (!!editMode) {
    editMode.children[0].innerText = taskInput.value
    // edit the children of the individual task and the first child is the text
    document.getElementById('submit-task').value = "Create New Task";
    // resetting the submit button to say Create New Task again
    editMode = false;
    // ending edit mode
  } else {
    addTask(taskInput.value);
  // add the value of the input to the task list
  }
  taskInput.value = "";
  // resetting the input field text
}

function addTask(task) {
  const tasksDiv = document.getElementById('tasks');
  // grab the tasks div
  const taskDiv = document.createElement('div');
  // create a new div for each task
  const taskSpan = document.createElement('span');
  // create a span for each task
  const deleteIcon = document.createElement('span');
  // create 'x' element for deletion 
  const editButton = document.createElement('button');
  // create edit button

  deleteIcon.innerHTML = "✖";
  // making delete icon look like an x
  taskSpan.innerText = task;
  // add the text to the task span
  editButton.innerText = "Edit";

  deleteIcon.addEventListener("click", (event) => {
    event.target.parentElement.remove();
    //grabbing the parent element of the delete icon (taskDiv) and deleting it
  })

  editButton.addEventListener("click", handleEdit);

  taskDiv.append(taskSpan, deleteIcon, editButton);
  // add the task span, delete icon, and edit button to the individual task div
  tasksDiv.append(taskDiv);
  // add the individual task divs to the div container

}

function handleEdit(event) {
  const taskDiv = event.target.parentElement;
  // grabbing the parent to the individual task div
  let task = taskDiv.children[0].innerText;
  // grab the individual task div
  const submitButton = document.getElementById('submit-task');
  // grab submit button
  const input = document.getElementById('new-task-description');
  // get the text input
  input.value = task;
  // change the value of the text input to the comment we are editing
  submitButton.value = "Edit";
  // change the submit button to say Edit
  editMode = taskDiv;
  // edit the individual task div
}