[TomWalbridge]

Привет всем! Доработайте приложение TODO, добавив к нему следующее:

Сделайте так, чтобы у кнопки в форме устанавливался атрибут disabled, когда поле ввода пустое. Не забудьте, что disabled должен устанавливаться и при загрузке приложения, так как изначально поле тоже пустое.
Добавьте к функции createTodoApp третий опциональный аргумент с массивом дел, которые должны быть в списке сразу после загрузки приложения. Каждое дело должно быть объектом вида { name: 'Название дела', done: false/true }. Измените код функции таким образом, чтобы список дел сразу добавлялся в DOM.
У меня получилось добавить в localstorage данные, но не получается реализовать появление на странице после перезагрузки этого массива из localstorage
Заранее всем спасибо за ответы!

(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');


        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 = 'Список дел', arayCases) {

        let todoAppTitle = createAppTitle(title);
        let todoItemForm = createTodoItemForm();
        let todoList = CreateTodoList();
        let tasks;
        !localStorage.tasks ? tasks = [] : tasks = JSON.parse(localStorage.getItem('tasks'))

        container.append(todoAppTitle);
        container.append(todoItemForm.form);
        container.append(todoList);


        function Task1(description) {
            this.description = description;
            this.completed = false;
        }
        const createTemplate = (Task1, index) => {
            return 
        }
        const fillHtmlList = () => {
            todoItemForm.innerHTML = '';
            if (tasks, length > 0) {
                tasks.forEach((item, index) => {
                    todoItemForm.innerHTML += createTemplate(item, index)
                })
            }
        }
        fillHtmlList()
        const updateLocal = () => {
            localStorage.setItem('task', JSON.stringify(tasks));
        }
        todoItemForm.form.addEventListener('submit', () => {
            tasks.push(new Task1(todoItemForm.input.value));
            updateLocal();
        })

        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('are your sure?') && todoItem.item.remove) {
                    todoItem.item.remove();
                }
            });
            todoList.append(todoItem.item);
            todoItemForm.input.value = '';
        })
    }
    window.createTodoApp = createTodoApp;
})();