Looking for some help/knowledge with moving the label text to the right side of the custom checkbox instead of the left.

If you check the CodePen link below you will see that upon adding a new list item that the label text is on the wrong side of the custom checkbox. I added some hard coded list items for reference of what I want it to look like. If you have a solution to this problem please help educate me.

CodePen: Todo List

Desired HTML output

<li >
  <input type="checkbox" id="task-1" name="task-1" />
  <label for="task-1" >
    <span ></span>
    Hard code list item #1
  </label>
  <button  type="button">
    <img src="../images/icon-cross.svg" alt="">
  </button>
</li>

JavaScript

const usrInput = document.getElementById('create-new');
const itemCount = document.querySelector('.item-count');

function addToList() {
  const input = document.createElement('input'); 
        input.className = 'input__cb';
        input.id = 'input';
        input.type = 'checkbox';
  const spanCB = document.createElement('span');
        spanCB.className = 'custom__checkbox';
  const label = document.createElement('label');
        label.className = 'todo__label';
        label.setAttribute('for', 'input');
        label.textContent = usrInput.value;
        label.appendChild(spanCB);
  const img = document.createElement('img');
        img.src = 'https://raw.githubusercontent.com/meetjoewarren/learning-center/9b6cbb922ae2c81be98b6a0374bfcd08a0081e98/frontend-mentor/todo-app-main/images/icon-cross.svg';
  const button = document.createElement('button');
        button.className = 'btn-del';
        button.type = 'button';
        button.appendChild(img);
  const listItem = document.createElement('li');
        listItem.className = 'todo__list--item';
        listItem.draggable = 'true';
        listItem.appendChild(input);
        listItem.appendChild(label);
        listItem.appendChild(button);
  const details = document.querySelector('.todo__list--details'); 
  const fragment = new DocumentFragment();
        fragment.appendChild(listItem);
  const list = document.querySelector('.todo__list');
        list.insertBefore(fragment, details);
  itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  usrInput.value = '';
}

// Add to list on 'Enter' press
usrInput.addEventListener('keydown', e => {
  if (e.code === 'Enter') {
    addToList();
  }
})


// Delete Button
const deleteBtn = document.querySelectorAll('.btn-del');

for (let i = 0; i < deleteBtn.length; i  ) {
  deleteBtn[i].addEventListener('click', e => {
    e.target.parentElement.parentElement.remove();
    itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  })
}

// If checked cross out
// const inputCB = document.querySelectorAll('.input__cb');
// const todoLabel = document.querySelectorAll('.todo__label');
// for (let i = 0; i < todoLabel.length; i  ) {
//   if (inputCB == true) {
//     todoLabel[i].classList.add('strikeout');
//   } else {
//     return;
//   }
// }

Also, bonus question... how would I go about observing changes to the list so I can update the remove/delete button function? Mutation Observer? Right now it is only attaching the event listener to the currently hard coded list items.

CodePudding user response：

The checkbox is appearing on the wrong side of the text because it is being appended to the end of the label, after the text. Instead of using the appendChild() method to do this, use the prepend() method. This will insert the custom checkbox before the text.

In regards to your second question, you can add attach the event listener to the delete button in your addToList() function, right after the element is created. Mutation Observer probably isn't what you want in this scenario.