Building an Advanced To-Do List with HTML, CSS, and JavaScript

KNOW MORE :- https://codexdindia.blogspot.com/2024/02/building-advanced-to-do-list-with-html.html

Introduction

In the world of web development, understanding how to create interactive and dynamic user interfaces is crucial. In this article, we'll walk through the process of building an advanced to-do list using HTML, CSS, and JavaScript. This project will not only help you grasp the fundamentals of these technologies but also introduce more advanced concepts like local storage. Let's dive in!

---

Setting Up the HTML Structure

The foundation of our to-do list lies in the HTML structure. We create a simple webpage with a container, an unordered list to hold tasks, and input fields for adding tasks and notes. Each task in the list will consist of a checkbox, the task itself, and a delete button.

<!-- 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>

---

Styling with CSS

Adding styles enhances the user experience. Our to-do list will have a clean and user-friendly design, achieved using basic CSS styling. The styling includes a centered container, task formatting, and buttons for actions.

/* 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.) ... */

---

Implementing JavaScript Functionality

The real magic happens with JavaScript. We handle user interactions, dynamically create HTML elements, and manage local storage to persist tasks even after a page refresh.

// 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);

---

Building Functionality Step by Step

Adding Tasks

The addTask function takes the input value, creates a task item dynamically, and appends it to the task list. We also save the updated task list to local storage.

Adding Notes

Similar to adding tasks, the addNote function creates a note item and appends it to the task list. Notes don't have checkboxes and completion status, providing a clear distinction from tasks.

Toggling Task Completion

The toggleTaskCompletion function responds to checkbox changes, marking tasks as completed or incomplete. Again, the updated list is saved to local storage.

Deleting Tasks

The deleteTask function removes a task or note when the delete button is clicked. The modified list is then saved to local storage.

Clearing Completed Tasks

The clearCompleted function removes all completed tasks, offering users a quick way to tidy up their list.

Saving and Loading Tasks from Local Storage

To persist tasks across page reloads, we use local storage. The saveTasks function stores the current task list, while loadTasks retrieves and displays the saved tasks when the page loads.

---

Conclusion

Building an advanced to-do list involves integrating HTML, CSS, and JavaScript to create a seamless user experience. By implementing features like task completion, deletion, and local storage, you've gained valuable insights into web development concepts. Continue exploring and applying these principles to more complex projects to solidify your understanding and skills. Happy coding!