JavaScript To-Do List Project: State-Driven UI ఆర్కిటెక్చర్ (Mini Project)

చాలా వెబ్‌సైట్లు మరియు ట్యుటోరియల్స్ నేర్పించే అతిపెద్ద తప్పు: బటన్ నొక్కగానే నేరుగా document.createElement("li") చేసి స్క్రీన్ పై అతికించేయడం.

ఒక టాస్క్‌ని కేవలం సాదా స్ట్రింగ్ ("బ్రెడ్ కొనాలి") గా నిల్వ చేయకూడదు. ఎందుకంటే యూజర్ ఒకే పేరుతో రెండు వేర్వేరు పనులు రాయవచ్చు. కాబట్టి ప్రతి టాస్క్‌కి ఒక ప్రత్యేక గుర్తింపు (Unique Identity) ఉండాలి:

మన To-Do లిస్ట్ అంతా జావాస్క్రిప్ట్ లోని 3 శక్తివంతమైన అరే మెథడ్స్ చుట్టూనే తిరుగుతుంది:

• Create (చేర్చడం): tasks.push(newTask) ➔ అరే చివరిలో కొత్త పనిని చేరుస్తుంది.
• Update (పూర్తయినట్లు మార్చడం): tasks.map(t => t.id === targetId ? {...t, completed: !t.completed} : t) ➔ సంబంధిత పని యొక్క స్థితిని తిప్పివేస్తుంది (Toggle).
• Delete (తొలగించడం): tasks.filter(t => t.id !== targetId) ➔ ఆ ఐడీ లేని మిగిలిన పనులను మాత్రమే ఉంచి, ఆ ఒక్కదాన్ని తుడిచివేస్తుంది!

ఎటువంటి అనవసరమైన పొడవాటి కోడ్ లేకుండా, కేవలం 16 లైన్లలో Add, Toggle, మరియు Delete ఆపరేషన్లను నిర్వహించే స్వచ్ఛమైన కాంపాక్ట్ ఇంజిన్ ఇది:

// 1. సెంట్రల్ స్టేట్ (Single Source of Truth)
let tasks = [];

// 2. టాస్క్ జోడించడం (Create)
function addTask(text) {
  if (!text || !text.trim()) return false;
  tasks.push({ id: Date.now(), text: text.trim(), completed: false });
  return true;
}

// 3. పూర్తి అయినట్లు/కాకపోయినట్లు మార్చడం (Toggle Update)
function toggleTask(id) {
  tasks = tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t);
}

// 4. టాస్క్ తొలగించడం (Delete via Filter)
function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
}

// డెమో రన్ & టెస్టింగ్
addTask("JavaScript DOM ప్రాక్టీస్ చేయాలి");
console.log("టాస్క్ చేరింది:", tasks[0].text, "| పూర్తయిందా?:", tasks[0].completed);

toggleTask(tasks[0].id);
console.log("టిక్ కొట్టిన తర్వాత:", tasks[0].completed);

deleteTask(tasks[0].id);
console.log("డిలీట్ తర్వాత మొత్తం టాస్క్‌లు:", tasks.length);

• కేవలం 3 స్వచ్ఛమైన ఫంక్షన్లతో యాప్ యొక్క మొత్తం కోర్ లాజిక్ సిద్ధమైంది.
• deleteTask లో filter() వాడటం వల్ల ఒరిజినల్ అరే సురక్షితంగా మార్పు చెందుతుంది.

బిగినర్స్ ప్రాజెక్టులు ఇంటర్వ్యూలలో తిరస్కరణకు గురికావడానికి గల ప్రధాన కారణాలు:

యూజర్లు తమ పనులలో ఎన్ని మిగిలి ఉన్నాయి, ఎన్ని పూర్తయ్యాయి అని చూసే లైవ్ కౌంటర్ మరియు ఫిల్టర్ ఇంజిన్ (All / Active / Completed):

// ఫిల్టరింగ్ మరియు లైవ్ కౌంటర్ అనలిటిక్స్ ఫంక్షన్
function getTaskAnalytics(taskList, filterType = "all") {
  const total = taskList.length;
  const completedCount = taskList.filter(t => t.completed).length;
  const activeCount = total - completedCount;

  // ఫిల్టర్ ప్రకారం అవసరమైన పనులను మాత్రమే చూపించడం
  let filtered = taskList;
  if (filterType === "active") filtered = taskList.filter(t => !t.completed);
  if (filterType === "completed") filtered = taskList.filter(t => t.completed);

  return {
    total,
    completed: completedCount,
    active: activeCount,
    visibleTasks: filtered.map(t => t.text)
  };
}

// శాంపిల్ డేటా
const myTasks = [
  { id: 1, text: "HTML/CSS పూర్తి చేయడం", completed: true },
  { id: 2, text: "JavaScript ప్రాజెక్ట్ రాయడం", completed: false },
  { id: 3, text: "AdSense అప్రూవల్ చెక్ చేయడం", completed: false }
];

console.log("యాక్టివ్ (చేయాల్సినవి):", getTaskAnalytics(myTasks, "active"));
console.log("పూర్తయినవి:", getTaskAnalytics(myTasks, "completed"));

ఈ ప్రాజెక్ట్ ఆధారంగా టెక్ ఇంటర్వ్యూలలో అడిగే కీలక ప్రశ్నలు:

1. DOM లో నేరుగా మార్పులు చేయకుండా State-Driven ఆర్కిటెక్చర్ ఎందుకు వాడాలి?
2. టాస్క్‌లను డిలీట్ చేయడానికి splice() కంటే filter() ఎందుకు మెరుగైనది?
3. కొత్తగా చేర్చిన టాస్క్‌ల డిలీట్ బటన్‌లకు కూడా ఈవెంట్ లిజనర్లు స్వయంచాలకంగా ఎలా పనిచేస్తాయి?
4. టాస్క్ ఐడీ కోసం Date.now() ఎందుకు వాడతాం?
5. యూజర్ బ్రౌజర్ రీఫ్రెష్ చేసినా ఈ టాస్క్‌లు పోకుండా ఉండాలంటే ఏ బ్రౌజర్ ఫీచర్ వాడాలి?
6. యూజర్ ఎంట్రీ చేసిన టెక్స్ట్‌ని డిస్‌ప్లే చేసేటప్పుడు XSS దాడి జరగకుండా ఎలాంటి జాగ్రత్త తీసుకోవాలి?