Izpēte - Paskaidro kodu

Lai izprastu HTML un JS savstarpējo mijiedarbību, paskaidro kodu rindiņu pa rindiņai.

Saturs

• Uzdevuma apraksts
• JS kods

Uzdevuma apraksts

Izmantojot ChatGPT, paskaidro rindiņu pa rindiņai JavaScript kodu.

Piemēram:

var enterButton = document.getElementById("enter");

Var skaidrot kā

tāpēc paskaidrojumā varētu rakstīt

//definējam mainīgo enterButton, kuram piešķiram vertību HTML elementu ar id 'enter'
var enterButton = document.getElementById("enter");

JS kods

var enterButton = document.getElementById("enter");
enterButton.addEventListener("click", createListElement);
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var editItemId = null;

function createListElement() {
  var li;
  const liId = `li-${Date.now()}`;

  if (editItemId === null) {
    li = document.createElement("li");

    li.appendChild(document.createTextNode(input.value));
    li.classList.add(
      "list-group-item",
      "d-flex",
      "justify-content-between",
      "align-items-start"
    );

    ul.appendChild(li);
  } else {
    li = document.getElementById(editItemId);
    li.innerText = input.value;
  }

  li.setAttribute("id", liId);

  let btnSpan = document.createElement("span");
  let editBtn = document.createElement("button");
  let editIcon = document.createElement("i");
  editIcon.classList.add("bi", "bi-pen");
  editBtn.appendChild(editIcon);
  editBtn.classList.add("btn", "btn-secondary", "btn-sm");
  btnSpan.appendChild(editBtn);
  editBtn.addEventListener("click", function () {
    editListItem(liId);
  });

  let dBtn = document.createElement("button");
  let delIcon = document.createElement("i");
  delIcon.classList.add("bi", "bi-trash");
  dBtn.appendChild(delIcon);
  dBtn.classList.add("btn", "btn-secondary", "btn-sm", "ms-2");
  btnSpan.appendChild(dBtn);
  dBtn.addEventListener("click", function () {
    deleteListItem(liId);
  });
  li.appendChild(btnSpan);

  li.addEventListener("click", function () {
    crossOut(liId);
  });

  input.value = "";
  editItemId = null;
}

function deleteListItem(liId) {
  let deleteLi = document.getElementById(liId);
  deleteLi.classList.add("delete");
}

function editListItem(liId) {
  let editLi = document.getElementById(liId);
  input.value = editLi.textContent;
  editItemId = liId;
}

function crossOut(liId) {
  if (editItemId === null) {
    let doneLi = document.getElementById(liId);
    if (doneLi) {
      doneLi.classList.toggle("done");
    }
  }
}

input.addEventListener("keypress", addListAfterKeypress);
function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.key === "Enter") {
    createListElement();
  }
}