Building a To-Do List App with HTML, CSS, and JavaScript: A Step-by-Step Guide

March 18, 2025

How to Build a Simple To-Do List App Using JavaScript

Building a simple to-do list application is a great method to improve your web development abilities, especially HTML, CSS, and JavaScript. For individuals seeking organized advice, HTML CSS JavaScript provides comprehensive tuition to improve your skills. This article walks you through the process of building a working to-do list app while emphasizing fundamental front-end development concepts.

1. Setting Up the Project Structure

Begin by organizing your project directory with the following files:

index.html: Contains the HTML structure.
styles.css: Defines the CSS for styling the application.
script.js: Implements the JavaScript functionality.

2. Crafting the HTML Structure

In index.html, establish the basic layout:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <form id="task-form">
            <input type="text" id="task-input" placeholder="Enter a new task" required>
            <button type="submit">Add Task</button>
        </form>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Styling the Application with CSS

In styles.css, apply styles to enhance the user interface:

css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

input, button {
    padding: 10px;
    margin: 5px 0;
    width: 100%;
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #eee;
    margin: 5px 0;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

4. Implementing Functionality with JavaScript

In script.js, add the following code to manage tasks:

javascript

document.addEventListener('DOMContentLoaded', () => {
    const taskForm = document.getElementById('task-form');
    const taskInput = document.getElementById('task-input');
    const taskList = document.getElementById('task-list');

    taskForm.addEventListener('submit', (e) => {
        e.preventDefault();
        addTask(taskInput.value);
        taskInput.value = '';
    });

    function addTask(task) {
        const li = document.createElement('li');
        li.textContent = task;

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Delete';
        deleteBtn.addEventListener('click', () => {
            li.remove();
        });

        li.appendChild(deleteBtn);
        taskList.appendChild(li);
    }
});

5. Enhancing User Experience

Task Completion: Allow users to mark tasks as completed by toggling the completed class on click:

javascript

  li.addEventListener('click', () => {
      li.classList.toggle('completed');
  });

Persistent Storage: Utilize local storage to save tasks between sessions:

javascript

  function saveTasks() {
      const tasks = [];
      document.querySelectorAll('li').forEach((li) => {
          tasks.push({
              text: li.textContent.replace('Delete', '').trim(),
              completed: li.classList.contains('completed')
          });
      });
      localStorage.setItem('tasks', JSON.stringify(tasks));
  }

  function loadTasks() {
      const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks.forEach((task) => {
          addTask(task.text, task.completed);
      });
  }

  taskForm.addEventListener('submit', (e) => {
      e.preventDefault();
      addTask(taskInput.value);
      taskInput.value = '';
      saveTasks();
  });

  function addTask(task, completed = false) {
      const li = document.createElement('li');
      li.textContent = task;
      if (completed) {
          li.classList.add('completed');
      }

      li.addEventListener('click', () => {
          li.classList.toggle('completed');
          saveTasks();
      });

      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = 'Delete';
      deleteBtn.addEventListener('click', () => {
          li.remove();
          saveTasks();
      });

      li.appendChild(deleteBtn);

      taskList.appendChild(li);
  }

  loadTasks();

By following this guide, you can create a functional to-do list application that reinforces your understanding of HTML, CSS, and JavaScript. For a more in-depth learning experience and to master these technologies, consider enrolling in HTML CSS JavaScript Training in KPHB, where expert guidance can further enhance your development skills.

Search This Blog

nareshitechnologieskphb

Building a To-Do List App with HTML, CSS, and JavaScript: A Step-by-Step Guide

How to Build a Simple To-Do List App Using JavaScript

Comments

Post a Comment

Popular posts from this blog

"Frontend vs. Backend Development: Understanding the Distinctions and Their Collaborative Roles"

Mastering the Core: Essential Skills Every Web Developer Should Acquire

Using AI to Generate JavaScript Code: A Game-Changer for Developers