Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2021, 17:48
Новичок на форуме
Отправить личное сообщение для Paulsw01 Посмотреть профиль Найти все сообщения от Paulsw01
 
Регистрация: 02.07.2021
Сообщений: 7

Приложение todo app на javascript
Как добавить к функции createTodoApp третий опциональный аргумент с массивом дел, которые должны быть в списке сразу после загрузки приложения. Каждое дело должно быть объектом вида { name: 'Название дела', done: false/true }. При этом список дел сразу добавляется в DOM.

А так же чтобы при добавлении несколько дел и перезагрузки страницы всё выглядело так же, как и до перезагрузки.



<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script defer src="todo-app.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            createTodoApp(document.getElementById('todo-app'), 'Мои дела');
        })
    </script>
    <title>TODO</title>
</head>
<body>
 
    <div class="container mb-5">
        <nav class="nav">
            <a class="nav-link" href="index.html">Мои дела</a>
            <a class="nav-link" href="mom.html">Дела мамы</a>
            <a class="nav-link" href="dad.html">Дела папы</a>
        </nav>
    </div>
    
    <div id="todo-app" class="container"></div>
 
</body>
</html>


(function () {
  // Создаём и возвращаем заголовок приложения
  function createAppTitle(title) {
    let appTitle = document.createElement('h2');
    appTitle.innerHTML = title;
    return appTitle;
  }
 
  // Создаём и возвращаем форму для создания дела
  function createTodoItemForm() {
    let form = document.createElement('form');
    let input = document.createElement('input');
    let buttonWrapper = document.createElement('div');
    let button = document.createElement('button');
 
    form.classList.add('input-group', 'mb-3');
    input.classList.add('form-control');
    input.placeholder = 'Введите название нового дела';
    buttonWrapper.classList.add('input-group-append');
    button.classList.add('btn', 'btn-primary');
    button.textContent = 'Добавить дело';
    button.disabled = true;
 
    buttonWrapper.append(button);
    form.append(input);
    form.append(buttonWrapper);
 
    input.addEventListener('input', function (e) {
      e.preventDefault();
      if (input.value.length > 0) {
        button.disabled = false;
      } else if (input.value.length == 0) {
        button.disabled = true;
      }
    });
 
    return {
      form,
      input,
      button,
    };
  }
 
  // Создаём и возвращаем список элементов
  function createTodoList() {
    let list = document.createElement('ul');
    list.classList.add('list-group');
    return list;
  }
 
  function createTodoItem(name) {
    let item = document.createElement('li');
    // Кнопки помещаем в элемент, который красиво покажет их в одной группе
    let buttonGroup = document.createElement('div');
    let doneButton = document.createElement('button');
    let deleteButton = document.createElement('button');
 
    // Устанавливаем стили для элемента сиписка, а так же для размещения кнопок
    // в его правой части с помощью flex
    item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
    item.textContent = name;
 
    buttonGroup.classList.add('btn-group', 'btn-group-sm');
    doneButton.classList.add('btn', 'btn-success');
    doneButton.textContent = 'Готово';
    deleteButton.classList.add('btn', 'btn-danger');
    deleteButton.textContent = 'Удалить';
 
    // Вкладываем кнопки в отдельный элемент, чтобы они объединились в один блок
    buttonGroup.append(doneButton);
    buttonGroup.append(deleteButton);
    item.append(buttonGroup);
 
    // Приложению нужен доступ к самому элементу и кнопкам, чтобы обрабатывать события нажатия
    return {
      item,
      doneButton,
      deleteButton,
    };
  }
 
  function createTodoApp(container, title = 'Список дел', arrayCases) {
 
    let todoAppTitle = createAppTitle(title);
    let todoItemForm = createTodoItemForm();
    let todoList = createTodoList();
 
    // let arrayCases = [
    //   {name: 'Сходить в магазин', done: false},
    //   {name: 'Купить хлеб', done: false},
    // ]
 
    container.append(todoAppTitle);
    container.append(todoItemForm.form);
    container.append(todoList);
 
    // Браузер создаёт событие submit на форме по нажатию на Enter или на кнопку создания дела
    todoItemForm.form.addEventListener('submit', function (e) {
      // Эта строчка необходима, чтобы предотвратить стандартное действие браузера
      // В данном случае мы не хотим, чтобы страница перезагружалась при отправке формы
      e.preventDefault();
 
 
      // Игнорируем создание элемента, если пользователь ничего не ввел в поле
      if (!todoItemForm.input.value) {
        return;
      }
 
 
      let todoItem = createTodoItem(todoItemForm.input.value);
 
      // Добавляем обработчики на кнопку
      todoItem.doneButton.addEventListener('click', function () {
        todoItem.item.classList.toggle('list-group-item-success');
      });
      todoItem.deleteButton.addEventListener('click', function () {
        if (confirm('Вы уверены?')) {
          todoItem.item.remove();
        }
      });
 
      // Создаём и добавляем в список новое дело с названием из поля для ввода
      todoList.append(todoItem.item);
 
      // Обнуляем значение в поле, чтобы не пришлось стирать его вручную
      todoItemForm.input.value = '';
    });
  }
 
  window.createTodoApp = createTodoApp;
 
})();
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2021, 20:00
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TODO</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>

<div id="todo-app" class="container"></div>

<script>
(function() {
    function index(element) {
        return Array.from(element.parentNode.children).indexOf(element);
    }

    function storage(name, value) {
        return (value) ? localStorage.setItem(name, JSON.stringify(value)) : JSON.parse(localStorage.getItem(name)) || [];
    }

    function createTodo(container, title = 'Список дел', defaultItems = [], sessionId = 'todo.html') {
        let session = [];

        let header = document.createElement('h2');
            header.textContent = title;

        let form = document.createElement('form');
            form.classList.add('input-group', 'mb-3');

        let formInput = document.createElement('input');
            formInput.classList.add('form-control');
            formInput.placeholder = 'Введите название нового дела';
            formInput.addEventListener('input', function() { formButton.disabled = this.value == '' });

        let formButtonGroup = document.createElement('div');
            formButtonGroup.classList.add('input-group-append');

        let formButton = document.createElement('button');
            formButton.classList.add('btn', 'btn-primary');
            formButton.textContent = 'Добавить дело';
            formButton.disabled = true;

        let list = document.createElement('ul');
            list.classList.add('list-group');

            formButtonGroup.append(formButton);
            form.append(formInput, formButtonGroup);
            container.append(header, form, list);

        function createItem(name, done) {
            let item = document.createElement('li');
                item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
                item.textContent = name;

            let itemButtonGroup = document.createElement('div');
                itemButtonGroup.classList.add('btn-group', 'btn-group-sm');

            let itemDoneButton = document.createElement('button');
                itemDoneButton.classList.add('btn', 'btn-success');
                itemDoneButton.textContent = 'Готово';
                itemDoneButton.addEventListener('click', function() {
                    let done = item.classList.toggle('list-group-item-success');

                    // storage setter: change item
                    session[index(item)].done = done;
                    storage(sessionId, session);
                });

            let itemDeleteButton = document.createElement('button');
                itemDeleteButton.classList.add('btn', 'btn-danger');
                itemDeleteButton.textContent = 'Удалить';
                itemDeleteButton.addEventListener('click', function() {
                    if (!confirm('Вы уверены?')) return;

                    // storage setter: delete item
                    session.splice(index(item), 1);
                    storage(sessionId, session);

                    item.remove();
                });

                itemButtonGroup.append(itemDoneButton, itemDeleteButton);
                item.append(itemButtonGroup);
                list.append(item);

            // storage setter: create item
            session.push({ name, done });
            storage(sessionId, session);

            if (done) itemDoneButton.click();
        }

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (formInput.value == '') return;
            createItem(formInput.value);
            formInput.value = '';
        });

        // storage getter: return items
        let storageItems = storage(sessionId);

        // restore session
        let sessionItems = (storageItems.length == 0) ? defaultItems : storageItems;
        for (let item of sessionItems) createItem(item.name, item.done);
    }

    window.createTodo = createTodo;
})();
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    createTodo(document.getElementById('todo-app'), 'Мои дела', [
        { name: 'Дело 1', done: false },
        { name: 'Дело 2', done: true },
    ], 'index.html');
});
</script>

</body>
</html>

Последний раз редактировалось Rise, 14.07.2021 в 20:09.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Напишите простое ToDo App — список задач melnikov24 Общие вопросы Javascript 3 12.02.2020 05:29
Пропало приложение JavaScript. farfeld Общие вопросы Javascript 1 05.05.2019 20:31
приложение на JavaScript с помощью которого можно подключаться к чужим сайтам texpomru13 jQuery 0 11.12.2015 00:01
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34