JavaScript Notes

JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026

Build a complete Task Scheduler (Todo App) using vanilla JavaScript with CRUD operations, localStorage persistence, filtering, and event delegation. Step-by-step comprehensive guide with full source code.

In this project, we will build a complete Task Scheduler (Todo App) using vanilla JavaScript. This project teaches you real-world CRUD operations, localStorage persistence, DOM manipulation, event delegation, and state management.

Why Build This Project?

Task Scheduler is a classic frontend project that is repeatedly asked in interviews. From this you will learn:

CRUD — Create, Read, Update, Delete operations
localStorage — Persist data in browser (data remains even after page refresh)
Event Delegation — Efficiently handle dynamic elements
Filtering — Show All, Active, Completed tasks
Clean Architecture — State-driven rendering pattern

Features List

Feature	Description
➕ Add Task	Add a new task from the input field
✅ Complete Task	Mark task as done (toggle)
🗑️ Delete Task	Permanently remove a task
🔍 Filter Tasks	All / Active / Completed filter
💾 Persist Data	Save/load data from localStorage
📊 Task Counter	Pending tasks ka count display
⚡ Event Delegation	Single listener for dynamic items
🛡️ Input Validation	Prevent empty input

Step 1: HTML Structure

First, let's build our HTML skeleton. It's semantic and accessible:

html example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Task Scheduler — JavaScript Project</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="app-container">
    <header class="app-header">
      <h1>📋 Task Scheduler</h1>
      <p class="task-counter">
        <span id="pendingCount">0</span> tasks pending
      </p>
    </header>

    <div class="input-section">
      <input
        type="text"
        id="taskInput"
        placeholder="Add a new task..."
        maxlength="100"
        autocomplete="off"
      />
      <button id="addBtn" type="button">Add Task</button>
    </div>

    <div class="filter-section">
      <button class="filter-btn active" data-filter="all">All</button>
      <button class="filter-btn" data-filter="active">Active</button>
      <button class="filter-btn" data-filter="completed">Completed</button>
    </div>

    <ul id="taskList" class="task-list"></ul>

    <footer class="app-footer">
      <button id="clearCompletedBtn">Clear Completed</button>
    </footer>
  </div>

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

Key points:

data-filter attributes on filter buttons — useful for event delegation
maxlength="100" — input validation at HTML level
Semantic elements: header, footer, ul, li

Step 2: CSS Styling

Clean, modern styling jo responsive bhi hai:

css example

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

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
}

.app-container {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.app-header h1 { font-size: 1.8rem; color: #333; }
.task-counter { color: #888; margin-top: 4px; font-size: 0.9rem; }

.input-section {
  display: flex;
  gap: 8px;
  margin: 24px 0 16px;
}

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

#taskInput:focus { outline: none; border-color: #667eea; }

#addBtn {
  padding: 12px 24px;
  background: #667eea;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

#addBtn:hover { background: #5a6fd6; }

.filter-section { display: flex; gap: 8px; margin-bottom: 16px; }

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  background: #f9f9f9;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.filter-btn.active { background: #667eea; color: #fff; border-color: #667eea; }

.task-list { list-style: none; }

.task-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
  gap: 12px;
}

.task-item:hover { background: #f8f9ff; }
.task-item.completed .task-text { text-decoration: line-through; color: #aaa; }

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

.task-item button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.task-item button:hover { background: #fee; }

.app-footer { margin-top: 16px; text-align: right; }

#clearCompletedBtn {
  padding: 8px 16px;
  background: none;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

#clearCompletedBtn:hover { background: #e74c3c; color: #fff; }

Step 3: JavaScript — Complete Implementation

Now comes the main part. We will write JavaScript step-by-step.

3.1 — State & DOM References

javascript example

// ===== STATE =====
let tasks = [];
let currentFilter = 'all';

// ===== DOM REFERENCES =====
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
const pendingCount = document.getElementById('pendingCount');
const clearCompletedBtn = document.getElementById('clearCompletedBtn');
const filterBtns = document.querySelectorAll('.filter-btn');

Explanation: We maintain a tasks array as our single source of truth. DOM elements are referenced at the top so we don't have to query them repeatedly.

3.2 — localStorage Functions (Persist Data)

javascript example

// ===== LOCAL STORAGE =====
const STORAGE_KEY = 'taskScheduler_tasks';

function saveToStorage() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

function loadFromStorage() {
  const stored = localStorage.getItem(STORAGE_KEY);
  if (stored) {
    try {
      tasks = JSON.parse(stored);
    } catch (error) {
      console.error('Error parsing stored tasks:', error);
      tasks = [];
    }
  }
}

Output

// Gets saved in browser localStorage:
// Key: "taskScheduler_tasks"
// Value: '[{"id":1,"text":"Buy groceries","completed":false}, ...]'

Important: Always wrap JSON.parse() in a try-catch — if localStorage has corrupted data, the app won't crash.

3.3 — CREATE Operation (Add Task)

Example

// ===== CREATE ===== function addTask(text) { // Validation const trimmedText = text.trim(); if (trimmedText === '') { alert('Please enter a task!'); return false; } // Check for duplicates const isDuplicate = tasks.some( task => task.text.toLowerCase() === trimmedText.toLowerCase() ); if (isDuplicate) { alert('This task already exists!'); return false; } // Create task object const newTask = { id: Date.now(), text: trimmedText, completed: false, createdAt: new Date().toISOString() }; // Update state tasks.unshift(newTask); // Add to beginning saveToStorage(); renderTasks(); return true; }

Output

// After adding "Buy groceries":
// tasks = [
//   { id: 1718123456789, text: "Buy groceries", completed: false, createdAt: "2026-06-11T..." }
// ]

Key decisions:

Date.now() generates a unique ID (timestamp-based)
unshift() — new task appears at the top
Duplicate check case-insensitive hai

3.4 — READ Operation (Render Tasks)

Example

// ===== READ / RENDER ===== function getFilteredTasks() { switch (currentFilter) { case 'active': return tasks.filter(task => !task.completed); case 'completed': return tasks.filter(task => task.completed); default: return tasks; } } function renderTasks() { const filtered = getFilteredTasks(); // Generate HTML taskList.innerHTML = filtered .map(task => ` <li class="task-item ${task.completed ? 'completed' : ''}" data-id="${task.id}"> <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''} /> <span class="task-text">${escapeHTML(task.text)}</span> <button class="delete-btn" title="Delete task">🗑️</button> </li> `) .join(''); // Update counter const pending = tasks.filter(task => !task.completed).length; pendingCount.textContent = pending; } // XSS prevention helper function escapeHTML(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; }

Output

// DOM Output (3 tasks, 1 completed):
// ┌──────────────────────────────────────┐
// │ ☐ Learn JavaScript          🗑️      │
// │ ☐ Build portfolio           🗑️      │
// │ ☑ Buy groceries (strikethrough) 🗑️  │
// └──────────────────────────────────────┘
// Counter: "2 tasks pending"

Security note: The escapeHTML() function prevents XSS attacks. If a user tries to inject <script> in the input, it won't execute.

3.5 — UPDATE Operation (Toggle Complete)

Example

// ===== UPDATE ===== function toggleTask(id) { const task = tasks.find(task => task.id === id); if (task) { task.completed = !task.completed; saveToStorage(); renderTasks(); } }

Output

// Before toggle: { id: 123, text: "Buy groceries", completed: false }
// After toggle:  { id: 123, text: "Buy groceries", completed: true }
// Visual: Text gets strikethrough, checkbox becomes checked

3.6 — DELETE Operation

Example

// ===== DELETE ===== function deleteTask(id) { tasks = tasks.filter(task => task.id !== id); saveToStorage(); renderTasks(); } function clearCompleted() { const completedCount = tasks.filter(t => t.completed).length; if (completedCount === 0) return; const confirmed = confirm( `Delete ${completedCount} completed task(s)?` ); if (confirmed) { tasks = tasks.filter(task => !task.completed); saveToStorage(); renderTasks(); } }

Output

// Before delete: tasks.length = 5
// After deleteTask(123): tasks.length = 4
// After clearCompleted(): All completed tasks removed

3.7 — Filter Logic

Example

// ===== FILTER ===== function setFilter(filter) { currentFilter = filter; // Update active button styling filterBtns.forEach(btn => { btn.classList.toggle('active', btn.dataset.filter === filter); }); renderTasks(); }

Output

// Filter "active" → Shows only tasks where completed === false
// Filter "completed" → Shows only tasks where completed === true
// Filter "all" → Shows everything

3.8 — Event Delegation (Efficient Event Handling)

javascript example

// ===== EVENT DELEGATION =====
// Single listener on parent handles all child clicks
taskList.addEventListener('click', function (e) {
  const taskItem = e.target.closest('.task-item');
  if (!taskItem) return;

  const taskId = Number(taskItem.dataset.id);

  // Handle checkbox click
  if (e.target.classList.contains('task-checkbox')) {
    toggleTask(taskId);
    return;
  }

  // Handle delete button click
  if (e.target.classList.contains('delete-btn')) {
    deleteTask(taskId);
    return;
  }
});

Why Event Delegation?

If there are 100 tasks, there's no need to attach 100 individual listeners. A single parent listener (on taskList) handles everything. When new tasks are dynamically added, no separate listener attachment is needed — they're automatically covered through delegation.

Output

// Click event bubbles up:
// 🗑️ button click → .task-item → #taskList (listener here catches it)
// e.target = clicked element (button)
// e.target.closest('.task-item') = parent li element
// taskItem.dataset.id = task ID for CRUD operation

3.9 — Event Listeners Setup

Example

// ===== EVENT LISTENERS ===== // Add task on button click addBtn.addEventListener('click', function () { if (addTask(taskInput.value)) { taskInput.value = ''; taskInput.focus(); } }); // Add task on Enter key taskInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') { if (addTask(taskInput.value)) { taskInput.value = ''; } } }); // Filter buttons filterBtns.forEach(btn => { btn.addEventListener('click', function () { setFilter(this.dataset.filter); }); }); // Clear completed clearCompletedBtn.addEventListener('click', clearCompleted); // ===== INITIALIZE ===== loadFromStorage(); renderTasks();

Output

// App Initialization:
// 1. loadFromStorage() → Load tasks array from localStorage
// 2. renderTasks() → DOM mein tasks display
// Ready for user interaction!

Complete Source Code (app.js)

Yahan poora JavaScript code ek saath hai — copy-paste ready:

Example

// ============================================ // TASK SCHEDULER — Complete JavaScript Code // Author: WoHoTech | 2026 // ============================================ // ===== STATE ===== let tasks = []; let currentFilter = 'all'; const STORAGE_KEY = 'taskScheduler_tasks'; // ===== DOM REFERENCES ===== const taskInput = document.getElementById('taskInput'); const addBtn = document.getElementById('addBtn'); const taskList = document.getElementById('taskList'); const pendingCount = document.getElementById('pendingCount'); const clearCompletedBtn = document.getElementById('clearCompletedBtn'); const filterBtns = document.querySelectorAll('.filter-btn'); // ===== LOCAL STORAGE ===== function saveToStorage() { localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks)); } function loadFromStorage() { const stored = localStorage.getItem(STORAGE_KEY); if (stored) { try { tasks = JSON.parse(stored); } catch (error) { console.error('Error parsing stored tasks:', error); tasks = []; } } } // ===== HELPER: XSS Prevention ===== function escapeHTML(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } // ===== CREATE ===== function addTask(text) { const trimmedText = text.trim(); if (trimmedText === '') { alert('Please enter a task!'); return false; } const isDuplicate = tasks.some( task => task.text.toLowerCase() === trimmedText.toLowerCase() ); if (isDuplicate) { alert('This task already exists!'); return false; } const newTask = { id: Date.now(), text: trimmedText, completed: false, createdAt: new Date().toISOString() }; tasks.unshift(newTask); saveToStorage(); renderTasks(); return true; } // ===== READ / RENDER ===== function getFilteredTasks() { switch (currentFilter) { case 'active': return tasks.filter(task => !task.completed); case 'completed': return tasks.filter(task => task.completed); default: return tasks; } } function renderTasks() { const filtered = getFilteredTasks(); if (filtered.length === 0) { taskList.innerHTML = ` <li class="empty-state"> ${currentFilter === 'all' ? '✨ No tasks yet. Add one above!' : currentFilter === 'active' ? '🎉 All tasks completed!' : '📝 No completed tasks yet.'} </li> `; } else { taskList.innerHTML = filtered .map(task => ` <li class="task-item ${task.completed ? 'completed' : ''}" data-id="${task.id}"> <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''} /> <span class="task-text">${escapeHTML(task.text)}</span> <button class="delete-btn" title="Delete task">🗑️</button> </li> `) .join(''); } const pending = tasks.filter(task => !task.completed).length; pendingCount.textContent = pending; } // ===== UPDATE ===== function toggleTask(id) { const task = tasks.find(task => task.id === id); if (task) { task.completed = !task.completed; saveToStorage(); renderTasks(); } } // ===== DELETE ===== function deleteTask(id) { tasks = tasks.filter(task => task.id !== id); saveToStorage(); renderTasks(); } function clearCompleted() { const completedCount = tasks.filter(t => t.completed).length; if (completedCount === 0) return; const confirmed = confirm(`Delete ${completedCount} completed task(s)?`); if (confirmed) { tasks = tasks.filter(task => !task.completed); saveToStorage(); renderTasks(); } } // ===== FILTER ===== function setFilter(filter) { currentFilter = filter; filterBtns.forEach(btn => { btn.classList.toggle('active', btn.dataset.filter === filter); }); renderTasks(); } // ===== EVENT DELEGATION ===== taskList.addEventListener('click', function (e) { const taskItem = e.target.closest('.task-item'); if (!taskItem) return; const taskId = Number(taskItem.dataset.id); if (e.target.classList.contains('task-checkbox')) { toggleTask(taskId); return; } if (e.target.classList.contains('delete-btn')) { deleteTask(taskId); return; } }); // ===== EVENT LISTENERS ===== addBtn.addEventListener('click', function () { if (addTask(taskInput.value)) { taskInput.value = ''; taskInput.focus(); } }); taskInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') { if (addTask(taskInput.value)) { taskInput.value = ''; } } }); filterBtns.forEach(btn => { btn.addEventListener('click', function () { setFilter(this.dataset.filter); }); }); clearCompletedBtn.addEventListener('click', clearCompleted); // ===== INITIALIZE APP ===== loadFromStorage(); renderTasks(); console.log('✅ Task Scheduler initialized successfully!');

Output

✅ Task Scheduler initialized successfully!
// App is ready — tasks loaded from localStorage (if any exist)

How localStorage Works in This Project

localStorage limitations:

Maximum ~5MB storage per origin
Only strings can be stored (that's why JSON.stringify is necessary)
Synchronous API — IndexedDB is better for large data
Follows same-origin policy

Key Takeaways

State-Driven Rendering — Always maintain a central state (array/object) and render the UI from state. Avoid direct DOM manipulation.

localStorage for Persistence — The JSON.stringify() and JSON.parse() combo is perfect for persisting simple data. Always use try-catch when parsing.

Event Delegation Pattern — For dynamic elements, attach a single listener to the parent. Use e.target.closest() to find the parent element and data-* attributes for context.

Input Validation is Essential — Handle empty strings, duplicates, and edge cases before state updates. Give users clear feedback (alert/message).

XSS Prevention — Always escape user-generated content before injecting into innerHTML. The textContent approach is simple and effective.

Unique IDs with Date.now() — Date.now() is sufficient for simple projects. For production, use crypto.randomUUID() for guaranteed uniqueness.

Separation of Concerns — Storage logic, render logic, aur event handling alag-alag functions mein rakho. Code readable aur testable banta hai.

Filter Without Mutating — Array.filter() doesn't modify the original array; it returns a new array. This is a core principle of functional programming — always work with copies.

Frequently Asked Questions (FAQ)

Q1: Tasks disappear after page refresh — what's wrong?

Answer: This happens when loadFromStorage() is not being called during app initialization. Check that these two lines exist at the end of the script:

javascript example

loadFromStorage();  // Load from localStorage into the tasks array
renderTasks();      // Render from array to DOM

If localStorage.getItem() returns null, then JSON.parse(null) can cause an error — so always check first:

javascript example

const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {  // null check important hai
  tasks = JSON.parse(stored);
}

Q2: Event delegation isn't working — click doesn't work on newly added tasks?

Answer: Common mistakes:

Listener is attached on individual li elements instead of parent ul — new elements won't have the listener
e.target is being checked directly — if a nested element (like span) is clicked then e.target will be that element, not li

Fix: Always use .closest():

Example

// ❌ Wrong — only works if li itself is clicked taskList.addEventListener('click', (e) => { if (e.target.classList.contains('task-item')) { ... } }); // ✅ Correct — works even if child element is clicked taskList.addEventListener('click', (e) => { const taskItem = e.target.closest('.task-item'); if (!taskItem) return; // Now taskItem is guaranteed to be the li element });

Q3: How much data can be stored in localStorage? Should it be used in production apps?

Answer: The localStorage limit is typically 5MB per origin. It's perfect for simple apps (todo, preferences, cache). But in production, consider:

Scenario	Recommendation
Small data (< 100 items)	✅ localStorage fine hai
Large datasets	❌ Use IndexedDB
Sensitive data (passwords)	❌ Never in localStorage
Cross-device sync needed	❌ Backend database needed
Offline-first app	✅ localStorage + Service Worker

localStorage is synchronous — if you read/write too much data, it can block the main thread. IndexedDB is an asynchronous alternative for complex apps.

Next Steps — Extend This Project

Add these features for your portfolio:

Edit task — Double-click pe inline editing
Drag & drop reordering
Due dates — Date picker + overdue highlighting
Categories/Tags — Color-coded task groups
Dark mode toggle
Export to JSON/CSV

This project solidifies your JavaScript fundamentals. CRUD, localStorage, event delegation, and state management — all these concepts follow the same patterns in React/Vue too, just with different syntax.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, mini, projects, task

Continue learning this concept

Mini ProjectsBuild a JavaScript Calculator - Step by Step Project TutorialLearn to build a fully functional calculator in JavaScript with operator logic, decimal support, keyboard input, and clean UI. Perfect beginner project.Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.Mini ProjectsBuild a JavaScript Counter Application - Step by Step Project TutorialLearn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.Mini ProjectsBuild a JavaScript Digital Clock - Step by Step Project TutorialLearn to build a live digital clock in JavaScript using Date object, setInterval, 12/24-hour toggle, AM/PM display, and smooth CSS styling.Mini ProjectsBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialLearn to build an interactive resume builder in JavaScript that generates a live HTML preview as you fill out form fields, with print and PDF export support.Mini ProjectsBuild a JavaScript Email Validator - Step by Step Project TutorialLearn to build an email validator in JavaScript using regex, real-time feedback, common domain suggestions, and bulk validation. A great regex and DOM project.

PreviousJavaScript Student Grade Calculator — Arrays & Logic Project 2026 NextJavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026

JavaScript Notes

JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026

Why Build This Project?

Task Scheduler is a classic frontend project that is repeatedly asked in interviews. From this you will learn:

CRUD — Create, Read, Update, Delete operations
localStorage — Persist data in browser (data remains even after page refresh)
Event Delegation — Efficiently handle dynamic elements
Filtering — Show All, Active, Completed tasks
Clean Architecture — State-driven rendering pattern

Features List

Feature	Description
➕ Add Task	Add a new task from the input field
✅ Complete Task	Mark task as done (toggle)
🗑️ Delete Task	Permanently remove a task
🔍 Filter Tasks	All / Active / Completed filter
💾 Persist Data	Save/load data from localStorage
📊 Task Counter	Pending tasks ka count display
⚡ Event Delegation	Single listener for dynamic items
🛡️ Input Validation	Prevent empty input

Step 1: HTML Structure

First, let's build our HTML skeleton. It's semantic and accessible:

html example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Task Scheduler — JavaScript Project</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="app-container">
    <header class="app-header">
      <h1>📋 Task Scheduler</h1>
      <p class="task-counter">
        <span id="pendingCount">0</span> tasks pending
      </p>
    </header>

    <div class="input-section">
      <input
        type="text"
        id="taskInput"
        placeholder="Add a new task..."
        maxlength="100"
        autocomplete="off"
      />
      <button id="addBtn" type="button">Add Task</button>
    </div>

    <div class="filter-section">
      <button class="filter-btn active" data-filter="all">All</button>
      <button class="filter-btn" data-filter="active">Active</button>
      <button class="filter-btn" data-filter="completed">Completed</button>
    </div>

    <ul id="taskList" class="task-list"></ul>

    <footer class="app-footer">
      <button id="clearCompletedBtn">Clear Completed</button>
    </footer>
  </div>

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

Key points:

data-filter attributes on filter buttons — useful for event delegation
maxlength="100" — input validation at HTML level
Semantic elements: header, footer, ul, li

Step 2: CSS Styling

Clean, modern styling jo responsive bhi hai:

css example

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

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
}

.app-container {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.app-header h1 { font-size: 1.8rem; color: #333; }
.task-counter { color: #888; margin-top: 4px; font-size: 0.9rem; }

.input-section {
  display: flex;
  gap: 8px;
  margin: 24px 0 16px;
}

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

#taskInput:focus { outline: none; border-color: #667eea; }

#addBtn {
  padding: 12px 24px;
  background: #667eea;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

#addBtn:hover { background: #5a6fd6; }

.filter-section { display: flex; gap: 8px; margin-bottom: 16px; }

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  background: #f9f9f9;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.filter-btn.active { background: #667eea; color: #fff; border-color: #667eea; }

.task-list { list-style: none; }

.task-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
  gap: 12px;
}

.task-item:hover { background: #f8f9ff; }
.task-item.completed .task-text { text-decoration: line-through; color: #aaa; }

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

.task-item button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.task-item button:hover { background: #fee; }

.app-footer { margin-top: 16px; text-align: right; }

#clearCompletedBtn {
  padding: 8px 16px;
  background: none;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

#clearCompletedBtn:hover { background: #e74c3c; color: #fff; }

Step 3: JavaScript — Complete Implementation

Now comes the main part. We will write JavaScript step-by-step.

3.1 — State & DOM References

javascript example

// ===== STATE =====
let tasks = [];
let currentFilter = 'all';

// ===== DOM REFERENCES =====
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
const pendingCount = document.getElementById('pendingCount');
const clearCompletedBtn = document.getElementById('clearCompletedBtn');
const filterBtns = document.querySelectorAll('.filter-btn');

Explanation: We maintain a tasks array as our single source of truth. DOM elements are referenced at the top so we don't have to query them repeatedly.

3.2 — localStorage Functions (Persist Data)

javascript example

// ===== LOCAL STORAGE =====
const STORAGE_KEY = 'taskScheduler_tasks';

function saveToStorage() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

function loadFromStorage() {
  const stored = localStorage.getItem(STORAGE_KEY);
  if (stored) {
    try {
      tasks = JSON.parse(stored);
    } catch (error) {
      console.error('Error parsing stored tasks:', error);
      tasks = [];
    }
  }
}

Output

// Gets saved in browser localStorage:
// Key: "taskScheduler_tasks"
// Value: '[{"id":1,"text":"Buy groceries","completed":false}, ...]'

Important: Always wrap JSON.parse() in a try-catch — if localStorage has corrupted data, the app won't crash.

3.3 — CREATE Operation (Add Task)

Example

Output

// After adding "Buy groceries":
// tasks = [
//   { id: 1718123456789, text: "Buy groceries", completed: false, createdAt: "2026-06-11T..." }
// ]

Key decisions:

Date.now() generates a unique ID (timestamp-based)
unshift() — new task appears at the top
Duplicate check case-insensitive hai

3.4 — READ Operation (Render Tasks)

Example

Output

// DOM Output (3 tasks, 1 completed):
// ┌──────────────────────────────────────┐
// │ ☐ Learn JavaScript          🗑️      │
// │ ☐ Build portfolio           🗑️      │
// │ ☑ Buy groceries (strikethrough) 🗑️  │
// └──────────────────────────────────────┘
// Counter: "2 tasks pending"

Security note: The escapeHTML() function prevents XSS attacks. If a user tries to inject <script> in the input, it won't execute.

3.5 — UPDATE Operation (Toggle Complete)

Example

// ===== UPDATE ===== function toggleTask(id) { const task = tasks.find(task => task.id === id); if (task) { task.completed = !task.completed; saveToStorage(); renderTasks(); } }

Output

// Before toggle: { id: 123, text: "Buy groceries", completed: false }
// After toggle:  { id: 123, text: "Buy groceries", completed: true }
// Visual: Text gets strikethrough, checkbox becomes checked

3.6 — DELETE Operation

Example

Output

// Before delete: tasks.length = 5
// After deleteTask(123): tasks.length = 4
// After clearCompleted(): All completed tasks removed

3.7 — Filter Logic

Example

Output

// Filter "active" → Shows only tasks where completed === false
// Filter "completed" → Shows only tasks where completed === true
// Filter "all" → Shows everything

3.8 — Event Delegation (Efficient Event Handling)

javascript example

// ===== EVENT DELEGATION =====
// Single listener on parent handles all child clicks
taskList.addEventListener('click', function (e) {
  const taskItem = e.target.closest('.task-item');
  if (!taskItem) return;

  const taskId = Number(taskItem.dataset.id);

  // Handle checkbox click
  if (e.target.classList.contains('task-checkbox')) {
    toggleTask(taskId);
    return;
  }

  // Handle delete button click
  if (e.target.classList.contains('delete-btn')) {
    deleteTask(taskId);
    return;
  }
});

Why Event Delegation?

Output

// Click event bubbles up:
// 🗑️ button click → .task-item → #taskList (listener here catches it)
// e.target = clicked element (button)
// e.target.closest('.task-item') = parent li element
// taskItem.dataset.id = task ID for CRUD operation

3.9 — Event Listeners Setup

Example

Output

// App Initialization:
// 1. loadFromStorage() → Load tasks array from localStorage
// 2. renderTasks() → DOM mein tasks display
// Ready for user interaction!

Complete Source Code (app.js)

Yahan poora JavaScript code ek saath hai — copy-paste ready:

Example

Output

✅ Task Scheduler initialized successfully!
// App is ready — tasks loaded from localStorage (if any exist)

How localStorage Works in This Project

localStorage limitations:

Maximum ~5MB storage per origin
Only strings can be stored (that's why JSON.stringify is necessary)
Synchronous API — IndexedDB is better for large data
Follows same-origin policy

Key Takeaways

State-Driven Rendering — Always maintain a central state (array/object) and render the UI from state. Avoid direct DOM manipulation.

localStorage for Persistence — The JSON.stringify() and JSON.parse() combo is perfect for persisting simple data. Always use try-catch when parsing.

Event Delegation Pattern — For dynamic elements, attach a single listener to the parent. Use e.target.closest() to find the parent element and data-* attributes for context.

Input Validation is Essential — Handle empty strings, duplicates, and edge cases before state updates. Give users clear feedback (alert/message).

XSS Prevention — Always escape user-generated content before injecting into innerHTML. The textContent approach is simple and effective.

Unique IDs with Date.now() — Date.now() is sufficient for simple projects. For production, use crypto.randomUUID() for guaranteed uniqueness.

Separation of Concerns — Storage logic, render logic, aur event handling alag-alag functions mein rakho. Code readable aur testable banta hai.

Filter Without Mutating — Array.filter() doesn't modify the original array; it returns a new array. This is a core principle of functional programming — always work with copies.

Frequently Asked Questions (FAQ)

Q1: Tasks disappear after page refresh — what's wrong?

Answer: This happens when loadFromStorage() is not being called during app initialization. Check that these two lines exist at the end of the script:

javascript example

loadFromStorage();  // Load from localStorage into the tasks array
renderTasks();      // Render from array to DOM

If localStorage.getItem() returns null, then JSON.parse(null) can cause an error — so always check first:

javascript example

const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {  // null check important hai
  tasks = JSON.parse(stored);
}

Q2: Event delegation isn't working — click doesn't work on newly added tasks?

Answer: Common mistakes:

Listener is attached on individual li elements instead of parent ul — new elements won't have the listener
e.target is being checked directly — if a nested element (like span) is clicked then e.target will be that element, not li

Fix: Always use .closest():

Example

Q3: How much data can be stored in localStorage? Should it be used in production apps?

Answer: The localStorage limit is typically 5MB per origin. It's perfect for simple apps (todo, preferences, cache). But in production, consider:

Scenario	Recommendation
Small data (< 100 items)	✅ localStorage fine hai
Large datasets	❌ Use IndexedDB
Sensitive data (passwords)	❌ Never in localStorage
Cross-device sync needed	❌ Backend database needed
Offline-first app	✅ localStorage + Service Worker

localStorage is synchronous — if you read/write too much data, it can block the main thread. IndexedDB is an asynchronous alternative for complex apps.

Next Steps — Extend This Project

Add these features for your portfolio:

Edit task — Double-click pe inline editing
Drag & drop reordering
Due dates — Date picker + overdue highlighting
Categories/Tags — Color-coded task groups
Dark mode toggle
Export to JSON/CSV

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, mini, projects, task

Continue learning this concept

PreviousJavaScript Student Grade Calculator — Arrays & Logic Project 2026 NextJavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026