Напишите простое ToDo App — список задач

[melnikov24]

Напишите простое ToDo App — список задач с возможностью добавления новых пунктов и смены статуса готовности каждого пункта (сделано/не сделано).

Страница должна состоять из:

1. самого списка задач (нумерованный список <ol>, пункты-задачи — <li>)

2. поля для ввода названия новой задачи (<input type=“text”)

3. кнопки «Добавить»

4. и что бы задачи не повторялись

При нажатии на кнопку «Добавить» задача добавляется в конец списка в качестве нового пункта <li>.

Если название задачи не введено, то появляется ошибка (alert или другая реализация) с просьбой заполнить поле.

[рони]

melnikov24,
в раздел работа или начинайте самостоятельно!!!
подсказка: не вы первый с этой задачей, ищите по форуму.

[SuperZen]

https://www.w3schools.com/howto/howto_js_todolist.asp

) или авторский варик сделанный "на коленке":

<ol id="todoView"></ol>
<div>
  Название: <input type="text" id="todo" value="" />
  <input type="button" id="add" value="Добавить" />
</div>
<script>
  var todos = []
  var todo = document.getElementById('todo')
  var todoView = document.getElementById('todoView')

  document.getElementById('add').addEventListener('click', function () {
    if (todos.filter(t => t.title === todo.value).length > 0) {
      alert('Такой todo уже есть')
    } else if (todo.value.length === 0) {
      alert('Название не может быть пустым')
    } else {
      var id = todos.length + 1
      todos.push({
        id,
        title: todo.value,
        complete: false
      })

      var li = document.createElement('li')
      var span = document.createElement('span')
      span.innerText = todo.value
      span.dataset.todo = id

      var checkbox = document.createElement('input')
      checkbox.type = 'checkbox'
      checkbox.todo = id

      checkbox.addEventListener('change', function (e) {
        var todo = todos.forEach(t => {
          if (t.id === e.target.todo) {
            var span = document.querySelector(`span[data-todo='${e.target.todo}']`)
            t.complete = !t.complete
            span && t.complete ? span.style.textDecoration = 'line-through' : span.style.textDecoration = 'none'
          }
        })
      })

      li.appendChild(checkbox)
      li.appendChild(span)

      todoView.appendChild(li)
      todo.value = ''
    }
  })
</script>

[countervector]

Здравствуйте, а как редактировать задачи ? Нужна помощь. Нужно чтобы напротив каждой стояло редактировать.