Beginning Web Development Project

• Open the Edit form: If the user clicks the edit icon (contains class "edit-icon"), change the To-Do item to an edit form.
• Check if the target element was an element that contains the "edit-icon" class. If so, change the li elemnt to an edit form.

• else if (event.target.classList.contains('edit-icon')) {
    let task = document.getElementById(`task-${id}`);
    task = task.textContent;
    let details = document.getElementById(`details-${id}`);
    details = details.textContent;
    let done = document.getElementById(`task-${id}`);
    done = done.classList.contains('text-decoration-line-through');
    todo = { id, task, details, done };
    li.innerHTML = createEdit(todo);
    li.classList.add('bg-secondary');
  }

• Get the task and details textContent.
• Get the done true or false value based on whether the task element as the "text-decoration-line-through" class.
• The todo variable was declared earlier:
• let todo; 
• Set the todo variable to an object literal, setting the properties to the values from the list item.
• todo = { id, task, details, done };
• This is shorthand for todo = { id: id , task: task, details: details, done: done };. You can use this shorthand if the property name and value variable are the same.
• Replace the li list item with the edit form. Set the li (list item) innerHTML to the result returned from calling the createTodo(todo) function. Pass in the updated todo object as the argument. 
• li.innerHTML = createEdit(todo); 
• The createEdit function returns the edit form HTML.

• const createEdit = (todo) => {
    const editForm = `<div class="form-floating mb-2">
      <input type="text" id="task-${todo.id}" class="form-control mb-2" value="${todo.task}">
      <label for="task">Task:</label>
    </div>
    <div class="form-floating mb-2">
      <textarea id="details-${todo.id}" class="form-control" style="height: 80px">${todo.details}</textarea>
      <label for="details">Details:</label>
    </div>
    <button class="edit-submit-btn btn btn-sm btn-outline-light col-md-2">Save Edit</button>
    <button class="edit-cancel-btn btn btn-sm btn-outline-light col-md-2 float-end">Cancel</button>`;
    return editForm;
  };

• Add the "bg-secondary" class to the li (list item) element. That turns the background grey.
• li.classList.add('bg-secondary'); 
• The edit form is now open and populated with the list item values.

• Handle the edit submit: Update the To-Do item with the new data when the form is submitted.

• else if (event.target.classList.contains('edit-submit-btn')) {
    todo.task = document.getElementById(`task-${id}`).value;
    todo.details = document.getElementById(`details-${id}`).value;
    li.innerHTML = createLi(todo);
    li.classList.remove('bg-secondary');
    todo = {};
  }

• Check if the target element is the edit form's submit button. 
• else if (event.target.classList.contains('edit-submit-btn')) {...}
• If so, get the task and details values from the form and assign the values to the todo object.

• todo.task = document.getElementById(`task-${id}`).value;
  todo.details = document.getElementById(`details-${id}`).value;

• Set the li (list item) innerHTML to the updated values. Call the createLi() function defined earlier. Pass in the todo object as the argument. It will return the HTML string.
• li.innerHTML = createLi(todo); 
• Remove the bg-secondary class to remove the grey background color.
• li.classList.remove('bg-secondary');
• Reset the todo variable to an empty object.
• todo = {}; 

• Handle cancel edit form: If the user clicks the cancel button on the edit form, close the form and put the list item back to the way it was.

• else if (e.target.classList.contains('edit-cancel-btn')) {
    li.classList.remove('bg-secondary');
    li.innerHTML = createLi(todo);
    todo = {};
  }

• Check if the target element is the edit form's cancel button. 
• else if (e.target.classList.contains('edit-cancel-btn')) {...}
• If so remove the bg-secondary class from the li element. That will remove the grey background.
• li.classList.remove('bg-secondary');
• Set the li element back to the list item by calling the createLi() function passing in the todo object as the argument.
• li.innerHTML = createLi(todo);
• Lastly, set the todo variable to an empty object to clear it out.
• todo = {}; 
• The edit form is now closed and the list item is back the way it was.

• Remove a To-Do item: If the user clicks the remove icon, delete the item from the list.

• else if (event.target.classList.contains('remove-icon')) {
    li.remove();
  }

• Check if the target element was the remove icon. If so, remove the li list item.

• The To-Do list application is now complete. 

class Todo {
  constructor(id, task, details, done) {
    this.id = id;
    this.task = task;
    this.details = details;
    this.done = done;
  }
}

const newTodo = new Todo(1, "Learn JavaScript Classes", "Put details here", true);

{ id: 1, task: 'Learn JavaScript Classes', details: 'Put details here', done: true }

const addBtn = document.getElementById('add-btn');
const addForm = document.getElementById('add-form');
const task = document.getElementById('task');
const details = document.getElementById('details');
const submitBtn = document.getElementById('submit-btn');
const cancelBtn = document.getElementById('cancel-btn');
const list = document.getElementById('list');

// Create list item.
const createLi = (todo) => {
  const listItem = `<strong id="task-${todo.id}" class="task-elem${todo.done ? ' text-decoration-line-through' : ''}" style="cursor: pointer;">${todo.task}</strong>
    <i class="remove-icon bi bi-x-circle-fill text-danger float-end" role="button"></i>
    <i class="edit-icon bi bi-pencil-square float-end mx-1 text-dark" role="button"></i>
    <i class="details-icon bi bi-info-circle-fill text-dark float-end ms-2" role="button"></i>
    <p id="details-${todo.id}" class="mb-0 d-none">${todo.details}</p>`;
  return listItem;
};

// Set id to 0
let id;
// Seed todos and display
const setTodos = () => {
  const todos = [
    {
      id: 1, task: 'Create To-Do list using an object literal', details: 'After completing the Beginning JavaScript tutorial do the To-Do list project. Refer to the tutorial for reference.', done: true,
    },
    {
      id: 2, task: 'Create To-Do list using a Class', details: 'After completing the To-Do list project, modify the JavaScript file to use a Todo Class instead of an object literal.', done: false,
    },
    {
      id: 3, task: 'Final To-Do list project', details: 'After finishing the full JavaScript tutorial series, complete the To-Do list final version.', done: false,
    },
  ];

  // Populate list with To-Do items.
  let listItems = '';
  todos.forEach((todo) => {
    listItems += `<li id="${todo.id}" class="list-group-item">${createLi(todo)}</li>`;
  });
  list.innerHTML = listItems;
  id = todos.length;
};
setTodos();

// Display form to add a To-Do item.
addBtn.addEventListener('click', () => {
  addForm.classList.remove('d-none');
});

// Hide form when cancel button is clicked.
cancelBtn.addEventListener('click', () => {
  task.value = '';
  details.value = '';
  addForm.classList.add('d-none');
});

class Todo {
  constructor(id, task, details, done) {
    this.id = id;
    this.task = task;
    this.details = details;
    this.done = done;
  }
}

// Handle Add Todo form submission.
submitBtn.addEventListener('click', (e) => {
  e.preventDefault();
  id += 1;
  const newTodo = new Todo(id, task.value, details.value, false);
  const newLi = `<li id="${newTodo.id}" class="list-group-item">${createLi(newTodo)}</li>`;
  list.innerHTML += newLi;
  task.value = '';
  details.value = '';
  addForm.classList.add('d-none');
});

let todo;

// Function returns edit form populated with existing data.
const createEdit = (todo) => {
  const editForm = `<div class="form-floating mb-2">
    <input type="text" id="task-${todo.id}" class="form-control mb-2" value="${todo.task}">
    <label for="task">Task:</label>
  </div>
  <div class="form-floating mb-2">
    <textarea id="details-${todo.id}" class="form-control" style="height: 80px">${todo.details}</textarea>
    <label for="details">Details:</label>
  </div>
  <button class="edit-submit-btn btn btn-sm btn-outline-light col-md-2">Save Edit</button>
  <button class="edit-cancel-btn btn btn-sm btn-outline-light col-md-2 float-end">Cancel</button>`;
  return editForm;
};

// Handle clicks on todo items.
list.addEventListener('click', (e) => {
  const li = e.target.parentElement;
  const id = li.id;

  // Handle Done
  if (e.target.classList.contains('task-elem')) {
    e.target.classList.toggle('text-decoration-line-through');

  // Handle toggle details
  } else if (e.target.classList.contains('details-icon')) {
    const details = document.getElementById(`details-${id}`);
    details.classList.toggle('d-none');

  // Handle Edit
  } else if (e.target.classList.contains('edit-icon')) {
    let task = document.getElementById(`task-${id}`);
    task = task.textContent;
    let details = document.getElementById(`details-${id}`);
    details = details.textContent;
    let done = document.getElementById(`task-${id}`);
    done = done.classList.contains('text-decoration-line-through');
    todo = new Todo(id, task, details, done);
    li.innerHTML = createEdit(todo);
    li.classList.add('bg-secondary');

  // Handle submit edit form.
  } else if (e.target.classList.contains('edit-submit-btn')) {
    todo.task = document.getElementById(`task-${id}`).value;
    todo.details = document.getElementById(`details-${id}`).value;
    li.innerHTML = createLi(todo);
    li.classList.remove('bg-secondary');
    todo = null;

  // Handle cancel edit form
  } else if (e.target.classList.contains('edit-cancel-btn')) {
    li.classList.remove('bg-secondary');
    li.innerHTML = createLi(todo);
    todo = null;

  // Handle remove todo
  } else if (e.target.classList.contains('remove-icon')) {
    li.remove();
  }
});

Conclusion

• Make sure you have a good understanding of both the Beginning JavaScript tutorial and this project before moving on to the Intermediate JavaScript tutorial series. 
• There is another version of this project called todo-list-intermediate. It uses the same base code as this app, but incorporates concepts from the intermediate JavaScript tutorial series such as modules, local storage, JSON, errors, regular expressions and more. Do that project after finishing the intermediate JavaScript tutorial series.