JS Сохранение через LocalStorage TODO

Question

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

(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 = 'список дел', arrayCases) {
        
        let todoAppTitle = createAppTitle(title);
        let todoItemForm = createTodoItemForm();
        let todoList = createTodoList();

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

        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.inpute.value;
        })
    }



    window.createTodoApp = createTodoApp;
})();



// function createTodoApp(container, title = 'список дел') {
//     let todoAppTitle = createAppTitle(title);
//     let todoItemForm = createTodoItemForm();
//     let todoList = createTodoList();
//     container.append(todoAppTitle);
//     container.append(todoItemForm.form);
//     container.append(todoList);

//     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.inpute.value;
//     })
// }

<!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, shrink-to-fit=no">
    <title>TODO</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" 
    crossorigin="anonymous">
    
    <script defer src="/js/todo-app.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            createTodoApp(document.getElementById('todo-app'), 'мои дела');
        });
    </script>
</head>
<body>
    <div class="container mb-5">
        <nav class="nav">
            <a href="index.html" class="nav-link">Мои дела</a>
            <a href="dad.html" class="nav-link">Дела папы</a>
         </nav>
    </div>
    <div id="todo-app" class="container"></div>
</body>
</html>

БЛОГ НА HUSL

JS Сохранение через LocalStorage TODO

Ответы (0 шт):