Помогите решить задачу!
 

Привет всем! Доработайте приложение 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;
})();

TomWalbridge,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

TomWalbridge,
сделано вывод данных, не сделано удаление )))

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
</head>
<body>
    <script>
        (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 = JSON.parse(localStorage.getItem('tasks')) || []) {
                let todoAppTitle = createAppTitle(title);
                let todoItemForm = createTodoItemForm();
                let todoList = CreateTodoList();
                let tasks = arayCases;
                console.log(localStorage.getItem('tasks'))
                container.append(todoAppTitle);
                container.append(todoItemForm.form);
                container.append(todoList);
                function Task1(description) {
                    this.name = description;
                    this.done = false;
                }
                const createTemplate = (Task1, index) => {
                    return
                }
                const fillHtmlList = () => {
                    tasks.forEach((item, index) => {
                        todoList.append(createTodoItem(item.name).item)
                    })
                }
                fillHtmlList()
                const updateLocal = () => {
                    localStorage.setItem('tasks', 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;
        })();
        createTodoApp(document.body, 'Список дел')
    </script>
</body>
</html>