Morning session peer to peer code review

[BahirHakimy]

You have done an excellent job, Your code is clean and professional 🥇

Although it's perfect, here are some suggestions that will make your code even better

• To-do-List/src/js/modules/displayTodos.js

  Line 10 in f90df38

  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  In here as you are using this piece of code frequently, it's better to move to a function to make your code more consistent.

• To-do-List/src/js/modules/displayTodos.js

  Lines 15 to 18 in f90df38

  	const emptyMsghtml = '<p class="todos__list-empty">Empty task list</p>';
  	// insert the empty message html into the page
  	todoTastList.insertAdjacentHTML('afterbegin', emptyMsghtml);

  Also in here as you are just creating and inserting an element as the first-child, hence it will be shorter and more convenient to use element.innerHTML instead of element.insertAdjacentHTML().

• To-do-List/src/js/index.js

  Line 33 in f90df38

  const formData = new FormData(form);

  Since you have only one input, it would be more convenient to directly pass input.value and avoid unnecessary code.

• To-do-List/src/js/modules/displayTodos.js

  Lines 23 to 50 in f90df38

  	if (task.completed === true) {
  	return `
  	<div draggable="true" class="todo">
  	<button class="todo__btn-check checked" data-check-btn='${index + 1}'>
  	<img src="${checkBtnImg}" alt="to do completion icon" class="todo__check-img">
  	</button>
  	<label class="todo__label" for="todo__item-${index + 1}">
  	<textarea class="todo__item completed" name="todo__item" id="todo__item-${index + 1}" cols="30" rows="1" data-task-id='${index + 1}'>${task.description}</textarea>
  	<button class="todo__btn-delete" data-delete-btn='${index + 1}'>
  	<img src="${deleteImg}" alt="delete icon" class="todo__delete-img">
  	</button>
  	</label>
  	<img src="${dragImg}" alt="drag icon" class="todo__btn-drag" data-drag-btn='${index + 1}'>
  	</div>`;
  	}
  	return `
  	<div draggable="true" class="todo">
  	<button class="todo__btn-check" data-check-btn='${index + 1}'>
  	<img src="${checkBtnImg}" alt="to do completion icon" class="todo__check-img">
  	</button>
  	<label class="todo__label" for="todo__item-${index + 1}">
  	<textarea class="todo__item" name="todo__item" id="todo__item-${index + 1}" cols="30" rows="1" data-task-id='${index + 1}'>${task.description}</textarea>
  	<button class="todo__btn-delete" data-delete-btn='${index + 1}'>
  	<img src="${deleteImg}" alt="delete icon" class="todo__delete-img">
  	</button>
  	</label>
  	<img src="${dragImg}" alt="drag icon" class="todo__btn-drag" data-drag-btn='${index + 1}'>
  	</div>`;

  In here, since the only thing that is distinct between this two block of HTML code is the class names, it is better to only have one of them and conditionally add the class name to elements. bellow is how you can do it

        return `
        <div draggable="true" class="todo">
          <button class="todo__btn-check ${task.completed && 'checked'}" data-check-btn='${index + 1}'>
            <img src="${checkBtnImg}" alt="to do completion icon" class="todo__check-img">
          </button>
          <label class="todo__label" for="todo__item-${index + 1}">
            <textarea class="todo__item ${task.completed && 'completed'}" name="todo__item" id="todo__item-${index + 1}" cols="30" rows="1" data-task-id='${index + 1}'>${task.description}</textarea>
            <button class="todo__btn-delete" data-delete-btn='${index + 1}'>
              <img src="${deleteImg}" alt="delete icon" class="todo__delete-img">
            </button>
          </label>
          <img src="${dragImg}" alt="drag icon" class="todo__btn-drag" data-drag-btn='${index + 1}'>
        </div>`;

Cheers and happy coding 🍻