जावास्क्रिप्ट का उपयोग करके एक बेसिक टू-डू लिस्ट ऐप कैसे बनाएं

दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) उन वस्तुओं का डेटा प्रतिनिधित्व है जिसमें एक वेब पेज की संरचना और सामग्री शामिल होती है। आप वेबसाइट पर सभी DOM तत्वों तक पहुँच सकते हैं और जावास्क्रिप्ट का उपयोग करके उन्हें गतिशील रूप से बना सकते हैं, पढ़ सकते हैं, अपडेट कर सकते हैं और हटा सकते हैं (CRUD)।

यह लेख बताएगा कि आप जावास्क्रिप्ट और डोम हेरफेर का उपयोग करके एक टू-डू सूची पर सीआरयूडी संचालन कैसे कर सकते हैं। हम उम्मीद करते हैं कि इस लेख को पढ़ने से पहले आप HTML और जावास्क्रिप्ट की मूल बातें जान गए होंगे।

बेसिक डोम मैनिपुलेशन को समझना

आइए एक सरल उदाहरण के माध्यम से चलते हैं:

 <button id=”submit”>Submit</button>
<script>
const submitButton = document.getElementById(“submit”);
submitButton.addEventListener(“click”, ()=>{
alert(“The form has been submitted”);
});
</script>

सबमिटबटन चर के पास उपरोक्त कोड में HTML बटन तक पहुंच है। आपको बटन पर क्लिक इवेंट श्रोता जोड़ना होगा (तत्व को सबमिट की आईडी द्वारा प्राप्त करके)। जब बटन पर क्लिक किया जाता है, तो घटना शुरू हो जाती है, और विंडो टेक्स्ट के साथ एक पॉप-अप प्रदर्शित करती है: "फॉर्म जमा कर दिया गया है।"

अब जब हमने DOM मैनिपुलेशन के मूल विचार को कवर कर लिया है, तो चलिए आगे बढ़ते हैं और टू-डू ऐप बनाने में गोता लगाते हैं।

HTML और TailwindCSS का उपयोग करके लेआउट का निर्माण

आइए इस प्रोजेक्ट के HTML लेआउट पर एक नजर डालते हैं। जावास्क्रिप्ट फ़ाइल में इन तत्वों तक पहुँच प्राप्त करने के लिए इनपुट तत्वों और बटनों की अपनी-अपनी आईडी होती है।

फ़्रंटएंड डिज़ाइन के लिए, यह आलेख TailwindCSS , एक उपयोगिता CSS फ्रेमवर्क का उपयोग करता है। आप CDN से CSS फ़ाइल आयात करके अपने प्रोजेक्ट में TailwindCSS का उपयोग कर सकते हैं।

 <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet" />

संबंधित: टेलविंड सीएसएस बनाम बूटस्ट्रैप: कौन सा बेहतर फ्रेमवर्क है?

कोड:

 <div class="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans mt-20">
<div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
<div class="mb-4">
<h1 class="text-3xl md:text-4xl text-indigo-600 font-medium mb-2">
To-Do List App
</h1>
<div class="flex mt-4">
<input class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" name="text" id="text" placeholder="Add Todo" />
<input type="hidden" id="saveIndex" />
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded text-white bg-indigo-600 transition-colors duration-300 mt-1 md:mt-0 md:ml-1" id="add-task-btn">Add</button>
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded bg-indigo-600 text-white transition-colors duration-300 mt-1 md:mt-0 md:ml-1" style="display: none" id="save-todo-btn">Edit Todo</button>
</div>
</div>
<div id="listBox"></div>
</div>
</div>

डिजाइनिंग के बाद हमारा ऐप इस तरह दिखता है:

जावास्क्रिप्ट के साथ कार्यक्षमता जोड़ना:

पहला चरण getElementById() विधि का उपयोग करके तत्वों को उनके आईडी द्वारा एक्सेस करना है।

 const text = document.getElementById("text");
const addTaskButton = document.getElementById("add-task-btn");
const saveTaskButton = document.getElementById("save-todo-btn");
const listBox = document.getElementById("listBox");
const saveInd = document.getElementById("saveIndex");

हमें सभी टू-डू कार्यों को संग्रहीत करने के लिए एक सरणी की आवश्यकता होती है। इसलिए, हमें एक को इनिशियलाइज़ करने की आवश्यकता है।

 let todoArray = [];

टू-डू सूची में आइटम जोड़ना

सरणी में कार्य जोड़ने के लिए, आपको इसे todoArray पर धकेलना होगा और फिर इसे वेबपेज पर प्रदर्शित करना होगा। ऐसा होने के लिए, ऐड बटन पर एक क्लिक इवेंट ट्रिगर होना चाहिए।

 addTaskButton.addEventListener("click", (e) => {
e.preventDefault();
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
todoArray.push(text.value);
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});

आप हर बदलाव (यानी जब भी कोई काम जोड़ा जाता है, अद्यतन या हटाए गए) पर localStorage को todoArray स्टोर करने के लिए किया है।

उपरोक्त कोड में, आपको लोकलस्टोरेज से ऐरे को लाना होगा; यदि कोई सरणी मौजूद नहीं है, तो हम एक रिक्त बनाते हैं। फिर हम नए जोड़े गए कार्य को todoArray पर धकेलते हैं और पूरे सरणी को फिर से localStorage में संग्रहीत करते हैं।

टू-डू सूची परिवर्तन प्रदर्शित करना

मान को todoArray में जोड़ने के बाद , आपको इसे वेब पेज पर प्रदर्शित करना होगा। यह .innerHTML विशेषता का उपयोग करके किया जाता है।

हम टू-डू सूची के लिए HTML को htmlCode नाम के एक वेरिएबल के अंदर रखते हैं । फिर, हम todoArray के माध्यम से लूप करते हैं और प्रत्येक आइटम को htmlCode चर में जोड़ते हैं।

एक बार जब आप सभी मदों के माध्यम से लूपिंग कर लेते हैं, तो आपको .innerHTML विशेषता का उपयोग करके पूरे HTML कोड को listBox तत्व को असाइन करने की आवश्यकता होती है।

इसलिए नई टू-डू सूची आइटम को सरणी में धकेलने के बाद, हम डिस्प्लेटोडो () फ़ंक्शन को कॉल करते हैं जो वर्णित अनुसार सभी को संभालता है:

 function displayTodo() {
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
let htmlCode = "";
todoArray.forEach((list, ind) => {
htmlCode += `<div class='flex mb-4 items-center'>
<p class='w-full text-grey-darkest'>${list}</p>
<button onclick='edit(${ind})' class='flex-no-shrink p-2 ml-4 mr-2 border-2 rounded text-white text-grey bg-green-600'>Edit</button>
<button onclick='deleteTodo(${ind})' class='flex-no-shrink p-2 ml-2 border-2 rounded text-white bg-red-500'>Delete</button>
</div>`;
});
listBox.innerHTML = htmlCode;
}

टूडू आइटम को वेरिएबल htmlCode में जोड़ते समय आपको प्रत्येक आइटम के लिए दो बटन—अपडेट और डिलीट—जोड़ने होंगे

टू-डू सूची से आइटम हटाना

डिलीट बटन में एक विशेषता विधि ऑनक्लिक () है जो टूडू इंडेक्स को पैरामीटर के रूप में पास करती है। डिलीट बटन पर क्लिक करने पर डिलीटटोडो () मेथड एक्जीक्यूट हो जाएगा।

इस विधि में, आपको todoArray पर ब्याह () सरणी विधि लागू करनी होगीब्याह () विधि निर्दिष्ट सूचकांक पर आइटम को हटाने में मदद करती है। आइटम हटाने के बाद आप localStorage में परिवर्तन की दुकान और वेब पेज पर परिवर्तनों को प्रतिबिंबित करने displayTodo () फ़ंक्शन कॉल करने के लिए की है।

 function deleteTodo(ind) {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
todoArray.splice(ind, 1);
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
}

टू-डू सूची में आइटम अपडेट करना

प्रत्येक टू-डू सूची आइटम में डिलीट बटन की तरह ही एक संपादन बटन होता है। संपादन बटन में एक विशेषता विधि है onclick() । बटन पर क्लिक करने पर, संपादन विधि निष्पादित हो जाती है और सूचकांक को पैरामीटर के रूप में पास करती है।

दो HTML तत्व हैं जिनके प्रदर्शन गुण किसी पर भी सेट नहीं हैं:

  1. आईडी सेवइंडेक्स के साथ इनपुट तत्व
  2. आईडी के साथ बटन सहेजें-कार्य-बीटीएन

जैसे ही आप एडिट बटन पर क्लिक करते हैं, इनपुट में टेक्स्ट वैल्यू होगी जिसे आप अपडेट करना चाहते हैं। AddTaskButton के बजाय saveTaskButton प्रदर्शित किया जाएगा।

HTML कोड में एक इनपुट तत्व होता है जिसमें id saveIndex होता है । आपको डिस्प्ले की डिफ़ॉल्ट स्टाइल प्रॉपर्टी को कोई नहीं के रूप में सेट करना होगा। जब संपादन विधि को कॉल किया जाता है, तो आप इस तत्व की मान विशेषता को आईडी पर सेट करते हैं, ताकि आप अद्यतन कार्य को सहेजते समय बाद में इसका संदर्भ दे सकें।

 function edit(ind) {
saveInd.value = ind;
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
text.value = todoArray[ind];
addTaskButton.style.display = "none";
saveTaskButton.style.display = "block";
}

एक बार जब आप टेक्स्ट का संपादन कर लेते हैं, तो आप saveTaskButton पर क्लिक करें। बटन पर क्लिक करने पर, आप सेवइंड इनपुट का उपयोग करके टेक्स्ट की आईडी पुनः प्राप्त करते हैं। आईडी प्राप्त करने के बाद, आप उस अनुक्रमणिका पर todoArray को अपडेट कर सकते हैं और परिवर्तनों को localStorage पर पुश कर सकते हैं। अंत में, हमने वेब पेज पर परिवर्तनों को दर्शाने के लिए डिस्प्लेटोडो () फ़ंक्शन को कॉल किया।

 saveTaskButton.addEventListener("click", () => {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
let id = saveInd.value;
todoArray[id] = text.value;
addTaskButton.style.display = "block";
saveTaskButton.style.display = "none";
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});

अपनी टू-डू सूची से एक आइटम की जांच करें

अब जब आपने मूल टू-डू सूची ऐप पूरा कर लिया है, तो आपके लिए अपने आप से और अधिक रोमांचक प्रोजेक्ट बनाना शुरू करने का समय आ गया है!

आप या तो एक गेम या एक वेब एप्लिकेशन बना सकते हैं जिसका उपयोग आप अपने व्यक्तिगत उपयोग के लिए कर सकते हैं। प्रोजेक्ट बनाने से आपको अपने कौशल का निर्माण करने और जावास्क्रिप्ट की अच्छी समझ हासिल करने में मदद मिलेगी। जितना हो सके अद्भुत प्रोजेक्ट सीखते रहें और बनाते रहें।

एक और जावास्क्रिप्ट प्रोजेक्ट बनाना चाहते हैं? यहां एक साधारण कैलकुलेटर वेब एप्लिकेशन है जिसे आप HTML, CSS और जावास्क्रिप्ट के साथ बना सकते हैं।