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

Google Advertisement

Learn how to build a simple and interactive to-do list app using HTML, CSS, and JavaScript. Includes adding, deleting, and marking tasks as complete with step-by-step code and explanations.

Published on 09 May 2025

📝 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:

🔥 Read with Full Features on Our Website
Add tasks
Mark them as complete
Delete tasks
Use HTML, CSS, and JavaScript together

Google Advertisement

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.
Google Advertisement

#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.
Google Advertisement

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!

Google Advertisement

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

📝 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

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

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

📝 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

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

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

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

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