1 Тема від Laughter16

  • Laughter16
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 12.08.2021
  • Повідомлень: 1
    • Репутація: 0

Тема: Localstorage

Підкажіть, будь ласка, як зробити так, щоб зберігалась сторінка при оновленні


<!DOCTYPE html>
<html lang="ru">
<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, shrink-to-fit=no">
    <title>TODO</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script defer src="todo-app.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        createTodoApp(document.getElementById('todo-app'), 'Мои дела');
      });
    </script>
</head>
<body>
  <div class="container mb-5">
    <nav class="nav">
      <a class="nav-link" href="index.html">Мои дела</a>
      <a class="nav-link" href="dad.html">Дела папы</a>
      <a class="nav-link" href="mom.html">Дела мамы</a>
    </nav>
  </div>
  <div id="todo-app" class="container"></div>
</body>
</html>






  function createAppTitle(title) {
    let appTitle = document.createElement('h2');
    appTitle.innerHTML = title;
    return appTitle;
};

function createTodoItemForm() {
  let form = document.createElement('form');
  let buttonWrapper = document.createElement('div');


  form.classList.add('input-group', 'mb-3');
  input.classList.add('form-control');
  input.placeholder = "Введите название нового дела";
  buttonWrapper.classList.add('input-group-append');
  button.classList.add('btn', 'btn-primary');
  button.textContent = 'Добавить дело';

  buttonWrapper.append(button);
  form.append(input);
  form.append(buttonWrapper);

  return {
      form,
      input,
      button,
  };
};

let input = document.createElement('input');
let button = document.createElement('button');

button.setAttribute('disabled', true);

input.oninput = function() {
  if (input.value.length === '') {
    button.setAttribute('disabled', true);
  } else {
    button.removeAttribute('disabled');
  }
};

function createTodoList() {
  let list = document.createElement('ul');
  list.classList.add('list-group');
  return list;
};

function createTodoItem(name) {
  let item = document.createElement('li');
  let buttonGroupe = document.createElement('div')
  let doneButton = document.createElement('button');
  let deleteButton = document.createElement('button');

  item.classList.add('list-groupe-item', 'd-flex', 'justify-content-between', 'align-items-center', 'mb-3');
  item.textContent = name;

  item.className.split(" ").indexOf("list-group-item-success") !== -1;

  buttonGroupe.classList.add('btn-group', 'btn-group-sm');
  doneButton.classList.add('btn', 'btn-success')
  doneButton.textContent = 'Готово';
  deleteButton.classList.add('btn', 'btn-danger')
  deleteButton.textContent = 'Удалить';

  buttonGroupe.append(doneButton);
  buttonGroupe.append(deleteButton);
  item.append(buttonGroupe);



  return {
    item,
    doneButton,
    deleteButton,
  };
};

let todoArr = [];


function createTodoApp(container, title = 'Список дел', todoArr) {
  let todoAppTitle = createAppTitle(title);
  let todoItemForm = createTodoItemForm('');
  let todoList = createTodoList('');

  container.append(todoAppTitle);
  container.append(todoItemForm.form);
  container.append(todoList);


  let localList = localStorage.getItem('todo');

  if (localList !== '' && localList !== null) {
    localList = JSON.parse(localList);
  }


  todoItemForm.form.addEventListener('submit', function(event) {

    event.preventDefault();

    button.setAttribute('disabled', true);

    if (!todoItemForm.input.value) {
      return;
    }

    let todoItem = createTodoItem(todoItemForm.input.value);

    todoItem.doneButton.addEventListener('click', function() {
      todoItem.item.classList.toggle('list-group-item-success');
    });
    todoItem.deleteButton.addEventListener('click', function() {
      if (confirm('Вы уверены?')) {
        todoItem.item.remove();
      }
    });

    todoList.append(todoItem.item);

    let newTodo = {
      name: todoItemForm.input.value,
      done: false
    };

    todoArr.push(newTodo);
    localStorage.setItem('todo', JSON.stringify(todoArr));
    todoItemForm.input.value = '';

  });
}


window.createTodoApp = createTodoApp;