To Do List Project

Project: The To-Do List Application

Combining HTML, CSS, and JavaScript into a fully functional app.

Building a To-Do list is the absolute rite of passage for every software engineer. Now that your B.Tech is officially complete and you are stepping into full-stack development, this is the exact type of foundational project that bridges the gap between static design and interactive software. It forces you to use the DOM, handle user inputs, and manage memory state.

Step 1: The Structure (HTML)

First, we need to build the physical skeleton of the application. A To-Do list only requires three core elements:

1. An <input> field where the user types their task.
2. A <button> to submit the task.
3. An empty <ul> (Unordered List) that will act as a container. Our JavaScript will inject new list items into this empty box later.

<div class="todo-app">
  <h2>Task Manager</h2>

  <!-- Input Area -->
  <div class="input-group">
    <input type="text" id="task-input" placeholder="What needs to be done?">
    <button id="add-btn">Add</button>
  </div>

  <!-- The empty container for our tasks -->
  <ul id="task-list"></ul>
</div>

Step 2: The Styling (CSS)

We will use Flexbox to align the input field and the button perfectly side-by-side. We also need to style the list items (<li>) that JavaScript will create later so they look like neat, modern cards.

.todo-app {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  max-width: 400px;
}

/* Flexbox keeps the input and button strictly on one line */
.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#task-input {
  flex: 1; /* Tells the input to take up all remaining empty space */
  padding: 10px;
}

/* We will use JS to create these list items later! */
li {
  display: flex;
  justify-content: space-between; /* Pushes task text left, delete btn right */
  padding: 10px;
  background: #f9f9f9;
  margin-bottom: 8px;
  border-left: 4px solid #4C8BF5;
}

Step 3: The Brains (JavaScript)

Here is where the magic happens. Instead of just changing text using innerHTML, we are going to learn two new, highly professional DOM methods: document.createElement() and appendChild().

This allows us to physically construct brand new HTML elements inside the computer's memory, attach event listeners to them, and then drop them onto the screen.

// 1. Capture the HTML elements we need to interact with
const taskInput = document.getElementById("task-input");
const addBtn = document.getElementById("add-btn");
const taskList = document.getElementById("task-list");

// 2. Listen for the user clicking the "Add" button
addBtn.addEventListener("click", () => {

  // Grab the text the user typed
  const taskText = taskInput.value;

  // Security Check: Prevent them from adding blank, empty tasks
  if (taskText === "") {
    alert("Please enter a task!");
    return; // Immediately stops the function from continuing
  }

  // 3. CREATE A NEW LIST ITEM IN MEMORY
  const newListItem = document.createElement("li");
  newListItem.innerText = taskText;

  // 4. CREATE A DELETE BUTTON FOR THIS SPECIFIC TASK
  const deleteBtn = document.createElement("button");
  deleteBtn.innerText = "Delete";
  deleteBtn.style.background = "red";
  deleteBtn.style.color = "white";
  deleteBtn.style.border = "none";
  deleteBtn.style.cursor = "pointer";

  // Give this delete button a click event to destroy its parent

  deleteBtn.addEventListener("click", () => {
    newListItem.remove(); // Deletes the

from the screen!
  });

  // 5. ASSEMBLE THE PIECES
  // Put the Delete Button inside the List Item
  newListItem.appendChild(deleteBtn);

  // Put the List Item inside the Main

on the webpage
  taskList.appendChild(newListItem);

  // 6. Clean up: Empty the input field so the user can type the next task
  taskInput.value = "";
});

Why appendChild() is better here than innerHTML:
If we used string concatenation (innerHTML += "<li>Task<button>Delete</button></li>"), it would be extremely difficult to attach a unique click event listener to each delete button. By creating the elements as actual JavaScript objects first, we can attach the event listener in memory before we drop it onto the webpage.