Показать сообщение отдельно
  #1 (permalink)  
Старый 17.06.2023, 17:21
Новичок на форуме
Отправить личное сообщение для БУКА323 Посмотреть профиль Найти все сообщения от БУКА323
 
Регистрация: 17.06.2023
Сообщений: 2

Прошу помощи в решение контрольного задания по приложению TODO
( 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 wrapperButton = document.createElement('div');
        let button = document.createElement('button');

        input.type = 'text';
        input.placeholder = 'Введите название нового дела';
        form.classList.add('input-group', 'mb-3');
        input.classList.add('form-control');
        wrapperButton.classList.add('input-group-append');
        button.classList.add('btn', 'btn-primary');
        button.disabled = true;
        button.textContent = 'Добавить';
        form.append(input);
        form.append(wrapperButton);
        wrapperButton.append(button);
        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 () {
        ul = document.createElement('ul');
        ul.classList.add('list-group');
        return ul;
    }


    // Создаем и возвращаем элементы для создания списка дел
    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) {
        
        let TodoAppTitle = createAppTitle (title);
        let TodoItemForm = createTodoItemForm ();
        let todoList = createTodoList ();
        
        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 object = {
                name: TodoItemForm.input.value,
                done: false,
            }

            let {name, done} = object

            let todoItem = createTodoItem(JSON.stringify(object));
            todoItem.doneButton.addEventListener('click', function() {
            todoItem.item.classList.toggle('list-group-item-success');
            if (todoItem.item.classList.contains('list-group-item-success')) {
                console.log('ПРивет')
            } else {object.done = 'false';}

            });
            todoItem.deleteButton.addEventListener('click', function() {
                if (confirm('Вы уверены?')) {
                    todoItem.item.remove();
                }
            });

            todoList.append(todoItem.item);
            TodoItemForm.input.value = '';
        });
    }
    window.createTodoApp = createTodoApp;



}) ();


Этап 1
Измените функцию создания дела, чтобы она принимала и корректно обрабатывала объект { name, done }, а не просто название. Это пригодится для преобразования объекта дела в DOM-элемент.(Этот пункт мне сделать удалось, прошу подсказать правильно ли?)

Этап 2
Сделайте так, чтобы у кнопки в форме устанавливался атрибут disabled, когда поле ввода пустое. Не забудьте, что disabled должен устанавливаться и при загрузке приложения, так как изначально поле тоже пустое. (Данный пункт я так же выполнил, прошу проверить правильность выполнения)


Этап 3
Каждое созданное дело должно храниться в массиве дел в виде объекта. При создании нового дела в массив должен добавляться новый объект с тремя параметрами: name — название дела, done — статус дела, который может принимать значения true или false, и id — уникальный числовой параметр.

Чтобы сгенерировать id, вы можете выбрать один из двух способов:

Для каждого нового объекта (дела) можно генерировать id с произвольным, рандомным числом.
Написать функцию, которая будет искать максимальный id в массиве дел и прибавлять к максимальному id число 1.

Пример массива с объектами дел
[

{id: 1, name: ‘Купить хлеб', done: false},

{id: 2, name: ‘Покормить кота’, done: true},

{id: 3, name: ‘Сделать задание по JS’, done: true}

]



Этап 4
Сделайте так, чтобы при нажатии на кнопку «Удалить» удалялся не только DOM-элемент li из DOM-дерева, но и объект в массиве дел. Для решения этой задачи при клике на кнопку «Удалить» необходимо найти в массиве дел объект с таким же id и удалить его. Искать элементы в массиве вы уже умеете.

Так же поступите и с кнопкой изменения статуса. При клике на неё найдите в массиве объектов нужный объект и измените параметр done на противоположный.


Этап 5
Создайте функцию сохранения массива дел в localStorage. Вызывайте функцию сохранения каждый раз, когда вы изменяете список дел, а именно: добавляете новое дело, удаляете дело или изменяете статус.

Перед выполнением этого этапа рекомендуем почитать материалы:

JSON.stringify
JSON.parse
Window.localStorage
Учтите, что список дел разный для каждой страницы, поэтому нужно использовать разные ключи в localStorage. Ключ можно передавать отдельным параметром в createTodoApp.

Добавьте в функцию createTodoApp() третий параметр listName, который поможет вам создать собственный список для каждого пользователя.

Пример запуска приложения на странице пользователя:

document.addEventListener('DOMContentLoaded', function(){

createTodoApp(document.getElementById('todo-app'), 'Мои дела', 'my');

});



Этап 6
Сейчас ваше приложение может сохранять список дел. На данном этапе нужно сделать так, чтобы при запуске приложения в функции createTodoApp() была выполнена проверка на наличие данных в localStorage. Если в localStorage есть данные, то их нужно расшифровать и полученный массив отрисовать на экране в виде DOM-элементов списка.


Критерии оценки
При работе приложения в браузере не должны возникать ошибки в консоли.

Список дел должен сохраняться: при обновлении страницы сохранённый список должен отображаться на экране.
Ответить с цитированием