Привет всем, я собираюсь объяснить, как написать простое веб-приложение списка дел с помощью JavaScript, прежде чем давайте разберемся, почему мы используем JavaScript, потому что то же самое можно реализовать с помощью HTML и CSS.

Если бы мы использовали только HTML и CSS, мы бы не смогли создать новый элемент списка, вместо этого его пришлось бы включать в сам код. JavaScript позволяет нам динамически создавать новые элементы списка, он расширяет функциональность нашего веб-сайта/веб-приложения.

Доступ ко всему объясненному коду можно получить по ссылке на мой репозиторий Github. Посмотреть окончательный проект здесь.

Создайте поле ввода и неупорядоченный список, в который элементы добавляются динамически с помощью JavaScript.

<section>
            <input type="text"  id="input-box" placeholder="Enter new task..">
            <button id="add-item">Add List Item</button>
            <ui id="todo-list">
                
            </ui>
</section>

Когда какой-либо текст вводится в поле ввода, мы временно сохраняем его в переменной (в данном случае — currentInputValue).

Метод getElementById(‹id name›) позволяет выбрать элемент HTML по его идентификатору.

addEventListener(‹имя события›,‹функция›) – это метод, который делает то, что определено в функции для события.

var inputText=document.getElementById("input-box");
//intializing a variable to store input value
currentInputValue='';
inputText.addEventListener('input',function get(e){
    currentInputValue=e.target.value;
})

После нажатия кнопки «добавить элемент списка» мы хотим, чтобы элемент был добавлен в список дел, для этого мы создаем элемент HTML «li» и добавляем текст, который мы получили из поля ввода, наконец, мы добавляем изображение корзина вместе с id «закрыть», чтобы удалить элемент списка (мы подробно увидим, как он удаляется в следующей части). мы даем этот элемент с идентификатором item+ (количество элементов списка, например: item1 для первого элемента списка).

пожалуйста, просмотрите комментарии, чтобы лучше понять каждую строку кода.

var btnAdd=document.getElementById("add-item");
btnAdd.addEventListener('click',addListItem);
function addListItem(){
    if(currentInputValue !== undefined && currentInputValue!== null && currentInputValue !== ''){
        var newElement = document.createElement('li');
        var childElementCount=listItems.childElementCount;
        var ElementContent = document.createTextNode(currentInputValue);
        var deleteIcon = document.createElement("img");
        deleteIcon.className = "close";
        deleteIcon.src="assests/bin.png"

        newElement.appendChild(ElementContent);
        newElement.appendChild (deleteIcon);
        newElement.id=("item"+(listItems.childElementCount+1));
        listItems.appendChild(newElement);

        

        inputText.value='';
        currentInputValue='';

        
    }
    else{
        alert('Enter valid item');
    }
    
}

Элемент также можно добавить в список, нажав кнопку ввода. Для этой цели используется следующий код.

inputText.addEventListener('keyup',function(e){
    if(e.key === 'Enter'){
        addListItem();
    }
})

Чтобы удалить элемент списка из списка при нажатии, мы распознаем элемент списка, который необходимо удалить, проверяя, имеет ли выбранный элемент идентификатор «закрыть», который мы ранее присвоили изображению значка корзины. Эта функция полностью удаляет родительский узел (тег li + вводимый текст) из кода HTML.

var selectDelete=document.getElementById("todo-list");
selectDelete.addEventListener('click',function (e){
    if(e.target.className =="close"){
       e.target.parentNode.remove();
    }
})

Если вы дошли до этой части, спасибо, что прочитали мою статью. Вы можете связаться со мной на linkedin.