привет, помоги нубу
Добрый, знаю что задание простецкое но, я мозг сломал
To do list нужно добавить возможность удаленные задачи перемещать в отдельный список и восстанавливать их оттуда <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Список дел</title> <link rel="stylesheet" href="material-icons.css"> <link rel="stylesheet" href="main.css" </head> <body> <div id="root"> <div class="container"> <div class="tabs"> <div class="tab"> <input type="radio" id="tab1" name="tab-group" checked> <label for="tab1" class="tab-title">Добавить</label> <section class="tab-content"> <h3>Добавить дело</h3> <input id="new-task" type="text"> <button id="add">Добавить</button> </section> </div> <div class="tab"> <input type="radio" id="tab2" name="tab-group"> <label for="tab2" class="tab-title">Список дел</label> <section class="tab-content"> <h3>Список дел</h3> <ul id="unfinished-tasks"> </section> </div> <div class="tab"> <input type="radio" id="tab3" name="tab-group"> <label for="tab3" class="tab-title">Завершенные</label> <section class="tab-content"> </ul> <h3>Завершенные дела</h3> <ul id="finished-tasks"> </ul> </section> </div> <div class="tab"> <input type="radio" id="tab4" name="tab-group"> <label for="tab4" class="tab-title">Удаленные</label> <section class="tab-content"> </ul> <h3>Удаленные дела</h3> <ul id="rec-tasks"> </ul> </section> </div> </div> </div> </div> <script src="index.js"></script> </body> </html> var addButton = document.getElementById('add'); var inputTask = document.getElementById('new-task'); var unfinishedTasks = document.getElementById('unfinished-tasks'); var finishedTasks = document.getElementById('finished-tasks'); var recTasks = document.getElementById( 'rec-tasks'); function createNewElement(task, finished,) { var listItem = document.createElement('li'); var checkbox = document.createElement('button'); if(finished){ checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box</i>"; }else { checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>"; } var label = document.createElement('label'); label.innerText = task; var input = document.createElement('input'); input.type = "text"; var editButton = document.createElement('button'); editButton.className = "material-icons edit"; editButton.innerHTML = "<i class='material-icons'>edit</i>"; var deleteButton = document.createElement('button'); deleteButton.className = "material-icons delete"; deleteButton.innerHTML = "<i class='material-icons'>delete</i>"; listItem.appendChild(checkbox); listItem.appendChild(label); listItem.appendChild(input); listItem.appendChild(deleteButton); listItem.appendChild(editButton); return listItem; } function addTask() { if (inputTask.value) { var listItem = createNewElement(inputTask.value, false); unfinishedTasks.appendChild(listItem); bindTaskEvents(listItem, finishTask) inputTask.value = ""; } save(); } addButton.onclick = addTask; function deleteTask() { var listItem = this.parentNode; var ul = listItem.parentNode; ul.removeChild(listItem); save(); } function editTask() { console.log(2); var editButton = this; var listItem = this.parentNode; var label = listItem.querySelector('label'); var input = listItem.querySelector('input[type=text]'); var containsClass = listItem.classList.contains('editMode'); if (containsClass) { label.innerText = input.value; editButton.className = "material-icons edit"; editButton.innerHTML = "<i class='material-icons'>edit</i>"; save(); } else { input.value = label.innerText; editButton.className = "material-icons save"; editButton.innerHTML = "<i class='material-icons'>save</i>"; } listItem.classList.toggle('editMode'); } function finishTask() { var listItem = this.parentNode; var checkbox = listItem.querySelector('button.checkbox'); checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box</i>"; finishedTasks.appendChild(listItem); bindTaskEvents(listItem, unfinishTask); save(); } function unfinishTask() { var listItem = this.parentNode; var checkbox = listItem.querySelector('button.checkbox'); checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>"; unfinishedTasks.appendChild(listItem); bindTaskEvents(listItem, finishTask) save(); } function bindTaskEvents(listItem, checkboxEvent) { var checkbox = listItem.querySelector('button.checkbox'); var editButton = listItem.querySelector('button.edit'); var deleteButton = listItem.querySelector('button.delete'); checkbox.onclick = checkboxEvent; editButton.onclick = editTask; deleteButton.onclick = deleteTask; } function save() { var unfinishedTasksArr = []; for (var i = 0; i < unfinishedTasks.children.length; i++) { unfinishedTasksArr.push(unfinishedTasks.children[i].getElementsByTagName('label')[0].innerText); } var finishedTasksArr = []; for (var i = 0; i < finishedTasks.children.length; i++) { finishedTasksArr.push(finishedTasks.children[i].getElementsByTagName('label')[0].innerText); } localStorage.removeItem('todo'); localStorage.setItem('todo', JSON.stringify({ unfinishedTasks: unfinishedTasksArr, finishedTasks: finishedTasksArr })); } function load(){ return JSON.parse(localStorage.getItem('todo')); } var data=load(); for(var i=0; i<data.unfinishedTasks.length;i++){ var listItem=createNewElement(data.unfinishedTasks[i], false); unfinishedTasks.appendChild(listItem); bindTaskEvents(listItem, finishTask); } for(var i=0; i<data.finishedTasks.length; i++){ var listItem=createNewElement(data.finishedTasks[i], true); finishedTasks.appendChild(listItem); bindTaskEvents(listItem, unfinishTask); } |
cheysler80,
может в структуре данных предусмотреть параметр del и фильтровать элементы с del == true в отдельную таблицу. на всякий случай пример иной организации To Do List |
cheysler80,
как-то так, особо париться не стал, если нужно сам переделай в голый жс. По-моему выглядит оверинжинирингово, я бы всё проще и топорнее сделал. Хотя я сам тот ещё кодер:haha: А вообще рони по делу сказал, но мне лень был так мутить <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Список дел</title> <link rel="stylesheet" href="material-icons.css"> <link rel="stylesheet" href="main.css" </head> <body> <div id="root"> <div class="container"> <div class="tabs"> <div class="tab"> <input type="radio" id="tab1" name="tab-group" checked> <label for="tab1" class="tab-title">Добавить</label> <section class="tab-content"> <h3>Добавить дело</h3> <input id="new-task" type="text"> <button id="add">Добавить</button> </section> </div> <div class="tab"> <input type="radio" id="tab2" name="tab-group"> <label for="tab2" class="tab-title">Список дел</label> <section class="tab-content"> <h3>Список дел</h3> <ul id="unfinished-tasks"> </section> </div> <div class="tab"> <input type="radio" id="tab3" name="tab-group"> <label for="tab3" class="tab-title">Завершенные</label> <section class="tab-content"> </ul> <h3>Завершенные дела</h3> <ul id="finished-tasks"> </ul> </section> </div> <div class="tab"> <input type="radio" id="tab4" name="tab-group"> <label for="tab4" class="tab-title">Удаленные</label> <section class="tab-content"> </ul> <h3>Удаленные дела</h3> <ul id="rec-tasks"> </ul> </section> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> cl = console.log; var addButton = document.getElementById('add'); var inputTask = document.getElementById('new-task'); var unfinishedTasks = document.getElementById('unfinished-tasks'); var finishedTasks = document.getElementById('finished-tasks'); var recTasks = document.getElementById( 'rec-tasks'); function createNewElementD(task, finished,) { var listItem = document.createElement('li'); var checkbox = document.createElement('button'); if(finished){ checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box</i>"; }else { checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>"; } var label = document.createElement('label'); label.innerText = task; var input = document.createElement('input'); input.type = "text"; var editButton = document.createElement('button'); editButton.className = "material-icons edit"; editButton.innerHTML = "<i class='material-icons'>edit</i>"; var deleteButton = document.createElement('button'); deleteButton.className = "material-icons deleteF"; deleteButton.innerHTML = "<i class='material-icons'>delete</i>"; listItem.appendChild(checkbox); listItem.appendChild(label); listItem.appendChild(input); listItem.appendChild(deleteButton); listItem.appendChild(editButton); return listItem; } function createNewElement(task, finished,) { var listItem = document.createElement('li'); var checkbox = document.createElement('button'); if(finished){ checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box</i>"; }else { checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>"; } var label = document.createElement('label'); label.innerText = task; var input = document.createElement('input'); input.type = "text"; var editButton = document.createElement('button'); editButton.className = "material-icons edit"; editButton.innerHTML = "<i class='material-icons'>edit</i>"; var deleteButton = document.createElement('button'); deleteButton.className = "material-icons delete"; deleteButton.innerHTML = "<i class='material-icons'>delete</i>"; listItem.appendChild(checkbox); listItem.appendChild(label); listItem.appendChild(input); listItem.appendChild(deleteButton); listItem.appendChild(editButton); return listItem; } function addTask() { if (inputTask.value) { var listItem = createNewElement(inputTask.value, false); unfinishedTasks.appendChild(listItem); bindTaskEvents(listItem, finishTask) inputTask.value = ""; } save(); } addButton.onclick = addTask; function savedel(){ var deleted = []; $.each($('#rec-tasks').find('label'), function(){ deleted.push($(this).html()); }); localStorage.setItem('todo-del', JSON.stringify(deleted)); } function deleteTask() { var listItem = this.parentNode; var ul = listItem.parentNode; var $this = $(this); var l = $this.parent().find('label').html(); var deleted = JSON.parse(localStorage.getItem('todo-del')); if(!deleted) deleted = []; deleted.push(l); localStorage.setItem('todo-del', JSON.stringify(deleted)); ul.removeChild(listItem); loaddel(); save(); } function editTask() { console.log(2); var editButton = this; var listItem = this.parentNode; var label = listItem.querySelector('label'); var input = listItem.querySelector('input[type=text]'); var containsClass = listItem.classList.contains('editMode'); if (containsClass) { label.innerText = input.value; editButton.className = "material-icons edit"; editButton.innerHTML = "<i class='material-icons'>edit</i>"; save(); savedel(); } else { input.value = label.innerText; editButton.className = "material-icons save"; editButton.innerHTML = "<i class='material-icons'>save</i>"; } listItem.classList.toggle('editMode'); } function finishTask() { var listItem = this.parentNode; var checkbox = listItem.querySelector('button.checkbox'); checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box</i>"; finishedTasks.appendChild(listItem); bindTaskEvents(listItem, unfinishTask); save(); savedel(); } function unfinishTask() { var listItem = this.parentNode; var checkbox = listItem.querySelector('button.checkbox'); checkbox.className = "material-icons checkbox"; checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>"; unfinishedTasks.appendChild(listItem); bindTaskEvents(listItem, finishTask) save(); } function bindTaskEvents(listItem, checkboxEvent) { var checkbox = listItem.querySelector('button.checkbox'); var editButton = listItem.querySelector('button.edit'); var deleteButton = listItem.querySelector('button.delete'); checkbox.onclick = checkboxEvent; editButton.onclick = editTask; if(deleteButton) deleteButton.onclick = deleteTask; } function save() { var unfinishedTasksArr = []; for (var i = 0; i < unfinishedTasks.children.length; i++) { unfinishedTasksArr.push(unfinishedTasks.children[i].getElementsByTagName('label')[0].innerText); } var finishedTasksArr = []; for (var i = 0; i < finishedTasks.children.length; i++) { finishedTasksArr.push(finishedTasks.children[i].getElementsByTagName('label')[0].innerText); } localStorage.removeItem('todo'); localStorage.setItem('todo', JSON.stringify({ unfinishedTasks: unfinishedTasksArr, finishedTasks: finishedTasksArr })); } function load(){ return JSON.parse(localStorage.getItem('todo')); } var data=load(); function loaddel(){ var deleted = JSON.parse(localStorage.getItem('todo-del')); if(!deleted) deleted = []; $('#rec-tasks').html(''); for(var i=0; i<deleted.length;i++){ var listItem=createNewElementD(deleted[i], false); $('#rec-tasks')[0].appendChild(listItem); bindTaskEvents(listItem, finishTask); } } $('body').on('click', '.deleteF', function(){ var $this = $(this); var $listpar = $this.parent().parent(); $this.parent().remove(); var deleted = []; $.each($listpar.find('label'), function(){ deleted.push($(this).html()); }); localStorage.setItem('todo-del', JSON.stringify(deleted)); }); loaddel(); for(var i=0; i<data.unfinishedTasks.length;i++){ var listItem=createNewElement(data.unfinishedTasks[i], false); unfinishedTasks.appendChild(listItem); bindTaskEvents(listItem, finishTask); } for(var i=0; i<data.finishedTasks.length; i++){ var listItem=createNewElement(data.finishedTasks[i], true); finishedTasks.appendChild(listItem); bindTaskEvents(listItem, unfinishTask); } </script> </body> </html> |
FreeStyler,
можно добавить run в макет [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
рони,
лень писать, почему его не добавили в панель кодов, как те же [JS] [html] [CSS] ? -__- |
Часовой пояс GMT +3, время: 19:57. |