Привет всем, надеюсь, у вас все в порядке, давайте поговорим о создании списка дел на JavaScript с локальным хранилищем. Список дел — это удобный инструмент для организации задач и поддержания продуктивности.

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

прежде чем создавать список дел, вы должны знать HTML, CSS и JS. Почему HTML и CSS? По сути, вы можете использовать JS для управления элементами HTML, поэтому вы должны иметь об этом знания.

Для начала создайте новую папку для своего проекта и настройте базовую структуру. Вам понадобится файл HTML для определения макета, файл CSS для стилизации и файл JavaScript для функциональности.

В вашем HTML-файле создайте простую структуру. Вам понадобится поле ввода для добавления задач, кнопка для их отправки и список для отображения задач. Используйте CSS для оформления списка дел. Вы можете выбрать цвета, шрифты и макет, чтобы сделать его визуально привлекательным и удобным для пользователя.

JavaScript будет управлять функциональностью вашего списка дел. Вам потребуется:

  • Получите ссылки на созданные вами элементы HTML.
  • Создайте прослушиватель событий для кнопки добавления задач.
  • Сохраните задачи в массиве.
  • Отображение задач в списке.
  • Разрешите пользователям отмечать задачи как выполненные и удалять их.
  • Сохраняйте задачи в локальном хранилище, чтобы они сохранялись между сеансами.

Создание списка дел с помощью Javascript и локального хранилища

Локальное хранилище — это хранилище «ключ-значение», которое позволяет сохранять данные в браузере пользователя. В своем коде JavaScript вы будете использовать объект localStorage для сохранения и извлечения задач. Расширьте свой список дел, добавив такие функции, как пометка задач как выполненных, сортировка задач и фильтрация задач по их статусу (завершено или в ожидании).

Давайте посмотрим на коды, которые помогают нам создать список дел с помощью JavaScript и локального хранилища. Прежде всего, вам необходимо разработать приложение. ниже вы можете увидеть HTML-коды.

<div class="container">
      <div class="content-wrapper">
        <h2><span>T</span>ASK <span>L</span>IST</h2>

        <form id="form">
          <input
            type="text"
            placeholder="Enter Your Task "
            autocomplete="off"
            id="input"
          />
          <button type="button" class="btn-add">Add Task</button>
        </form>
        <ul class="todos" id="todos"></ul>
      </div>

      <p>Right Click to delete the Element!</p>
    </div>

Если вы используете структуру HTML, вам нужно будет использовать CSS для разработки приложения. Я поделюсь с вами кодами, которые я использовал в проекте.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "poppins";
  background: #ddd;
}

.container {
  background: #212f3c;
  max-width: 600px;
  width: 100%;
  border-radius: 10px;
}

.content-wrapper {
  padding: 2rem;
}

.content-wrapper h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin: 2rem 0;
  color: #f39c12;
  letter-spacing: 6px;
  font-family: "ruda";
}

.content-wrapper h2 span {
  font-size: 2.8rem;
}

form {
  margin-top: 1rem;
  position: relative;
}

form input {
  width: 94%;
  padding: 0.8rem 1rem;
  background: #f4f4f4;
  border: 1px solid #ddd;
  outline: none;
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
}

.btn-add {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.88rem 1rem;
  outline: none;
  background: #f39c12;
  border: none;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  font-size: 1rem;
}

#todos li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  background: #34495e;
  align-items: center;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 5px;
  margin: 1rem 0;
  color: #fff;
}

.container p {
  text-align: center;
  color: #ddd;
  opacity: 0.4;
  margin: 1rem 0;
}

#todos li.completed {
  text-decoration: line-through;
}

Наконец, что самое интересное, это то, что JS позволяет использовать JS-коды для выполнения операций. Итак, давайте посмотрим на коды, которые используются для управления контентом.

const formEl = document.getElementById("form");
const inputEl = document.getElementById("input");
const todosUiEl = document.getElementById("todos");
const btnEl = document.querySelector(".btn-add");

// getting data from local storage
//get data from storage
const todos = JSON.parse(localStorage.getItem("todos"));

if (todos) {
  todos.forEach((todo) => addTodo(todo));
}
// step 1
btnEl.addEventListener("click", (e) => {
  e.preventDefault();
  addTodo();
});

// step 2
function addTodo(todo) {
  let todoText = inputEl.value;

  //if i will pass the parameter inside the function
  if (todo) {
    todoText = todo.text;
  }

  if (todoText) {
    const todEl = document.createElement("li");

    if (todo && todo.completed) {
      todEl.classList.add("completed");
      updatsUi();
    }

    //remove element
    todEl.addEventListener("contextmenu", (e) => {
      e.preventDefault();
      todEl.remove();
      updatsUi();
    });

    todEl.innerText = todoText;

    //task complete
    todEl.addEventListener("click", () => {
      todEl.classList.toggle("completed");
      updatsUi();
    });

    todosUiEl.appendChild(todEl);
    inputEl.value = "";
    updatsUi();
  }
}

function updateLS() {
  const todosEls = document.querySelectorAll("li");
  const todos = [];
  todosEls.forEach((todoEl) => {
    todos.push({
      text: todoEl.innerText,
      completed: todoEl.classList.contains("completed"),
    });
  });

  localStorage.setItem("todos", JSON.stringify(todos));
}

Тщательно протестируйте свой список дел в разных браузерах, чтобы обеспечить кросс-браузерную совместимость. Используйте инструменты разработчика браузера для устранения любых возникающих проблем. Рассмотрите возможность оптимизации вашего кода для повышения производительности и добавления дополнительных функций, таких как сроки выполнения, категории или напоминания, чтобы сделать ваш список дел еще более полезным.

Список дел на JavaScript с локальным хранилищем

Предоставьте четкие инструкции о том, как использовать список дел, в том числе о том, как добавлять, выполнять и удалять задачи. Создайте удобный интерфейс с интуитивно понятным управлением. Вы можете посмотреть видеоурок, если у вас возникнут какие-либо проблемы внутри кодов. Я шаг за шагом объяснил каждую вещь, которая используется для создания списка дел в JavaScript с локальным хранилищем.

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

Вам также может понравиться:

Заключение:

Создание списка дел на JavaScript с использованием локального хранилища — ценное упражнение для веб-разработчиков. Он сочетает в себе основные веб-технологии, включая HTML, CSS и JavaScript, а также представляет концепцию сохранения данных через локальное хранилище. Взяв за основу этот проект, вы сможете изучить более продвинутые функции и возможности для создания еще более мощных приложений для управления задачами. Приятного кодирования!