জাভাস্ক্রিপ্টে কাস্টম অ্যাট্রিবিউট

html<div id="elem" data-num="1000"></div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 প্রদর্শন করবে

javascriptlet elem = document.querySelector('#elem');
elem.dataset.num = 123;

Задание 1

নিম্নলিখিত কোড দেওয়া আছে:

html<div id="elem" data-text="str">text</div>

এটি করুন যাতে ডিভে ক্লিক করলে এর টেক্সটের শেষে এর data-text অ্যাট্রিবিউটের বিষয়বস্তু যোগ হয়।

Задание 2

ডিভগুলি দেওয়া আছে, যাতে data-num অ্যাট্রিবিউটে রয়েছে তাদের ক্রমিক নম্বর:

html<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

এটি করুন যাতে যেকোনো ডিভে ক্লিক করলে এর শেষে এর ক্রমিক নম্বর লেখা হয়।

Задание 3

একটি বাটন দেওয়া আছে। এটি করুন যাতে এই বাটনটি এর উপর ক্লিকের সংখ্যা গণনা করে, সেগুলি কোনো কাস্টম অ্যাট্রিবিউটে লিখে রাখে। অন্য একটি বাটনে ক্লিক করলে স্ক্রীনে প্রদর্শিত হোক, প্রথম বাটনে কতগুলি ক্লিক করা হয়েছে।

Задание 4

একটি ইনপুট দেওয়া আছে:

html<input id="elem" data-length="5">

এই ইনপুটটিতে data-length অ্যাট্রিবিউটে রয়েছে অক্ষরের সংখ্যা যা ইনপুটে প্রবেশ করাতে হবে। এটি করুন যাতে ফোকাস হারানোর সময়, যদি প্রবেশ করানো অক্ষরের সংখ্যা নির্ধারিত সংখ্যার সাথে না মেলে, তাহলে এ সম্পর্কে একটি বার্তা প্রদর্শিত হয়।

Задание 5

একটি ইনপুট দেওয়া আছে:

html<input id="elem" data-min="5" data-max="10">

এই ইনপুটটিতে data-min এবং data-max অ্যাট্রিবিউটগুলিতে একটি সীমা রয়েছে। এটি করুন যাতে ফোকাস হারানোর সময়, যদি প্রবেশ করানো অক্ষরের সংখ্যা এই সীমার মধ্যে না পড়ে, তাহলে এ সম্পর্কে একটি বার্তা প্রদর্শিত হয়।