Как сделать to do list на javascript

Узнайте, как создать список задач с помощью JavaScript и демонстрацией примера. Вы узнаете базовые принципы работы с to do list и получите инструкции по реализации.

To do list на JavaScript

В этой статье мы посмотрим, как создать To do list на JavaScript. Это простое приложение позволит нам добавлять и удалять задачи из списка, а также помечать их как выполненные.

Для начала мы создадим HTML-шаблон, в котором будет список задач и поле ввода для добавления новых задач.

<div id="app">
  <div class="todo-list">
    <h2>Задачи</h2>
    <ul>
      <li>Сделать покупки</li>
      <li>Сделать домашнюю работу</li>
      <li>Помыть машину</li>
    </ul>
  </div>
  <form>
    <input type="text" placeholder="Добавить новую задачу">
    <button>Добавить</button>
  </form>
</div>

Теперь, когда наш HTML-шаблон готов, мы можем добавить JavaScript для добавления и удаления задач из списка.

const app = document.getElementById('app');
const list = document.querySelector('.todo-list ul');
const form = document.querySelector('form');
const input = document.querySelector('input');

// Добавление элементов в список
form.addEventListener('submit', (e) => {
  e.preventDefault();
  let li = document.createElement('li');
  li.innerHTML = input.value;
  list.appendChild(li);
  input.value = '';
});

// Удаление элементов из списка
list.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.remove();
  }
});

Теперь мы можем добавлять и удалять задачи из нашего списка.

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

// Помечаем задачи как выполненные
list.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('checked');
  }
});

// Добавляем кнопку для очистки списка
const clearBtn = document.createElement('button');
clearBtn.innerHTML = 'Очистить список';
clearBtn.className = 'clear-btn';
app.appendChild(clearBtn);

// Очищаем список при нажатии на кнопку
clearBtn.addEventListener('click', () => {
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
});

Наше приложение To do list на JavaScript почти закончено. Давайте добавим немного стилей для более приятного отображения приложения.

// Добавляем стили
const styles = `
  body {
    font-family: sans-serif;
    background-color: #f5f5f5;
  }
  #app {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
  .todo-list {
    margin-bottom: 20px;
  }
  .todo-list h2 {
    margin: 0;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
  }
  .todo-list li {
    padding: 10px;
    margin: 0;
    list-style: none;
  }
  .todo-list li.checked {
    text-decoration: line-through;
  }
  form {
    display: flex;
  }
  form input {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  form button {
    padding: 10px;
    font-size: 16px;
    background-color: #4caf50;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
  }
  .clear-btn {
    margin-top: 10px;
    font-size: 16px;
    background-color: #f44336;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
  }
`;

const styleEl = document.createElement('style');
styleEl.innerHTML = styles;
document.head.appendChild(styleEl);

Теперь мы закончили работу над нашим приложением To do list на JavaScript. Надеюсь, что этот пример поможет вам в ваших проектах.