сохранить в localsrorage и вывести данные на странице при перезагрузке.
<!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, 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" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr 2" crossorigin="anonymous"> <script defer src="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 class="nav-link" href="index.html">Мои дела</a> <a class="nav-link" href="dad.html">Дела папы</a> <a class="nav-link" href="mom.html">Дела мамы</a> </nav> </div> <div id="todo-app" class="container"></div> </body> </html> script function createAppTitle(title) { let appTitle = document.createElement('h2'); appTitle.innerHTML = title; return appTitle; }; function createTodoItemForm() { let form = document.createElement('form'); let buttonWrapper = document.createElement('div'); 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 = 'Добавить дело'; buttonWrapper.append(button); form.append(input); form.append(buttonWrapper); return { form, input, button, }; }; let input = document.createElement('input'); let button = document.createElement('button'); button.setAttribute('disabled', true); input.oninput = function() { if (input.value.length === '') { button.setAttribute('disabled', true); } else { button.removeAttribute('disabled'); } }; function createTodoList() { let list = document.createElement('ul'); list.classList.add('list-group'); return list; }; function createTodoItem(name) { let item = document.createElement('li'); let buttonGroupe = document.createElement('div') let doneButton = document.createElement('button'); let deleteButton = document.createElement('button'); item.classList.add('list-groupe-item', 'd-flex', 'justify-content-between', 'align-items-center', 'mb-3'); item.textContent = name; item.className.split(" ").indexOf("list-group-item-success") !== -1; buttonGroupe.classList.add('btn-group', 'btn-group-sm'); doneButton.classList.add('btn', 'btn-success') doneButton.textContent = 'Готово'; deleteButton.classList.add('btn', 'btn-danger') deleteButton.textContent = 'Удалить'; buttonGroupe.append(doneButton); buttonGroupe.append(deleteButton); item.append(buttonGroupe); return { item, doneButton, deleteButton, }; }; let todoArr = []; function createTodoApp(container, title = 'Список дел', todoArr) { let todoAppTitle = createAppTitle(title); let todoItemForm = createTodoItemForm(''); let todoList = createTodoList(''); container.append(todoAppTitle); container.append(todoItemForm.form); container.append(todoList); let localList = localStorage.getItem('todo'); if (localList !== '' && localList !== null) { localList = JSON.parse(localList); } todoItemForm.form.addEventListener('submit', function(event) { event.preventDefault(); button.setAttribute('disabled', true); 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); let newTodo = { name: todoItemForm.input.value, done: false }; todoArr.push(newTodo); localStorage.setItem('todo', JSON.stringify(todoArr)); todoItemForm.input.value = ''; }); } window.createTodoApp = createTodoApp; |
Serhey,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Часовой пояс GMT +3, время: 15:15. |