To do list Программа должна работать так: пользователь нажимает на checkbox (задача выполнена) и даже при обновлении или закрытии браузера отмеченная задача должна сохраняться. И еще такой функционал - при зажатии CTRL и нажатии ПКМ по задаче, она выделяется красным (выделяет ее важность), если просто ПКМ, то удаляться. Но сохранение checkbox, функционал выше не работает. Подскажите, что делать. А то я уже не не понимаю, чего оно от меня хочет :) Заранее спасибо
let addMessage = document.querySelector('.message'),
addButton = document.querySelector('.add'),
todo = document.querySelector('.todo')
let todoList = [];
if (localStorage.getItem('todo')) {
todoList = JSON.parse(localStorage.getItem('todo'));
displayMessages();
}
addButton.addEventListener('click', function() {
if (!addMessage.value) return;
let newTodo = {
todo: addMessage.value,
checked: false,
important: false
};
todoList.push(newTodo);
displayMessages();
localStorage.setItem('todo', JSON.stringify(todoList));
addMessage.value = '';
});
function displayMessages() {
let displayMessage = '';
if (todoList.length === 0) todo.innerHTML = '';
todoList.forEach(function(item, i) {
displayMessage +=
`
<li>
<input type='checkbox' id='item_${i}' ${item.checked ? 'checked' : ''}>
<label for='item_${i}' class="${item.important ? 'important' : ''}">${item.todo}</lable>
</li>
`;
todo.innerHTML = displayMessage;
});
}
todo.addEventListener('change', function(event) {
let valueLabel = todo.querySelector('[for=' + event.target.getAttribute('id') + ']').innerHTML;
todoList.forEach(function(item) {
if (item.todo === valueLabel) {
item.checked = !item.checked;
localStorage.setItem('todo', JSON.stringify(todoList));
}
});
});
todo.addEventListener('contextmenu', function(event) {
event.preventDefault();
todoList.forEach(function(item, i) {
if (item.todo === event.target.innerHTML) {
if (event.ctrlKey || event.metaKey) {
todoList.splice(i, 1);
}
} else {
item.important = !item.important;
}
displayMessages();
localStorage.setItem('todo', JSON.stringify(todoList))
});
});
body {
background-color: #FFD78A;
font-family: sans-serif;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.container {
margin: 0 auto;
padding-top: 50px;
}
.important {
font-weight: bold;
color: #A40E11;
}
.todo_list {
max-width: 400px;
display: block;
margin: 0 auto 40px;
background-color: #1BA39C;
padding: 30px;
border-radius: 10px;
-webkit-box-shadow: 0 2px 10px 0 #074b83;
box-shadow: 0 2px 10px 0 #074b83;
}
h1 {
text-align: center;
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 30px;
}
.create_new_todo {
text-align: center;
}
input[type=text] {
border-radius: 10px;
width: 376px;
padding: 10px;
}
button {
border-radius: 10px;
margin-top: 10px;
width: 400px;
padding: 10px;
cursor: pointer;
}
.todo {
padding-left: 0;
}
.todo li {
padding: 1em;
list-style-type: none;
}
.todo li:not(:last-child) {
border-bottom: 1px solid #000;
}
input[type=checkbox] {
opacity: 0;
position: absolute;
}
input[type=checkbox],
label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
input[type=checkbox]+label:before {
content: '';
background: #1BA39C;
border-radius: 5px;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
input[type=checkbox]:checked+label:before {
content: "";
display: inline-block;
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-radius: 0;
margin: 0 15px 5px 5px;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link href="style.css" rel="stylesheet">
<title>ToDo List</title>
</head>
<body>
<div class="container">
<div class="todo_list">
<h1>ToDo List</h1>
<div class="create_new_todo">
<input type="text" class="message" placeholder="Сходить в спортзал в 16:30">
<button class="add">Добавить</button>
</div>
<div class="wrapper">
<ul class="todo"></ul>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>