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 কী চাপানোর পরে
ইনপুট ফিল্ডের টেক্সট সাফ হয়ে যায়।
