Создание расширенного списка дел с помощью HTML, CSS и JavaScript
В мире веб-разработки понимание того, как создавать интерактивные и динамические пользовательские интерфейсы, имеет решающее значение. В этой статье мы рассмотрим процесс создания расширенного списка дел с использованием HTML, CSS и JavaScript. Этот проект не только поможет вам понять основы этих технологий, но и познакомит с более продвинутыми концепциями, такими как локальное хранилище. Давайте погрузимся!
Настройка структуры HTML
Основа нашего списка дел лежит в структуре HTML. Мы создаем простую веб-страницу с контейнером, неупорядоченным списком задач и полями ввода для добавления задач и заметок. Каждая задача в списке будет состоять из флажка, самой задачи и кнопки удаления.
<!-- Sample HTML Structure -->
<div id="todo-container">
<h2>Advanced To-Do List</h2>
<ul id="task-list"></ul>
<input type="text" id="add-task" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
<input type="text" id="add-note" placeholder="Add a note">
<button onclick="addNote()">Add Note</button>
<button id="clear-completed" onclick="clearCompleted()">Clear Completed</button>
</div>Стилизация с помощью CSS
Добавление стилей расширяет возможности пользователя. Наш список дел будет иметь чистый и удобный дизайн, созданный с использованием базовых стилей CSS. Стиль включает центрированный контейнер, форматирование задач и кнопки действий.
/* Sample CSS Styles */
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
text-align: center;
margin-top: 50px;
}
#todo-container {
width: 300px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* ... (Other styles for tasks, buttons, etc.) ... */
Реализация функциональности JavaScript
Настоящее волшебство происходит с JavaScript. Мы обрабатываем взаимодействие с пользователем, динамически создаем HTML-элементы и управляем локальным хранилищем, чтобы задачи сохранялись даже после обновления страницы.
// Sample JavaScript Functions
const taskList = document.getElementById('task-list');
const addTaskInput = document.getElementById('add-task');
const addNoteInput = document.getElementById('add-note');
function addTask() {
const taskText = addTaskInput.value.trim();
if (taskText !== '') {
const taskItem = createTaskItem(taskText);
taskList.appendChild(taskItem);
addTaskInput.value = '';
// Save tasks to local storage
saveTasks();
}
}
function addNote() {
const noteText = addNoteInput.value.trim();
if (noteText !== '') {
const noteItem = createNoteItem(noteText);
taskList.appendChild(noteItem);
addNoteInput.value = '';
// Save tasks to local storage
saveTasks();
}
}
function toggleTaskCompletion(event) {
const taskItem = event.target.parentNode;
taskItem.classList.toggle('completed');
// Save tasks to local storage
saveTasks();
}
function deleteTask(event) {
const taskItem = event.target.parentNode;
taskList.removeChild(taskItem);
// Save tasks to local storage
saveTasks();
}
function clearCompleted() {
const completedTasks = document.querySelectorAll('.completed');
completedTasks.forEach(taskItem => {
taskList.removeChild(taskItem);
});
// Save tasks to local storage
saveTasks();
}
function saveTasks() {
const tasks = [];
const taskItems = document.querySelectorAll('.task');
taskItems.forEach(taskItem => {
const taskText = taskItem.querySelector('span').textContent;
const isCompleted = taskItem.classList.contains('completed');
tasks.push({ text: taskText, completed: isCompleted });
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function loadTasks() {
const storedTasks = localStorage.getItem('tasks');
if (storedTasks) {
const tasks = JSON.parse(storedTasks);
tasks.forEach(task => {
const taskItem = task.completed ? createTaskItem(task.text) : createNoteItem(task.text);
if (task.completed) {
taskItem.classList.add('completed');
}
taskList.appendChild(taskItem);
});
}
}
function createTaskItem(text) {
const taskItem = document.createElement('li');
taskItem.classList.add('task');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.addEventListener('change', toggleTaskCompletion);
const taskTextElement = document.createElement('span');
taskTextElement.textContent = text;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', deleteTask);
taskItem.appendChild(checkbox);
taskItem.appendChild(taskTextElement);
taskItem.appendChild(deleteButton);
return taskItem;
}
function createNoteItem(text) {
const noteItem = document.createElement('li');
noteItem.textContent = text;
noteItem.classList.add('note');
return noteItem;
}
// Load tasks from local storage when the page is loaded
document.addEventListener('DOMContentLoaded', loadTasks);Создание функциональности шаг за шагом
Добавление задач
Функция addTask принимает входное значение, динамически создает элемент задачи и добавляет его в список задач. Мы также сохраняем обновленный список задач в локальном хранилище.
Добавление заметок
Подобно добавлению задач, функция addNote создает элемент заметки и добавляет его в список задач. Заметки не имеют флажков и статуса завершения, что четко отличает их от задач.
Переключение завершения задачи
Функция toggleTaskCompletion реагирует на изменения флажков, отмечая задачи как завершенные или незавершенные. И снова обновленный список сохраняется в локальном хранилище.
Удаление задач
Функция deleteTask удаляет задачу или заметку при нажатии кнопки удаления. Измененный список затем сохраняется в локальном хранилище.
Очистка выполненных задач
Функция ClearCompleted удаляет все выполненные задачи, предлагая пользователям быстрый способ привести в порядок свой список.
Сохранение и загрузка задач из локального хранилища
Чтобы сохранять задачи при перезагрузке страницы, мы используем локальное хранилище. Функция saveTasks сохраняет текущий список задач, а функция loadTasks извлекает и отображает сохраненные задачи при загрузке страницы.
УЗНАЙТЕ БОЛЬШЕ: https://codexdindia.blogspot.com/2024/02/building-advanced-to-do-list-with-html.html
Заключение
Создание расширенного списка дел включает интеграцию HTML, CSS и JavaScript для создания удобного пользовательского интерфейса. Реализуя такие функции, как завершение задач, удаление и локальное хранилище, вы получили ценную информацию о концепциях веб-разработки. Продолжайте изучать и применять эти принципы в более сложных проектах, чтобы укрепить свое понимание и навыки. Приятного кодирования!
