Нет необходимости в каких-либо фреймворках, просто ваниль, и у вас есть собственная простая база данных

Это вторая часть моего предыдущего урока «Как освоить JavaScript, создав только одно простое приложение».



Создайте приложение To-Do, чтобы освоить JavaScript
Что? Как я могу освоить JavaScript, создав только приложение To-Do? Конечно вы можете! с большим количеством курьезов, вы можете…medium.com



В моем предыдущем сообщении вы уже обновили приложение To-Do, чтобы иметь возможность сохранять свои заметки в Локальное хранилище браузера. Теперь, как я и обещал, я покажу вам, как его улучшить, чтобы в приложении To-Do появилась возможность сохранять заметки путем создания файла JSON. Этот файл JSON будет функционировать как база данных вашей заметки, вы можете выполнять с ним операцию CRUD.

Без дальнейших церемоний, давайте начнем погружение!

  1. Обновлен HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Todo List App</title>
  </head>
  <body>
    <h1>Todo List App</h1>
    <form>
      <label for="todo-input">New Task:</label>
      <input type="text" id="todo-input" />
      <button type="button" id="add-btn">Add</button>
    </form>
    <ul id="todo-list"></ul>

    <script src="todo.js"></script>
  </body>
</html>

2. Теперь это обновление JavaScript, чтобы это произошло

const todoInput = document.getElementById("todo-input");
const addBtn = document.getElementById("add-btn");
const todoList = document.getElementById("todo-list");

const todos = loadTodos();

// Populate the list with saved todos
for (let todo of todos) {
  addTodoToDOM(todo);
}

// Add event listeners
addBtn.addEventListener("click", handleAddTodo);
todoList.addEventListener("click", handleTodoClick);

function loadTodos() {
  // Load todos from the saved JSON file
  try {
    const todos = JSON.parse(localStorage.getItem("todos"));
    if (Array.isArray(todos)) {
      return todos;
    }
  } catch (error) {
    console.error("Error loading todos:", error);
  }
  return [];
}

function saveTodos() {
  // Save the todos to a JSON file
  try {
    const json = JSON.stringify(todos);
    const blob = new Blob([json], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.download = "todos.json";
    link.href = url;
    link.click();
  } catch (error) {
    console.error("Error saving todos:", error);
  }
}

function addTodoToDOM(todo) {
  const newTodo = document.createElement("li");
  newTodo.dataset.id = todo.id;
  newTodo.innerText = todo.text;
  todoList.appendChild(newTodo);
}

function handleAddTodo() {
  const todoText = todoInput.value.trim();
  if (!todoText) {
    alert("Please enter a task.");
    return;
  }
  const todo = { id: Date.now(), text: todoText };
  todos.push(todo);
  addTodoToDOM(todo);
  saveTodos();
  todoInput.value = "";
}

function handleTodoClick(event) {
  if (event.target.tagName !== "LI") {
    return;
  }
  const todoId = event.target.dataset.id;
  const todoIndex = todos.findIndex((todo) => todo.id == todoId);
  if (todoIndex === -1) {
    console.error("Todo not found:", todoId);
    return;
  }
  const todo = todos[todoIndex];
  const action = event.target.dataset.action;
  switch (action) {
    case "delete":
      todos.splice(todoIndex, 1);
      event.target.remove();
      break;
    case "edit":
      const newText = prompt("Edit task:", todo.text);
      if (newText) {
        todo.text = newText;
        event.target.innerText = newText;
        saveTodos();
      }
      break;
    default:
      console.error("Unknown action:", action);
      return;
  }
  saveTodos();
}

Пройдемся по изменениям,

  1. Переменная todos теперь содержит массив задач.
  2. Функция loadTodos загружает сохраненный файл JSON и возвращает задачи в виде массива. Если при синтаксическом анализе файла JSON возникает ошибка, возвращается пустой массив, а в консоль записывается сообщение об ошибке.
  3. Функция saveTodos сериализует массив todos в строку JSON, создает объект Blob со строкой JSON в качестве данных и типом MIME, установленным на «application/json», и создает ссылку для загрузки файла JSON. При переходе по ссылке файл загружается на устройство пользователя. Если при сохранении задач возникает ошибка, в консоль выводится сообщение об ошибке.
  4. Функция addTodoToDOM создает новый элемент li с текстом задачи и идентификатором в качестве атрибутов dataset и добавляет его к элементу todoList.
  5. Функция handleAddTodo создает новый элемент задачи с уникальным идентификатором (сгенерированным с помощью Date.now()), помещает его в массив todos, добавляет в DOM с помощью addTodoToDOM, сохраняет задачи в файл JSON с помощью saveTodos и очищает поле ввода.
  6. Функция handleTodoClick теперь включает кейс для удаления задачи. Он находит индекс задачи в массиве todos с помощью findIndex, удаляет его из массива с помощью splice и удаляет соответствующий элемент li из DOM. Он также включает случай редактирования задачи, который запрашивает у пользователя новый текст задачи, обновляет массив todos и элемент DOM, если пользователь ввел новый текст, и сохраняет задачи в файле JSON, используя saveTodos. Если пользователь отменяет приглашение, ничего не меняется.
  7. Массив todos заполняется сохраненными задачами с помощью цикла for...of, а прослушиватели событий добавляются к кнопке отправки формы и элементу списка задач.

Вы всегда можете улучшить его до еще большего приложения. Предел вашего творчества! Возможно, вы даже сможете продать свое приложение и монетизировать его, просто сделав сначала простое приложение.

Если вы нашли странный синтаксис в кодах, вы всегда можете его найти в Google, найти значение синтаксиса - это все равно, что открыть словарь, как только вы узнаете, что это было, и ясно его поймете, повторяя, чтобы использовать синтаксис, который вы уже знаете, он будет придерживаться в ваш мозг навсегда, как английский язык.

Это все, ребята, я надеюсь, что это поможет вам получить больше практики, чтобы отточить свои навыки JavaScript.

Если вы считаете, что этот пост полезен, пожалуйста, поддержите меня в «Купи мне кофе, это действительно много значит для меня, и я буду публиковать больше таких постов.