1

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>

1 ответ 1

0

Но сохранение checkbox, функционал выше не работает. Подскажите, что делать. А то я уже не не понимаю, чего оно от меня хочет :) Заранее спасибо

проблема была у вас в том, что тут if (item.todo === valueLabel) всегда был false и внутренний код этого цикла никогда не выполнялся. Попробуйте вывести, какие строки пытается сравнить этот if.

Решение на самом деле в одну строчку: item.todo === valueLabel.trim()

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.