Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2018, 21:11
Интересующийся
Отправить личное сообщение для melnikov24 Посмотреть профиль Найти все сообщения от melnikov24
 
Регистрация: 24.08.2018
Сообщений: 12

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

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

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

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

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

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

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

Если название задачи не введено, то появляется ошибка (alert или другая реализация) с просьбой заполнить поле.
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2018, 21:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

melnikov24,
в раздел работа или начинайте самостоятельно!!!
подсказка: не вы первый с этой задачей, ищите по форуму.
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2018, 22:29
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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>
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2020, 05:29
Новичок на форуме
Отправить личное сообщение для countervector Посмотреть профиль Найти все сообщения от countervector
 
Регистрация: 12.02.2020
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Список задач desergik Angular.js 6 18.03.2015 08:28