JavaScript पर चेकलिस्ट

इस पाठ में हम एक चेकलिस्ट लागू करेंगे। चेकलिस्ट एक ऐसा प्रोग्राम है जो आपको योजनाबद्ध कार्यों की एक सूची बनाने की अनुमति देता है, और फिर जैसे-जैसे ये कार्य पूरे होते जाते हैं, उन्हें पूरा किया हुआ चिह्नित कर देता है।

आइए ऐसा बनाएं कि कार्यों को जोड़ा, हटाया, संपादित किया जा सके और उन्हें पूरा किया हुआ चिह्नित किया जा सके।

यहाँ एक नमूना है कि हमें क्या प्राप्त होना चाहिए (नए कार्य को इनपुट करने के लिए इनपुट में पाठ दर्ज करें और Enter दबाएं, संपादन करने के लिए कार्य के पाठ पर डबल-क्लिक करें):

शुरुआत करें

तो, आइए वर्णित कार्य को लागू करना शुरू करें।

शुरुआत के लिए, आइए हम अपनी चेकलिस्ट के लिए HTML कोड लिखें। मान लें कि नए कार्य एक इनपुट का उपयोग करके दर्ज किए जाते हैं और ul सूची में जोड़े जाते हैं:

<input id="input">
<ul id="list"></ul>

आइए तुरंत CSS कोड जोड़ें, जो हमारी चेकलिस्ट में कुछ सुंदरता जोड़ता है:

body {
	text-align: center;
}
#input, #list {
	display: inline-block;
}
#list {
	padding: 0;
	list-style-type: none;
}

हमेशा की तरह, आइए जटिल कार्य को सरल चरणों में विभाजित करें।

पहले चरण के रूप में, आइए ऐसा बनाएं कि इनपुट में पाठ दर्ज किया जा सके, Enter दबाया जा सके - और ul के अंत में दर्ज किए गए पाठ के साथ एक li जोड़ दी जाए।

वर्णित कार्य को लागू करने वाला कोड का खाका यहाँ है:

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// यहाँ सूची में नई li जोड़ने के लिए कोड होगा
	}
});

वर्णित कार्य को हल करने के लिए कोड के गायब हिस्से को पूरा लिखें।

पिछले कार्य को इस तरह संशोधित करें कि Enter कुंजी दबाने के बाद इनपुट का पाठ साफ हो जाए।