Skip to main content

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!

Comments

Popular posts from this blog

Top Free APIs Every Developer Should Know About

Top Free APIs Every Developer Should Know About In the world of software development, APIs (Application Programming Interfaces) are essential for integrating various functionalities into applications. Here’s a curated list of top free APIs categorized by their functionality: 1. Weather APIs OpenWeatherMap API : Provides current weather data, forecasts, and historical weather data for any location. Weatherstack API : Offers real-time weather information, including forecasts and historical data. 2. Maps and Geolocation APIs Google Maps API : Enables integration of interactive maps, geocoding, and route optimization. Mapbox API : Provides customizable maps, navigation, and location search capabilities. 3. Finance and Stock Market APIs Alpha Vantage API : Offers real-time and historical equity and cryptocurrency data. Yahoo Finance API : Provides access to financial news, stock market data, and por...

Google Drive Proxy Video Player - Bypass Limits - JW Player - Embed drive videos

GooDrive :- https://goodrive.stream/ Google Drive Proxy Player #1 :- https://youtu.be/9VQK8W2iUkg Dev.to Article

Making AI Song Covers with RVC - Google Colab

Making AI Song Covers with RVC * Google Colab or Local Install These are the two main options for making AI song covers. You can run RVC on your computer if you have a PC with a decent NVIDIA graphics card (GPU), or you can run it for free through the Google Colab web page. Running Google Colab This is the recommended Google Colab for using voice models: https://colab.research.google.com/drive/1Gj6UTf2gicndUW_tVheVhTXIIYpFTYc7?usp=sharing After enough time, Google limits your GPU usage and you have to wait to use the GPU again. This will slow down your conversion speeds, but it will still be usable as long as you use ‘rmvpe’ mode (considered to be the general best mode, tied with mangio-crepe). ~3 minute song took 9 minutes for me without the GPU. Some people make alternate Google accounts to get around the GPU limits, or they pay for Colab Pro. Most commonly happens for people training their own voices since that requires a lot of GPU power. Running Locally Check...

Random Posts