Привет всем, надеюсь, у вас все в порядке, давайте поговорим о создании списка дел на 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 с локальным хранилищем.
Как только ваш список дел будет завершен и тщательно протестирован, вы сможете развернуть его на веб-сервере или хостинговой платформе по вашему выбору. Поделитесь им с другими и соберите отзывы для дальнейших улучшений.
Вам также может понравиться:
- Приложение-викторина с HTML, CSS и JavaScript
- Как создать генератор QR-кода на JavaScript
- Создайте аккордеон с помощью HTML, CSS и JavaScript
- Проверка формы в JavaScript
- Как создать генератор паролей на JavaScript
Заключение:
Создание списка дел на JavaScript с использованием локального хранилища — ценное упражнение для веб-разработчиков. Он сочетает в себе основные веб-технологии, включая HTML, CSS и JavaScript, а также представляет концепцию сохранения данных через локальное хранилище. Взяв за основу этот проект, вы сможете изучить более продвинутые функции и возможности для создания еще более мощных приложений для управления задачами. Приятного кодирования!