सरल टू‑डू ऐप बनाएं — कदम-दर-कदम (साधारण भाषा)

सरल टू‑डू ऐप बनाएं — कदम-दर-कदम (साधारण भाषा) | Koder.ai

python -m http.server

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>To‑Do App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app" id="app">
      <h1 class="app__title" id="appTitle">My To‑Do List</h1>

      <form class="task-form" id="taskForm">
        <label class="task-form__label" for="taskInput">New task</label>
        <div =>
          
          
            Add

/* Basic page setup */
body {
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  margin: 0;
  padding: 24px;
}

/* Centered app container */
.container {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

ul { list-style: none; padding: 0; margin: 16px 0 0; }

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e7ee;
  border-radius: 8px;
  margin-bottom: 10px;
}

.task-text { flex: 1; }

.done .task-text {
  text-decoration: line-through;
  color: #777;
  opacity: 0.85;
}

button {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover { filter: brightness(0.95); }

const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

function addTask() {
  const text = taskInput.value.trim();

  // Block empty tasks (including ones that are just spaces)
  if (text === '') return;

  const li = document.createElement('li');
  li.textContent = text;
  taskList.appendChild(li);

  // Clear the input and put the cursor back
  taskInput.value = '';
  taskInput.focus();
}

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    addTask();
  }
});

let tasks = [
  { id: 1, text: "Buy milk", done: false },
  { id: 2, text: "Email Sam", done: true }
];

function toggleDone(id) {
  tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

document.querySelector("#taskList").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id);
  if (e.target.matches(".toggle")) toggleDone(id);
  if (e.target.matches(".delete")) deleteTask(id);
});

const STORAGE_KEY = "todo.tasks";

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

saveTasks(tasks);
renderTasks(tasks);

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);
  return saved ? JSON.parse(saved) : [];
}

let tasks = loadTasks();
renderTasks(tasks);

const text = input.value.trim();
addButton.disabled = text === "";

console.log("Adding:", text);
console.log("Current tasks:", tasks);

हम क्या बना रहे हैं (और आप क्या सीखेंगे)

लक्ष्य (समाप्त ऐप क्या करेगा)

आप क्या सीखेंगे (सादा भाषा में)

शुरू करने से पहले क्या चाहिए

चरण 1: ऐप का लक्ष्य और फीचर तय करें

ऐप का एक काम चुनें

ज़रूरी बनाम अच्छा‑हो

स्क्रीन का शब्दों में वर्णन करें

“पूरा” का मतलब परिभाषित करें

चरण 2: प्रोजेक्ट फाइलें सेट करें

1) प्रोजेक्ट फ़ोल्डर बनाएं

2) फ़ोल्डर को एडिटर और ब्राउज़र में खोलें

3) कैसे बदलाव देखेंगे

वैकल्पिक: साधारण लोकल सर्वर उपयोग करें (अवश्यक नहीं पर अच्छा)

चरण 3: पेज की संरचना बनाएं (HTML)

हमें जितना चाहिए उतना ही लेआउट

इसको अपने index.html में पेस्ट करें

चरण 4: दिखने में साफ़ करें (CSS)

एक साधारण केंद्रित कंटेनर से शुरू करें

टास्क स्कैन करने में आसान बनाएं

“Done” का स्पष्ट दिखना जोड़ें

बटन को सुसंगत बनाएं

चरण 5: टास्क जोड़ें (JavaScript बेसिक्स)

बटन और Enter की वायरिंग

यह क्या करता है (साधारण भाषा में)

चरण 6: टास्क को "Done" और हटाना सक्षम करें

टास्क को साधारण डेटा के रूप में स्टोर करें

Done कंट्रोल और Delete बटन जोड़ें

चरण 7: टास्क ऐसे सेव करें कि वे बने रहें (localStorage)

localStorage = ब्राउज़र के अंदर एक छोटा “सेव बॉक्स”

1) हर बार बदलाव के बाद सेव करें

2) पेज शुरू होने पर लोड करें (और रेंडर करें)

चरण 8: टेस्ट और सामान्य बग ठीक करें

एक त्वरित टेस्ट पास (60 सेकंड)

वे एज केस ट्राय करें जो शुरुआती ऐप तोड़ते हैं

तेज़ “कुछ नहीं हो रहा” चेकलिस्ट

असली में क्या हो रहा है पता करने के लिए कंसोल का उपयोग करें

चरण 9: उपयोगकर्ता‑अनुकूल बनाएं (एक्सेसिबिलिटी + मोबाइल)

मोबाइल पर टैप करना आसान बनाएं

लेबल और ARIA जोड़ें (क्या और क्यों)

कीबोर्ड सपोर्ट: Tab + Enter

पठनीयता: कंट्रास्ट और फ़ॉन्ट साइज

चरण 10: कोड साफ़ और व्यवस्थित करें

साधारण फ़ोल्डर स्ट्रक्चर

JavaScript को पढ़ने में आसान बनाएं

एक छोटा README जोड़ें

प्रोजेक्ट का बैकअप लें

चरण 11: ऐप पब्लिश करें और साझा करें

विकल्प 1: GitHub Pages (स्टैटिक साइट्स के लिए बढ़िया)

विकल्प 2: Netlify या Vercel (आसान ड्रैग‑एंड‑ड्रॉप)

साझा करने से पहले त्वरित चेकलिस्ट

अगले कदम: आसान अपग्रेड्स जिन्हें आप ट्राय कर सकते हैं

1) टास्क टेक्स्ट एडिट करें

2) फ़िल्टर्स: All / Active / Done

3) ड्यू डेट्स या सिंपल केटेगरीज़

4) बाद में: localStorage से साधारण बैकएंड पर जाएँ

5) एक अच्छा अगला शुरुआती प्रोजेक्ट

इसको अपने `index.html` में पेस्ट करें