Эта статья шаг за шагом проведет вас через создание простого списка дел с помощью JavaScript. Базовые манипуляции с DOM в Javascript, не больше и не меньше. Я не собираюсь учить вас CSS или сумасшедшим эффектам. Не стесняйтесь настраивать и опираться на эту основу, добавляя свои собственные творческие штрихи.

Наше приложение todo будет выглядеть так —

  1. Пользователь может вводить свои задачи динамически
  2. Они могут добавлять новые задачи
  3. Они могут удалять свои задачи

Вы собираетесь создать новую папку с именем Todo, создайте в ней 2 файла. Когда я скажу вам сделать 2 файла, пожалуйста, сделайте. Это даст вам ясность, поскольку вы новичок.

  1. Todo.html
  2. Тодо.js

напишите html-шаблон, введите его в разделе body. Когда я говорю «тип», я действительно имею в виду, что вы печатаете для лучшей практики.

<body>

    <main>
    <h1>Make your TO-DO LIST here!</h1>
    <textarea id="task" type="text" placeholder="enter your task here"></textarea>
    
    <ol id="todo"> 
    //tasks will show here  
     </ol>
   </main>

    <button id = "addbtn" type="submit">Add a task</button>
    <button id = "delbtn" type="submit">Delete a task</button>

     <script src="Todo.js"></script>

</body>

Некоторые важные моменты, которые следует запомнить:

  1. Поместите тег script тег в раздел body вашего HTML-кода, чтобы избежать распространенной ошибки. Если вы поместите его в раздел head, ваш сценарий Javascript будет выполнен до того, как браузер полностью создаст и проанализирует элементы DOM в <body>..
  2. Вы можете заменить тег <ol> на любой другой тег, это не так актуально. Мне нужен был упорядоченный список моих задач, поэтому я его использовал.

Теперь перейдем к Todo.js. Для начала мы начнем с выбора всех необходимых нам элементов, используя их соответствующие идентификаторы или имена классов.

const items = document.getElementById('todo');
const addBtn = document.getElementById('addbtn');
const delBtn = document.getElementById('delbtn');
const taskAdd = document.getElementById('task')

addBtn.addEventListener('click', function() {
    // Create a new list item element

    if(taskAdd.value != ''){
    const  list = document.createElement("li");
    list.innerText = task.value;
    list.classList.add('list')
  
    // Append the new list item to the items list
     items.appendChild(list);

//Erase the text input in textarea for new text
     taskAdd.value ="";
    }

  });

  delBtn.addEventListener('click', function() {

    const li = document.getElementsByClassName('list')[0]; 
    items.removeChild(li);
  });

Шаг 1 — Предварительно выберите все необходимые элементы.

Шаг 2. Чтобы использовать addEventListener, формат следующий

button.addEventListener('click' , function(){
console.log("hey");
})

«Клик» — это событие, и когда происходит событие щелчка, выполняется функция(). Помните, что эта функция запускается один раз, поэтому нам не нужно для нее имя, но если вы дадите ей имя, вы можете сделать это вот так.

button.addEventListener('click' , log{
})

function log(){
console.log("well m here now"):
}

Шаг 3. Создание элемента

Вы собираетесь создать элемент, это новый элемент, который еще не является частью dom. Вы можете присвоить ему значение, используя innerText/innerHtml (оба разные). Теперь нам нужно сделать его частью DOM. Как мы можем это сделать?

Мы можем добавить вновь созданный элемент к родительскому элементу или любому из элементов, уже находящихся в документе.

Шаг 4. Функция удаления (removeChild)

Используйте его, чтобы удалить прямой дочерний элемент элемента (точнее, тот, к которому вы добавили свои задачи). Ваши задачи будут удаляться одна за другой.

Кроме того, в коде мы позаботились о том, чтобы пользователь не мог вставлять пустые данные, то есть пустое поле задачи. Выясните, как это сделать.

Ставьте лайк и пишите комментарии, если было полезно!