Guest Mode:Sign in with Google to permanently link this practical to your student record.

BCA Student Stories & UpdatesLive

Live GitHub Pages

You

Your StorySign in & share

Er. ManojActive nowPages

Day 32Advanced JavaScript & Browser APIs2.5 Hours Practical

Push to GitHub to Complete

Persistent Task & To-Do List with LocalStorage CRUD Mechanics

CRUD is the foundational data manipulation pattern powering all modern software. In this lesson, you will build an interactive Task Manager where creating, toggling completion, and deleting items updates both the in-memory array and localStorage synchronously.

Interactive Learning Roadmap

Day 32 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Master the full CRUD (Create, Read, Update, Delete) state pattern in vanilla JavaScript.

✔Maintain an in-memory array of task objects: [{ id, text, completed, createdAt }].

✔Synchronize the task array to localStorage on every state change using a reusable saveTasks() helper.

✔Render dynamic task lists with completed strike-through toggling and delete buttons.

✔Implement task counters showing Total, Active, and Completed task metrics.

Day 32 MasterclassAdvanced JavaScript & Browser APIs

Persistent Task & To-Do List with LocalStorage CRUD Mechanics — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

Single Source of Truth: Keep an in-memory JavaScript array as the state; render DOM from this array.

Persistent Mutation: Every time the array is modified (push, filter, map), call saveTasks() immediately.

Unique Identifiers: Use Date.now() or crypto.randomUUID() to give each task a unique ID for robust updates.

Declarative Rendering: Clear the list container (list.innerHTML = "") and reconstruct rows from the array.

Empty State Handling: Display a friendly "No tasks found! Add your first practical assignment" message when the list is empty.

Dimaag Mein Bithane Ka Model

"Think of the JavaScript array like a university attendance register: whenever a student is added or marked present, you update the register and immediately stamp it into the permanent archive (localStorage)."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

Observe how a single array powers state, rendering, and persistence across all user operations.

Full CRUD Architecture with LocalStorage Persistencehtml

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 20px; }
    .app { max-width: 480px; margin: auto; background: #0c1328; border: 1px solid #1e293b; padding: 20px; border-radius: 12px; }
    .input-row { display: flex; gap: 8px; margin-bottom: 16px; }
    input[type="text"] { flex: 1; padding: 10px; border-radius: 6px; border: 1px solid #334155; background: #060c18; color: #fff; }
    button { padding: 10px 16px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    ul { list-style: none; padding: 0; margin: 0; }
    li { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #1e293b; margin-bottom: 8px; border-radius: 6px; }
    li.done span { text-decoration: line-through; opacity: 0.6; }
    .del-btn { background: #ef4444; padding: 4px 8px; font-size: 12px; }
  </style>
</head>
<body>
  <div class="app">
    <h3>📋 BCA Assignment Tracker</h3>
    <div class="input-row">
      <input type="text" id="taskInput" placeholder="Add new practical task..." />
      <button id="addBtn">Add</button>
    </div>
    <ul id="taskList"></ul>
  </div>

  <script>
    let tasks = JSON.parse(localStorage.getItem("bca_crud_tasks")) || [];

    function saveAndRender() {
      localStorage.setItem("bca_crud_tasks", JSON.stringify(tasks));
      const list = document.getElementById("taskList");
      list.innerHTML = "";

      if (tasks.length === 0) {
        list.innerHTML = "<li style='justify-content:center;opacity:0.5;'>No assignments pending 🎉</li>";
        return;
      }

      tasks.forEach((t) => {
        const li = document.createElement("li");
        if (t.done) li.classList.add("done");

        li.innerHTML = '<span onclick="toggleTask(' + t.id + ')" style="cursor:pointer;">' + t.text + '</span>' +
          '<button class="del-btn" onclick="deleteTask(' + t.id + ')">Delete</button>';
        list.appendChild(li);
      });
    }

    document.getElementById("addBtn").addEventListener("click", () => {
      const input = document.getElementById("taskInput");
      const text = input.value.trim();
      if (!text) return;
      tasks.push({ id: Date.now(), text, done: false });
      input.value = "";
      saveAndRender();
    });

    window.toggleTask = (id) => {
      tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
      saveAndRender();
    };

    window.deleteTask = (id) => {
      tasks = tasks.filter(t => t.id !== id);
      saveAndRender();
    };

    saveAndRender();
  </script>
</body>
</html>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks

Interactive Coding TestAuto-Evaluates as you type

Day 32 Practical Task Test Studio

Test Score:0 / 2 Passed

1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests

Task 1Implement Array Filter for Metrics

Calculate done tasks using tasks.filter(t => t.done).length and update the DOM element.

⏳ WAITING

Task 2Delete Task from Array and Sync

Implement task deletion using tasks = tasks.filter(t => t.id !== id) followed by localStorage save.

⏳ WAITING

2. Type HTML & CSS Code:index.html

index.html

⚡ Real-Time Testing Active

Tab inserts 2 spaces • Live DOM refresh417 chars

Live Browser Output:

🔒 http://localhost:5500/index.html

Live

Renders live HTML & CSS typed on the left.

Interactive Bug Detective

Direct Array Mutation Without LocalStorage Re-save Bug

Tap or click on the exact line below that contains the error:

Click any code line

⚠️ Broken Code Inspector

Tap buggy line

function markAsDone(taskId) {

const item = tasks.find(t => t.id === taskId);

if (item) {

item.done = true; // ✅ In-memory array updated

renderList(); // ✅ UI updates on screen

// ❌ Bug: Forgot to re-save to localStorage!

// When the user reloads the page, task reverts to incomplete!

}

Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Modifying an in-memory object inside an array does not automatically notify localStorage. You must explicitly invoke localStorage.setItem() whenever state mutations occur, otherwise all changes are lost on page refresh.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 index.html

BCA Semester 1 Practical Sprint Tracker with Priority Badges

•Create a full-featured CRUD Task Manager with Task Title, Subject (BCS-011, BCSL-013, BCS-012), and Priority (High, Medium, Low).
•Persist all assignments in localStorage with status toggles.
•Add a Search Filter input that filters tasks by name in real-time.
•Include a "Clear Completed" button to purge finished assignments.

Submission Evaluation Criteria: Push working index.html and app.js to your GitHub repository under day-32.

Exact Assignment Solution Code: index.html

Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BCA Day 32 - Practical Tracker</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 24px; }
    .card { max-width: 540px; margin: auto; background: #0c1328; border: 1px solid #1e293b; padding: 24px; border-radius: 12px; }
    .form-grid { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; margin-bottom: 16px; }
    input, select { padding: 10px; background: #060c18; border: 1px solid #334155; color: #fff; border-radius: 6px; }
    button { padding: 10px 16px; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
    .badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: bold; }
    .badge-High { background: #ef4444; color: #fff; }
    .badge-Medium { background: #f59e0b; color: #000; }
    .badge-Low { background: #10b981; color: #fff; }
    ul { list-style: none; padding: 0; margin-top: 16px; }
    li { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #1e293b; margin-bottom: 8px; border-radius: 6px; }
    li.done .title { text-decoration: line-through; opacity: 0.5; }
    .del-btn { background: #dc2626; padding: 4px 8px; font-size: 12px; }
  </style>
</head>
<body>
  <div class="card">
    <h2>🎯 BCA Practical Sprint Tracker</h2>
    <div class="form-grid">
      <input type="text" id="taskTitle" placeholder="Task name..." />
      <select id="priority">
        <option value="High">High</option>
        <option value="Medium">Medium</option>
        <option value="Low">Low</option>
      </select>
      <button id="addBtn">Add Task</button>
    </div>
    <ul id="taskList"></ul>
  </div>

  <script>
    let tasks = JSON.parse(localStorage.getItem("bca_sprint_tasks")) || [];

    function saveAndRender() {
      localStorage.setItem("bca_sprint_tasks", JSON.stringify(tasks));
      const list = document.getElementById("taskList");
      list.innerHTML = "";

      tasks.forEach((t) => {
        const li = document.createElement("li");
        if (t.done) li.classList.add("done");
        li.innerHTML = '<div>' +
          '<input type="checkbox" ' + (t.done ? "checked" : "") + ' onchange="toggleTask(' + t.id + ')" />' +
          '<span class="title" style="margin-left: 8px;">' + t.title + '</span>' +
          '<span class="badge badge-' + t.priority + '">' + t.priority + '</span>' +
          '</div>' +
          '<button class="del-btn" onclick="deleteTask(' + t.id + ')">Delete</button>';
        list.appendChild(li);
      });
    }

    document.getElementById("addBtn").addEventListener("click", () => {
      const titleInput = document.getElementById("taskTitle");
      const priority = document.getElementById("priority").value;
      const title = titleInput.value.trim();
      if (!title) return;
      tasks.push({ id: Date.now(), title, priority, done: false });
      titleInput.value = "";
      saveAndRender();
    });

    window.toggleTask = (id) => {
      tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
      saveAndRender();
    };

    window.deleteTask = (id) => {
      tasks = tasks.filter(t => t.id !== id);
      saveAndRender();
    };

    saveAndRender();
  </script>
</body>
</html>

Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Which Array method is best suited to delete an item with id: 101 from an array of task objects without mutating the original array?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code

mainhtml-css-projects

~/html-css-projects

mkdir day-32

Create a new project folder (day-32)

cd day-32

Change working directory to day-32

git checkout -b feature/day-32-crud-todo

git add index.html

git commit -m "feat(day-32): build persistent todo app with localstorage crud mechanics"

Commit staged changes with a descriptive message

git push origin feature/day-32-crud-todo

Push local commits directly to your remote GitHub repository

⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)

Completion Prerequisites VerificationIncomplete Steps

Google Login

✔ Required

VS Code Implementation

Step 4 Viva Check

Own GitHub Project

Required

Exact GitHub Setup Guide & Expected Structure

Day 32 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository

html-css-projects

Must be set to Public

2. Exact FolderNEW

day-32/ or bca-day-32/

Create inside repo root

3. Exact File NameREQUIRED

index.html

⚠️ No spaces or custom names

4. What to Submit Below

https://github.com/YOU/html-css-projects

Or direct link to index.html

Terminal Commands to Create & Push Day 32

mainhtml-css-projects

# 1. Enter your repository directory

cd html-css-projects

Change working directory to html-css-projects

# 2. Create the exact folder for Day 32

mkdir day-32

Create a new project folder (day-32)

cd day-32

Change working directory to day-32

# 3. Create your code file: index.html

# (Write your Day 32 homework code inside index.html)

# 4. Save, stage, commit and push to GitHub:

git add .

Stage all modified files and new assets for commit

10$

git commit -m "Day 32: Persistent Task & To-Do List with LocalStorage CRUD Mechanics"

Commit staged changes with a descriptive message

11$

git push origin main

Push local commits directly to your remote GitHub repository

⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)

How to Avoid "Could not find your practical code file" Errors:

1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.

2.Separate Day Folders: Create a new folder day-32/ for today so you don't overwrite previous days.

3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.

4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.

📁 github.com/YOUR_USERNAME/html-css-projects

Branch: main

README.md# BCA Practical Portfolio overview

day-01/Day 1 Prior Lesson— HTML5 Boilerplate & First Webpage

└──index.html

day-02/Day 2 Prior Lesson— Heading Hierarchy & Text Formatting

└──index.html

day-03/Day 3 Prior Lesson— Hyperlinks & Accessible Images

└──index.html

day-04/Day 4 Prior Lesson— Lists & Navigation Menus

└──index.html

day-05/Day 5 Prior Lesson— Tables & Tabular Data Presentation

└──index.html

day-06/Day 6 Prior Lesson— Semantic HTML5 Layout

└──index.html

day-07/Day 7 Prior Lesson— HTML Forms & Input Controls

└──index.html

day-08/Day 8 Prior Lesson— HTML5 Form Validation & Regex

└──index.html

day-09/Day 9 Prior Lesson— HTML5 Media: Audio, Video & Embeds

└──index.html

day-10/Day 10 Prior Lesson— Sprint 1 Capstone: Developer Resume

└──index.html

└──styles.css

day-11/Day 11 Prior Lesson— CSS Box Model (Content, Padding, Border, Margin)

└──index.html

day-12/Day 12 Prior Lesson— CSS Display Modes & Document Flow

└──index.html

day-13/Day 13 Prior Lesson— CSS Positioning (Static, Relative, Absolute, Fixed, Sticky)

└──index.html

day-14/Day 14 Prior Lesson— Flexbox: 1D Layouts & Main Axis Alignment

└──index.html

day-15/Day 15 Prior Lesson— Flexbox: Cross Axis Alignment & Flex Items

└──index.html

day-16/Day 16 Prior Lesson— CSS Grid: 2D Layouts & Template Columns

└──index.html

day-17/Day 17 Prior Lesson— CSS Grid: Spanning & Grid Template Areas

└──index.html

day-18/Day 18 Prior Lesson— Responsive Design & Media Queries (Mobile-First)

└──index.html

day-19/Day 19 Prior Lesson— CSS Transitions & Micro-Interactions

└──index.html

day-20/Day 20 Prior Lesson— Sprint 2 Capstone: Responsive University Campus Portal

└──index.html

└──styles.css

day-21/Day 21 Prior Lesson— JavaScript Introduction: <script>, Variables & Types

└──index.html

day-22/Day 22 Prior Lesson— JavaScript Operators: Arithmetic & Strict Equality

└──index.html

day-23/Day 23 Prior Lesson— Control Flow: if-else if & switch Statements

└──index.html

day-24/Day 24 Prior Lesson— Loops & Iteration: for, while & for...of

└──index.html

day-25/Day 25 Prior Lesson— Functions: Declarations, Arrow Syntax & Scope

└──index.html

day-26/Day 26 Prior Lesson— Array Methods: push, map, filter & reduce

└──index.html

day-27/Day 27 Prior Lesson— Objects: Key-Value Pairs, Nested Data & JSON

└──index.html

day-28/Day 28 Prior Lesson— DOM Selection: querySelector, textContent & Styles

└──index.html

day-29/Day 29 Prior Lesson— DOM Events: addEventListener & preventDefault

└──index.html

day-30/Day 30 Prior Lesson— Sprint 3 Capstone: Interactive Student SGPA & Grade Portal

└──index.html

└──styles.css

day-31/Day 31 Prior Lesson— Day 31 Practice

└──index.html

day-32/✨ CREATE THIS FOLDER FOR TODAY (Day 32)— Day 32 Practice

└──index.htmlMust contain:

Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 32 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 31: Web Storage Architecture: localStorage, sessionStorage & JSON Serialization first.

Complete Day 31 First

Day 31: Web Storage Architecture: localStorage, sessionStorage & JSON Serialization

Curriculum & Practical Systems Authored by Er. Manoj Kumar

NextSem Academy • BCA Practical Learning Portal

BCA Student Stories & UpdatesLive

Persistent Task & To-Do List with LocalStorage CRUD Mechanics

Day 32 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

Persistent Task & To-Do List with LocalStorage CRUD Mechanics — Comprehensive Practical Guide

👨‍🏫3. Teacher Demonstration Code

2. Hands-On Practical Lab: Follow Instructions in VS Code

Day 32 Practical Task Test Studio

Direct Array Mutation Without LocalStorage Re-save Bug

Senior Developer Forensic Analysis:

📝Independent Practice: Assignment

BCA Semester 1 Practical Sprint Tracker with Priority Badges

🎓4. Viva Check: Mandatory Conceptual Test

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Exact GitHub Setup Guide & Expected Structure

Student Learning Dashboard

Guest Student

Computer Competency Test (CBT)100 MCQs

Practical Lesson UpdatesCoding Labs Only

Professional & Social IntegrationsPortfolio & Network