📝 Create a To-Do List App with Add/Delete/Complete Features in JavaScript

🚀 Introduction

If you're new to JavaScript and looking for a small yet practical project, a To-Do List App is perfect! You'll learn how to:

Add tasks
Mark them as complete
Delete tasks
Use HTML, CSS, and JavaScript together

Let’s dive in and build this app from scratch, step by step!

📁 1. Set Up Your Files

Create three files in your project folder:

index.html
style.css
script.js

🧱 2. HTML Structure (`index.html`)

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

  <script src="script.js"></script>
</body>
</html>

💡 Explanation:

#task-input: Where the user types the task.
#add-task-btn: Button to add the task.
#task-list: Where the tasks will appear as a list.

🎨 3. Basic CSS Styling (`style.css`)

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 350px;
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

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

li {
  background-color: #eaeaea;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

button.delete {
  background: red;
  color: white;
  border: none;
  padding: 5px 10px;
}

button.complete {
  background: green;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-right: 5px;
}

💡 Explanation:

Clean, modern styling for the input, buttons, and task list.
.completed adds a strikethrough style when a task is marked done.

⚙️ 4. JavaScript Functionality (`script.js`)

// Get elements
const addBtn = document.getElementById('add-task-btn');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

// Add Task
addBtn.addEventListener('click', () => {
  const taskText = taskInput.value.trim();

  if (taskText === '') {
    alert('Please enter a task!');
    return;
  }

  // Create list item
  const li = document.createElement('li');

  // Create task span
  const span = document.createElement('span');
  span.textContent = taskText;

  // Complete button
  const completeBtn = document.createElement('button');
  completeBtn.textContent = 'Complete';
  completeBtn.className = 'complete';

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

  // Delete button
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete';
  deleteBtn.className = 'delete';

  deleteBtn.addEventListener('click', () => {
    taskList.removeChild(li);
  });

  // Append everything
  li.appendChild(span);
  li.appendChild(completeBtn);
  li.appendChild(deleteBtn);
  taskList.appendChild(li);

  // Clear input
  taskInput.value = '';
});

💡 Explanation Step-by-Step:

addEventListener('click', ...): Runs when "Add Task" is clicked.
trim(): Removes spaces from start/end.
createElement(): Dynamically creates HTML elements (like buttons).
classList.toggle('completed'): Adds/removes the class to strike through text.
removeChild(): Deletes the task item from the list.

✅ Features Summary

Feature	Description
Add Task	User types a task and clicks "Add Task"
Complete	Click “Complete” to mark task as done
Delete	Click “Delete” to remove the task

🧠 Final Tips

You can improve this app by saving tasks to localStorage.
Add a “clear all” button if needed.
Try learning frameworks like React after mastering this!

Beginner’s Guide to Building a JavaScript To-Do List App from Scratch

Follow us on

📝 Create a To-Do List App with Add/Delete/Complete Features in JavaScript

🚀 Introduction

📁 1. Set Up Your Files

🧱 2. HTML Structure (`index.html`)

💡 Explanation:

🎨 3. Basic CSS Styling (`style.css`)

💡 Explanation:

⚙️ 4. JavaScript Functionality (`script.js`)

💡 Explanation Step-by-Step:

✅ Features Summary

🧠 Final Tips

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us

Beginner’s Guide to Building a JavaScript To-Do List App from Scratch

Follow us on

📝 Create a To-Do List App with Add/Delete/Complete Features in JavaScript

🚀 Introduction

📁 1. Set Up Your Files

🧱 2. HTML Structure (index.html)

💡 Explanation:

🎨 3. Basic CSS Styling (style.css)

💡 Explanation:

⚙️ 4. JavaScript Functionality (script.js)

💡 Explanation Step-by-Step:

✅ Features Summary

🧠 Final Tips

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us

🧱 2. HTML Structure (`index.html`)

🎨 3. Basic CSS Styling (`style.css`)

⚙️ 4. JavaScript Functionality (`script.js`)