cheysler80,
как-то так, особо париться не стал, если нужно сам переделай в голый жс. По-моему выглядит оверинжинирингово, я бы всё проще и топорнее сделал.
Хотя я сам тот ещё кодер
А вообще
рони по делу сказал, но мне лень был так мутить
<!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>
