सुव्यवस्थित, कदम-दर-कदम गाइड: फीचर प्लान करें, स्क्रीन बनाएं, लॉजिक जोड़ें, डेटा सेव करें, टेस्ट करें और एक छोटा टू‑डू वेब‑ऐप पब्लिश करें।

जब इस गाइड में मैं “ऐप” कहता/कहती हूँ, तो मेरा मतलब एक छोटा वेब ऐप है: एक पेज जो आप ब्राउज़र में खोलते हैं और जो आपके क्लिक और टाइप पर प्रतिक्रिया देता है। कोई इंस्टॉल नहीं, कोई अकाउंट नहीं, और न ही भारी सेटअप—बस एक सरल प्रोजेक्ट जिसे आप स्थानीय रूप से चला सकते हैं।
आखिर में आपके पास एक टू‑डू ऐप होगा जो ये कर सकेगा:
localStorage का उपयोग करके (ताकि टैब बंद करने पर सब मिट न जाए)यह परफेक्ट या “एंटरप्राइज‑ग्रेड” नहीं होगा, और यही उद्देश्य है। यह एक शुरुआती प्रोजेक्ट है जो ज़रूरी बातें सिखाने के लिए है बिना बहुत सारे टूल्स फेंके।
आप ऐप को कदम दर कदम बनाते हुए फ्रंट‑एंड वेब ऐप्स के मुख्य हिस्से सीखेंगे:
इसे सरल रखें। आपको सिर्फ यह चाहिए:
यदि आप एक फोल्डर बना सकते हैं और कुछ फाइलें एडिट कर सकते हैं, तो आप तैयार हैं।
कोई कोड लिखने से पहले तय करें कि “सफलता” कैसी दिखती है। यह ट्यूटोरियल एक छोटे ऐप के एक स्पष्ट काम के लिए है: उन कार्यों को ट्रैक करना जिन्हें आप करना चाहते हैं।
एक वाक्य का लक्ष्य लिखें जिसे आप बिल्डिंग के दौरान अपने सामने रख सकें:
“यह ऐप मुझे टास्क सूची में आइटम जोड़ने देता है ताकि मैं उन्हें भूल न जाऊँ।”
बस। कैलेंडर, रिमाइंडर, टैग, या अकाउंट जोड़ने का मन करे तो उन विचारों को बाद के लिए रख दें।
दो छोटी सूचियाँ बनाएं:
जरूरी (इस प्रोजेक्ट के लिए):
localStorage इस्तेमाल करेंगे)अच्छा‑हो (आज जरूरी नहीं): ड्यू डेट, प्राथमिकताएँ, केटेगरी, सर्च, ड्रैग‑एंड‑ड्रॉप, क्लाउड सिंक।
“जरूरी” को छोटा रखने से आप असल में पूरा कर पाएंगे।
यह ऐप एक ही पेज हो सकता है जिसमें:
स्पष्ट रहें ताकि आप फंसें नहीं:
अब आप प्रोजेक्ट फाइलें सेट अप करने के लिए तैयार हैं।
कोई कोड लिखने से पहले, ऐप के लिए एक साफ‑सुथरा घर बनाते हैं। शुरू से ही फाइलें व्यवस्थित रखने से आगे के कदम आसान होते हैं।
अपने कंप्यूटर पर एक नया फोल्डर बनाएं और उसका नाम कुछ ऐसा रखें जैसे todo-app। इस फ़ोल्डर में पूरा प्रोजेक्ट होगा।
उस फ़ोल्डर के अंदर तीन फाइलें बनाएं:
index.html (पेज की संरचना)styles.css (लुक और लेआउट)app.js (बिहेवियर और इंटरऐक्टिविटी)अगर आपका कंप्यूटर फ़ाइल एक्सटेंशन छुपाता है (जैसे “.html”), तो सुनिश्चित करें कि आपने असल में सही एक्सटेंशन वाली फाइल बनाई है। शुरुआती में आम गलती होती है index.html.txt बन जाना।
todo-app फ़ोल्डर को अपने कोड एडिटर में खोलें (VS Code, Sublime Text, आदि)। फिर index.html को अपने वेब ब्राउज़र में खोलें।
इस Punkt पर आपका पेज खाली दिख सकता है—और ठीक है। अगले स्टेप में हम कंटेंट जोड़ेंगे।
जब आप फाइलें एडिट करेंगे, ब्राउज़र अपने आप अपडेट नहीं करेगा (जब तक आप कोई टूल न चला रहे हों)।
तो बेसिक लूप है:
अगर कुछ “काम नहीं कर रहा”, तो रिफ्रेश पहले चीज़ होती है जिसे ट्राय करें।
आप यह ऐप सीधे index.html पर डबल‑क्लिक करके चला सकते हैं, पर एक लोकल सर्वर कुछ बाद के अजीब मुद्दों को रोकता है (खासकर जब आप डेटा सेव करने या फाइलें लोड करने लगेंगे)।
शुरुआती‑दोस्त विकल्प:
python -m http.server
फिर जो address वो प्रिंट करे (अक्सर http://localhost:8000) उसे ब्राउज़र में खोलें।
अब हम ऐप के लिए एक साफ कंकाल बनाएँगे। यह HTML अभी कुछ भी इंटरऐक्टिव नहीं करेगा (वह अगला है), पर यह आपके JavaScript के लिए स्पष्ट जगहें देगा जहाँ से वह पढ़ सके और लिख सके।
हम इसमें शामिल करेंगे:
साधारण और पठनीय नाम रखें। अच्छे IDs/classes बाद के कदम आसान बनाते हैं क्योंकि आपका JavaScript भ्रम के बिना एलिमेंट्स पकड़ सकता है।
index.html में पेस्ट करें<!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
ध्यान दें कि हमने id="taskInput" और id="taskList" उपयोग किए—ये वे दो एलिमेंट्स हैं जिनसे आप JavaScript में सबसे अधिक बात करेंगे।
अभी आपका पेज है, पर शायद यह साधारण डॉक्स जैसा दिखता है। थोड़ी सी CSS इसे उपयोग में आसान बनाती है: बेहतर स्पेसिंग, पठनीय टेक्स्ट, और क्लिकेबल लगने वाले बटन।
एक केंद्रित बॉक्स ऐप को फोकस्ड रखेगा और कंटेंट को चौड़े स्क्रीन पर फैलने से रोकेगा।
/* 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); }
यह साफ और दोस्ताना UI के लिए काफी है—कोई एडवांस्ड ट्रिक्स नहीं चाहिए। अब हम JavaScript से बिहेवियर जोड़ेंगे।
अब जब आपके पास इनपुट, बटन, और लिस्ट पेज पर हैं, तो हम उन्हें कुछ करने लायक बनाएँगे। लक्ष्य सरल है: जब कोई टेक्स्ट टाइप करे और Add दबाए (या Enter), तो लिस्ट में नया आइटम दिखे।
अपने JavaScript फाइल में, पहले जिन एलिमेंट्स की जरूरत है उन्हें पकड़ें, फिर दो एक्शन्स सुनें: बटन क्लिक और इनपुट के अंदर Enter की।
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();
}
});
trim() से शुरुआत/अंत की एक्स्ट्रा स्पेसेज़ हटाता है।<li> बनाता है, उसका टेक्स्ट सेट करता है, और लिस्ट में जोड़ देता है।अगर कुछ नहीं होता, तो अपने HTML में IDs और JavaScript के सेलेक्टर्स एक‑एक से मिलते हैं या नहीं यह जाँचें (यह शुरुआती भागियों में सबसे आम समस्या है)।
अब जब आप टास्क जोड़ सकते हैं, उन्हें क्रियाशील बनाते हैं: आप टास्क को पूरा मार्क कर सकें और उसे हटा भी सकें।
स्ट्रिंग की बजाय, टास्क को ऑब्जेक्ट के रूप में रखें। इससे हर टास्क की एक स्थिर पहचान और done स्टेट ट्रैक करने की जगह बनती है:
text: टास्क क्या कहता हैdone: true या falseid: एक यूनिक नंबर ताकि हम सही टास्क को खोज/डिलीट कर सकेंसरल उदाहरण:
let tasks = [
{ id: 1, text: "Buy milk", done: false },
{ id: 2, text: "Email Sam", done: true }
];
जब आप हर टास्क को पेज पर रेंडर करें, तो उसमें एक चेकबॉक्स या “Done” बटन और एक “Delete” बटन शामिल करें।
एक ईवेंट लिसनर बस "किसी क्लिक पर प्रतिक्रिया देने का तरीका" है। आप इसे बटन पर या पूरी लिस्ट पर अटैच कर सकते हैं, और जब यूज़र क्लिक करेगा तो आपका कोड चलेगा।
शुरुआती‑दोस्त पैटर्न है इवेंट डेलीगेशन: टास्क लिस्ट कंटेनर पर एक क्लिक लिसनर रखें, फिर देखें कि किस एलिमेंट पर क्लिक हुआ।
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);
});
अपने renderTasks() फ़ंक्शन में:
data-id="${task.id}" जोड़ें।.done क्लास जोड़कर पूरा हुए टास्क को विज़ुअली दिखाएँ।अभी आपकी टू‑डू लिस्ट की एक दिक्कत है: अगर आप पेज रिफ्रेश करें (या टैब बंद कर दें), तो सब कुछ गायब हो जाता है।
यह इसलिए होता है क्योंकि आपके टास्क सिर्फ JavaScript मेमोरी में हैं। पेज रीलोड होने पर मेमोरी रीसेट हो जाती है।
localStorage ब्राउज़र में बिल्ट है। इसे एक छोटी सी बॉक्स की तरह समझें जहाँ आप किसी नाम (key) के तहत टेक्स्ट स्टोर कर सकते हैं। यह शुरुआती प्रोजेक्ट्स के लिए परफेक्ट है क्योंकि इसे सर्वर या अकाउंट की ज़रूरत नहीं होती।
हम पूरी टास्क लिस्ट को JSON टेक्स्ट के रूप में सेव करेंगे, और पेज खुलने पर उसे वापस लोड करेंगे।
जब भी आप टास्क जोड़ें, किसी को पूरा मार्क करें, या हटाएँ, saveTasks() कॉल करें।
const STORAGE_KEY = "todo.tasks";
function saveTasks(tasks) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}
जहाँ भी आपका ऐप tasks एरे अपडेट करे, तुरंत उसके बाद यह करें:
saveTasks(tasks);
renderTasks(tasks);
जब पेज लोड हो, सेव्ड वैल्यू पढ़ें। अगर अभी कुछ सेव नहीं है, तो खाली लिस्ट पर लौट आएँ।
function loadTasks() {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved) : [];
}
let tasks = loadTasks();
renderTasks(tasks);
बस: अब आपका ऐप रिफ्रेश के बाद भी टास्क याद रखेगा।
टिप: localStorage केवल स्ट्रिंग्स स्टोर करता है, इसलिए JSON.stringify() आपकी एरे को टेक्स्ट में बदल देता है, और JSON.parse() उसे वापस असली एरे बनाता है जब आप लोड करें।
टेस्टिंग बोरिंग लग सकता है, पर यह सबसे तेज़ तरीका है जिससे आपकी टू‑डू ऐप "मेरी मशीन पर काम करता है" से "हर बार काम करता है" में बदलती है। हर छोटे बदलाव के बाद एक त्वरित पास करें।
मुख्य फ्लो एक‑एक करके चलाएँ:
अगर कोई स्टेप फेल हो रहा है, तो नया फीचर जोड़ने से पहले उसे ठीक करें। छोटे ऐप्स तब गड़बड़ होते हैं जब आप समस्याएँ जमा कर देते हैं।
ऐसे इनपुट जो आपने डिजाइन नहीं किए थे, पर असल लोग कर ही देंगे:
एक आम फिक्स है खाली टास्क ब्लॉक कर देना:
const text = input.value.trim();
addButton.disabled = text === "";
(इसे हर input इवेंट पर चला सकते हैं, और जोड़ने से ठीक पहले भी चेक कर लें.)
जब क्लिक पर कुछ नहीं होता, तो आमतौर पर इनमें से कोई कारण होता है:
id या क्लास नाम अलग हैं)app.js नहीं मिली)जब कुछ रैंडम लगे, लॉग करना उपयोगी होता है:
console.log("Adding:", text);
console.log("Current tasks:", tasks);
ब्राउज़र के Console में एरर (लाल टेक्स्ट) देखें। समस्या सही होने के बाद लॉग हटा दें ताकि प्रोजेक्ट में गड़बड़ न हो।
एक टू‑डू ऐप तब “पूरा” कहलाता है जब असली लोग इसे आराम से इस्तेमाल कर सकें—फोन पर, कीबोर्ड से, और असिस्टिव टूल्स (स्क्रीन रीडर) के साथ।
छोटे स्क्रीन पर छोटे बटन झंझलाते हैं। क्लिक करने योग्य चीज़ों को पर्याप्त जगह दें:
CSS में padding, font-size, और gap बढ़ाने से बड़ा फर्क पड़ता है।
स्क्रीन रीडर्स को कंट्रोल्स के लिए स्पष्ट नाम चाहिए।
<label> होना चाहिए (यह सबसे अच्छा विकल्प है)। अगर आप इसे दिखाना नहीं चाहते, तो CSS से विज़ुअली छिपा सकते हैं पर HTML में रखें।aria-label="Delete task" जोड़ें ताकि स्क्रीन रीडर उन्हें समझा सके।यह लोगों को बिना अनुमान लगाए समझने में मदद करता है कि हर कंट्रोल क्या करता है।
सुनिश्चित करें कि आप पूरे ऐप को माउस के बिना भी उपयोग कर सकें:
<form> उपयोग करने से Enter प्राकृतिक रूप से काम करता है)।पठनीय फ़ॉन्ट साइज (16px अच्छा बेसलाइन है) और मजबूत कलर कंट्रास्ट का उपयोग करें (डार्क टेक्स्ट लाइट बैकग्राउंड पर)। सिर्फ रंग पर निर्भर न रहें “done” दिखाने के लिए—एक स्ट्राइक‑थ्रू और स्पष्ट स्टेट जोड़ें।
अब जब सब काम कर रहा है, 10–15 मिनट लेकर सफाई करें। यह भविष्य में फिक्स आसान बनाता है और जब आप बाद में लौटें तो आपका खुद का प्रोजेक्ट समझना आसान होता है।
इसे छोटा और अनुमाननीय रखें:
/index.html — पेज की संरचना (इनपुट, बटन, लिस्ट)/styles.css — ऐप का लुक (स्पेसिंग, फ़ॉन्ट, "done" स्टाइल)/app.js — बिहेवियर (add, toggle done, delete, save/load)/README.md — "भविष्य के आप" के लिए त्वरित नोट्सअगर आप सबफ़ोल्डर्स पसंद करते हैं, तो भी सही है:
/css/styles.css/js/app.jsबस सुनिश्चित करें कि आपके <link> और <script> पाथ्स मेल खाते हों।
कुछ सरल सुधार:
taskInput, taskList, saveTasks()उदाहरण के लिए, स्कैन करने में आसान:
renderTasks(tasks)addTask(text)toggleTask(id)deleteTask(id)आपका README.md सरल हो सकता है:
index.html खोलें)कम से कम, एक माइलस्टोन के बाद फ़ोल्डर ज़िप कर लें (जैसे “localStorage काम करता है”)। अगर आप वर्ज़न हिस्ट्री चाहते हैं तो Git बढिया है—पर वैकल्पिक है। एक बैकअप कॉपी ही आकस्मिक डिलीट से बचा सकती है।
पब्लिश करने का मतलब बस आपकी फाइलें (HTML, CSS, JavaScript) कहीं सार्वजनिक इंटरनेट पर रखना है ताकि कोई लिंक खोलकर उपयोग कर सके। चूंकि यह टू‑डू ऐप एक "स्टैटिक साइट" है (ब्राउज़र में चलता है, सर्वर की ज़रूरत नहीं), आप इसे कई सेवाओं पर मुफ्त होस्ट कर सकते हैं।
उच्च‑स्तरीय कदम:
अगर आपकी फाइल अलग फोल्डर्स में हैं, तो फ़ाइल नेम्स और लिंक ठीक से मिलाएं (जैसे styles.css बनाम style.css)।
अगर आप सबसे सरल ‘अपलोड और जाएँ’ तरीका चाहते हैं:
localStorage काम कर रहा है)पास हो जाने पर लिंक किसी दोस्त को भेजें और कहें कि कोशिश कर के बताएं—ताज़ा नजर अक्सर जल्दी मुद्दे पकड़ लेती है।
आपने एक काम करने वाला टू‑डू ऐप बना लिया है। अगर आप बिना बड़ा प्रोजेक्ट उठाए सीखना जारी रखना चाहते हैं, तो ये अपग्रेड्स असली वैल्यू जोड़ते हैं और उपयोगी पैटर्न सिखाते हैं।
हर टास्क के पास एक “Edit” बटन जोड़ें। क्लिक करने पर टास्क लेबल को एक छोटा इनपुट फील्ड में बदल दें (पहले से भरा), और साथ में “Save” और “Cancel” रखें।
टिप: अपना टास्क डेटा id और text के साथ ऑब्जेक्ट्स की एरे के रूप में रखें। एडिट करना तब सरल होता है: सही id वाले टास्क को खोजें, text अपडेट करें, फिर रेंडर और सेव करें।
ऊपर तीन बटन जोड़ें: All, Active, Done।
वर्तमान फ़िल्टर को एक वेरिएबल में रखें जैसे currentFilter = 'all'। रेंडर करते समय दिखाएँ:
इसे हल्का रखें:
YYYY-MM-DD) और इसे टास्क के पास डिस्प्ले करेंएक अतिरिक्त फ़ील्ड जोड़ने से आपका डेटा मॉडल और UI एक साथ अपडेट करना सीखने को मिलता है।
जब आप तैयार हों, बड़ी आइडिया यह है: localStorage की बजाय आप टास्क को किसी API (सर्वर) पर भेजें (fetch() का उपयोग करके)। सर्वर उन्हें डेटाबेस में रखेगा, ताकि टास्क डिवाइसों के बीच सिंक हों।
अगर आप बिना सब कुछ फिर से बनाये यह स्किप करना चाहें, तो कुछ प्लेटफ़ॉर्म जैसे Koder.ai आपको “नेक्स्ट वर्ज़न” प्रोटोटाइप करने में मदद कर सकते हैं: चैट में फीचर बताएं (API endpoints, DB टेबल, UI चेंज), प्लान बनाएं, और जब चाहें तो जेनरेट किए गए React/Go/PostgreSQL सोर्स को एक्सपोर्ट करें।
एक नोट्स ऐप (सर्च के साथ) या हैबिट ट्रैकर (रोज़ाना चेक‑इन) बनाने की कोशिश करें। वे वही कौशल दोहराते हैं: लिस्ट रेंडरिंग, एडिटिंग, सेविंग, और सिंपल UI डिज़ाइन।