Прошу помощи в решение контрольного задания по приложению 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-элементов списка. Критерии оценки При работе приложения в браузере не должны возникать ошибки в консоли. Список дел должен сохраняться: при обновлении страницы сохранённый список должен отображаться на экране. |
Чувак, ты реально хочешь, чтобы мы полностью за тебя сделали твоё задание?
|
Я отправил задание которое не могу сам решить больше недели, человек хорошо разбирающийся в java script быстро справится с заданием. Думаю кто то да отклинется
|
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги. Для таких сообщений предназначен раздел форума "Работа". Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
Часовой пояс GMT +3, время: 13:16. |