Back to Projects Beginner

To-Do List App

Build a task manager where you can add, check off, and delete tasks. You'll learn the basics of making a web page interactive without ever refreshing it.

HTML, CSS, JavaScript ~1 hour to build Free source code

What You'll Learn

How to grab what the user typed using document.getElementById()
How to create new elements on the page with JavaScript (createElement)
How to add and remove items from a list dynamically
How to mark tasks as "done" using CSS classes
How to listen for button clicks and keyboard events (pressing Enter)

How It Works

The HTML lays the foundation

We create an input box where users type their task, a button to add it, and an empty list that will grow as tasks are added. That's it — super simple structure.

CSS makes it look nice

We style the app to look clean — a card layout, a colored add button, and a strikethrough style for completed tasks. When you click a task, it gets a line through it so you know it's done.

JavaScript brings it to life

This is the magic part. When you click "Add" (or press Enter), JavaScript reads what you typed, creates a new list item on the page, and adds a delete button to it — all without reloading the page. This is called "DOM manipulation" and it's one of the most important JavaScript skills.

Source Code

Here's the complete source code. Read through each section — we've kept it as simple as possible so you can understand every line.

Step 1 — HTML Structure

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 List</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>My To-Do List</h1>

    <!-- Input area -->
    <div class="input-area">
      <input type="text" id="taskInput" placeholder="What do you need to do?">
      <button id="addBtn">Add Task</button>
    </div>

    <!-- Task list will appear here -->
    <ul id="taskList"></ul>
  </div>

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

Step 2 — CSS Styling

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f0f4f8;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.container {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 480px;
}

h1 {
  text-align: center;
  color: #25265e;
  margin-bottom: 24px;
  font-size: 1.8rem;
}

.input-area {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

#taskInput {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border-color 0.2s;
  outline: none;
}

#taskInput:focus {
  border-color: #27ae60;
}

#addBtn {
  padding: 12px 20px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

#addBtn:hover { background: #219a55; }

#taskList {
  list-style: none;
}

#taskList li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #f8f9fa;
  margin-bottom: 10px;
  transition: all 0.2s;
}

#taskList li:hover { background: #e8f5e9; }

#taskList li .task-text {
  flex: 1;
  font-size: 0.95rem;
  color: #333;
  cursor: pointer;
}

#taskList li.done .task-text {
  text-decoration: line-through;
  color: #aaa;
}

.delete-btn {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  transition: transform 0.2s;
}

.delete-btn:hover { transform: scale(1.2); }

Step 3 — JavaScript Logic

JavaScript

// Get references to our HTML elements
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

// Add a task when the button is clicked
addBtn.addEventListener('click', addTask);

// Also add a task when Enter key is pressed
taskInput.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') addTask();
});

function addTask() {
  const text = taskInput.value.trim(); // Get the text and remove extra spaces

  // Don't add an empty task
  if (!text) {
    taskInput.focus();
    return;
  }

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

  // Create the task text span (clicking it marks it done)
  const span = document.createElement('span');
  span.className = 'task-text';
  span.textContent = text;
  span.addEventListener('click', function() {
    li.classList.toggle('done'); // Toggle the "done" style
  });

  // Create the delete button
  const deleteBtn = document.createElement('button');
  deleteBtn.className = 'delete-btn';
  deleteBtn.innerHTML = '×'; // × symbol
  deleteBtn.setAttribute('aria-label', 'Delete task');
  deleteBtn.addEventListener('click', function() {
    li.remove(); // Remove this item from the list
  });

  // Put it all together
  li.appendChild(span);
  li.appendChild(deleteBtn);
  taskList.appendChild(li);

  // Clear the input box
  taskInput.value = '';
  taskInput.focus();
}

Download Source Code

Get the complete project as a single ready-to-run HTML file. Open it in any browser — no setup needed!

Download Project

Single HTML file · All code included

All Projects Calculator