Practical Task #14

by Pavel_FD2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<h1>To Do List</h1>

<div>
  <ol></ol>
</div>

<div class="add-delete">
  <input class="newPos" type="text" placeholder="Enter a new position...">
  <button class="add-button">Add</button>
  <button class="add-button">Delete</button>
</div>

  <script src="./main.js"></script>
</body>
</html>

JavaScript

let myOl = document.querySelector("ol"),
    btnAddDel = document.getElementsByTagName('button'),
    myInput = document.getElementsByClassName('newPos')[0];
    myElemInput = myInput;

//начальный список
function firstList() {
  let arrLi = ['first place', 'second place', 'third place', 'forth place', 'fifth place'];      
  arrLi.forEach((i) => {
    newLi = document.createElement('li');
    newLi.textContent = i;
    myOl.append(newLi);
  });
};
firstList();

//добавление по кнопке
function addLi() {
   let newLi = document.createElement('li'),
       myInput = document.getElementsByClassName('newPos')[0].value;
  if (myInput !== '') {
    newLi.textContent = myInput;
    myOl.append(newLi);
    btnAddDel[1].disabled = false;
  } else {return false};    
    document.getElementsByClassName('newPos')[0].value  = '';
    myElemInput.focus();
};

//добавление по Enter
function enterPress(key) {
  if (key.keyCode === 13) {
    addLi();
  };
};

//проверка наличия элементов в списке
function checkLi() {
  let arrLi = document.querySelectorAll('li');
  if (arrLi.length === 0) {
    btnAddDel[1].disabled = true;
  };
};

//удаление по кнопке delete
function deleteLi() {
  let arrLi = document.querySelectorAll('li');
  arrLi[arrLi.length - 1].remove();
  checkLi();
  myElemInput.focus();
  };

//таргетирование элемента списка (focus)
function editLi(event) {
  let target = event.target,
      liContent = target.textContent;
  newInput = document.createElement('input');
  newInput.value = liContent;
  target.textContent = '';
  target.append(newInput);
  newInput.focus();
  newInput.onblur = function() {
    newInputValue = newInput.value;
    newLi = document.createElement('li');
    newLi.textContent = newInputValue;
    target.removeChild(newInput);
    target.textContent = newInputValue;
  };
};

btnAddDel[0].addEventListener('click', addLi); 
myInput.addEventListener('keydown', enterPress);
btnAddDel[1].addEventListener('click',...