diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md index 60930cb6c..6d5694d5c 100644 --- a/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md +++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md @@ -2,14 +2,14 @@ importance: 5 --- -# Create a notification +# নোটিফিকেশন তৈরি -Write a function `showNotification(options)` that creates a notification: `
` with the given content. The notification should automatically disappear after 1.5 seconds. +`showNotification(options)` নামের একটি ফাংশন লিখুন যা একটি নোটিফিকেশন দেখাবে: `
`। নোটিফিকেশনটি ১.৫ সেকেন্ড পর অদৃশ্য হবে। -The options are: +options হবে: ```js -// shows an element with the text "Hello" near the right-top of the window +// "Hello" টেক্সট সহকারে একটি এলিমেন্ট দেখাবে window এর উপরের ডান কোণায় showNotification({ top: 10, // 10px from the top of the window (by default 0px) right: 10, // 10px from the right edge of the window (by default 0px) @@ -21,4 +21,4 @@ showNotification({ [demo src="solution"] -Use CSS positioning to show the element at given top/right coordinates. The source document has the necessary styles. +CSS পজিশনিং স্ট্যাইল ব্যবহার করুন top/right এর জন্য। diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index 9154d43d6..c09573908 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -1,37 +1,37 @@ -# Styles and classes +# Styles এবং classes -Before we get into JavaScript's ways of dealing with styles and classes -- here's an important rule. Hopefully it's obvious enough, but we still have to mention it. +জাভাস্ক্রিপ্টের সাহায্যে style এবং class নিয়ে কাজ করার সময় আমাদের কিছু গুরুত্বপূর্ণ রুল জেনে রাখা উচিত। যদিও আমাদের কাছে অনেক কিছু সুস্পষ্ট, তারপরও কিছু বিষয় জেনে রাখা উচিত। -There are generally two ways to style an element: +দুইটি উপায়ে আমরা এলিমেন্টে স্ট্যাইল করতে পারি: -1. Create a class in CSS and add it: `
` -2. Write properties directly into `style`: `
`. +1. CSS ক্লাস এর মাধ্যমে: `
` +2. সরাসরি `style` প্রপার্টির মাধ্যমে : `
`। -JavaScript can modify both classes and `style` properties. +জাভাস্ক্রিপ্টের মাধ্যমে ক্লাস এবং `style` প্রপার্টিকে উভয়ভাবে আমরা পরিবর্তন করতে পারি। -We should always prefer CSS classes to `style`. The latter should only be used if classes "can't handle it". +তবে আমাদের `style` এর জন্য CSS ক্লাস ব্যবহার করাই বেশি উপযোগী। তবে যদি ক্লাসের মাধ্যমে সম্পূর্ন ব্যাপারটি কন্ট্রোল করতে না পারি তাহলে দ্বিতীয়টির মাধ্যমে করা উচিত। -For example, `style` is acceptable if we calculate coordinates of an element dynamically and want to set them from JavaScript, like this: +যেমন, আমরা জাভাস্ক্রিপ্টের মাধ্যমে ডায়নামিক্যালি কো-অর্ডিনেট ক্যালকুলেশন করে `style` এ সেট করতে পারি, এভাবে: ```js -let top = /* complex calculations */; -let left = /* complex calculations */; +let top = /* জটিল ক্যালকুলেশন */; +let left = /* জটিল ক্যালকুলেশন */; -elem.style.left = left; // e.g '123px', calculated at run-time -elem.style.top = top; // e.g '456px' +elem.style.left = left; // যেমন '123px', রানটাইমে ক্যালকুলেশন +elem.style.top = top; // যেমন '456px' ``` -For other cases, like making the text red, adding a background icon -- describe that in CSS and then add the class (JavaScript can do that). That's more flexible and easier to support. +অন্যান্য ক্ষেত্রে, যেমন টেক্সট কালার লাল, বা আইকন পরিবর্তন ইত্যাদি আমরা জাভাস্ক্রিপ্টের মাধ্যমে *CSS class* সংযুক্ত করণের দ্বারা করতে পারি। এটি আরো বেশি সহজ এবং উপযোগী। -## className and classList +## className এবং classList -Changing a class is one of the most often used actions in scripts. +জাভাস্ক্রিপ্টের মাধ্যমে আমরা প্রায়সই ক্লাসের নাম পরিবর্তন করে থাকি। -In the ancient time, there was a limitation in JavaScript: a reserved word like `"class"` could not be an object property. That limitation does not exist now, but at that time it was impossible to have a `"class"` property, like `elem.class`. +পূর্বে জাভাস্ক্রিপ্টের কিছু সীমাবদ্ধতা ছিল: `"class"` একটি রিসার্ভড ওয়ার্ড হওয়ায় এটি অবজেক্টের প্রপার্টি হতে পারত না। তবে সীমাবদ্ধতাটি এখন আর নেই, কিন্তু অই সময় `"class"` নামের প্রপার্টি অ্যাসাইন করা সম্ভব হত নাহ, যেমন `elem.class`। -So for classes the similar-looking property `"className"` was introduced: the `elem.className` corresponds to the `"class"` attribute. +ক্লাসের জন্য আমাদের অনুরূপ একটি প্রপার্টি ছিল `"className"`: `elem.className` দ্বারা `"class"` অ্যাট্রিবিউটকে নির্দেশ করে। -For instance: +উদাহরণস্বরূপ: ```html run @@ -41,19 +41,19 @@ For instance: ``` -If we assign something to `elem.className`, it replaces the whole string of classes. Sometimes that's what we need, but often we want to add/remove a single class. +যদি আমরা `elem.className` এ কিছু অ্যাসাইন করি তাহলে এটি সম্পূর্ন ক্লাস স্ট্রিংটিকে রিপ্লেস করে। মাঝে মাঝে আমাদের এটি দরকার হয়, কিন্তু বেশিরভাগ সময় আমাদের একটি সিংগেল ক্লাস সংযুক্ত/বাদ দেয়া লাগে। -There's another property for that: `elem.classList`. +এজন্য আমাদের আরেকটি প্রপার্টি আছে: `elem.classList`। -The `elem.classList` is a special object with methods to `add/remove/toggle` a single class. +`elem.classList` একটি স্পেশাল অবজেক্ট যার কিছু মেথড আছে `add/remove/toggle`। -For instance: +উদাহরণস্বরূপ: ```html run ``` -This property is rarely used, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But we can safely use it for new elements, when we know we won't delete an existing style. +প্রপার্টিটি কদাচিৎ ব্যবহার হয়, কেননা এর ফলে বিদ্যমান সকল স্ট্যাইল রিমুভ হয়ে যায়: এটি পুরনো স্ট্যাইল টিকে সম্পুর্ন পরিবর্তন করে দেয়, এর ফলে অনেক সময় আমাদের প্রয়োজনীয় স্ট্যাইলও ডিলিট হয়ে যায়। তবে নতুন কোন এলিমেন্টে একাধিক স্ট্যাইল সেটের জন্য এটি উপযোগী, যখন আমরা জানি প্রয়োজনীয় কোন স্ট্যাইল এখনো সেট হয়নি। -The same can be accomplished by setting an attribute: `div.setAttribute('style', 'color: red...')`. +আমরা এভাবেও করতে পারি: `div.setAttribute('style', 'color: red...')`। ```` ## Mind the units -Don't forget to add CSS units to values. +CSS ইউনিট ভ্যালু লিখতে ভুলবেন না। -For instance, we should not set `elem.style.top` to `10`, but rather to `10px`. Otherwise it wouldn't work: +উদাহরণস্বরূপ, আমাদের `elem.style.top` কে শুধুমাত্র `10` দ্বারা লিখলে হবে না, তার পরিবর্তে ইউনিট লিখা লাগবে যেমন `10px`। অন্যথায় এটি কাজ করবে না: ```html run height=100 ``` ```` -```smart header="Styles applied to `:visited` links are hidden!" -Visited links may be colored using `:visited` CSS pseudoclass. +```smart header="Styles applied to `:visited` লিংক অদৃশ্য!" +ভিজিটেড লিংক সমূহ হয়তবা CSS pseudoclass `:visited` এর জন্য একটি কালার দেখায়। -But `getComputedStyle` does not give access to that color, because otherwise an arbitrary page could find out whether the user visited a link by creating it on the page and checking the styles. +কিন্তু `getComputedStyle` এটি কোন কালারের মান রিটার্ন করে না কারণ এটির অ্যাক্সেস থাকে না, কেননা একটি স্বতন্ত্র পেজে স্ট্যাইল যাচাইয়ের মাধ্যমে সহজেই জানা যাবে কোন কোন পেজ ভিজিট করা হয়েছে। -JavaScript may not see the styles applied by `:visited`. And also, there's a limitation in CSS that forbids applying geometry-changing styles in `:visited`. That's to guarantee that there's no side way for an evil page to test if a link was visited and hence to break the privacy. +তাই জাভাস্ক্রিপ্টের মাধ্যমে `:visited` এর মান জানা সম্ভব না। এটি আমাদের গোপনীয়তার নিশ্চয়তা প্রদান করে। ``` -## Summary +## সারাংশ -To manage classes, there are two DOM properties: +ক্লাস ম্যানিপুলেসনের জন্য, দুটি DOM প্রপার্টি আছে: -- `className` -- the string value, good to manage the whole set of classes. -- `classList` -- the object with methods `add/remove/toggle/contains`, good for individual classes. +- `className` -- ক্লাস অ্যাট্রিবিউটের সকল ক্লাস স্ট্রিং হিসেবে রিটার্ন করে, এলিমেন্টের সকল ক্লাসের জন্য এটি উপযোগী। +- `classList` -- একটি অবজেক্ট যার মেথডসমূহ `add/remove/toggle/contains`, সিংগেল ক্লাসের জন্য উপযোগী। -To change the styles: +স্ট্যাইল পরিবর্তনের জন্য: -- The `style` property is an object with camelCased styles. Reading and writing to it has the same meaning as modifying individual properties in the `"style"` attribute. To see how to apply `important` and other rare stuff -- there's a list of methods at [MDN](mdn:api/CSSStyleDeclaration). +- `style` প্রপার্টি একটি অবজেক্ট যার প্রপার্টি সমূহ ক্যামেল কেসের হয়ে থাকে। প্রতিটি একক প্রপার্টি পড়তে এবং অ্যাসাইন করতে এটি উপযোগী। কিভাবে আমরা `important` এবং অন্যান্য কদাচিৎ ব্যবহৃত বিষয়গুলো ব্যবহার করতে পারি -- তা জানতে এটি দেখুন [MDN](mdn:api/CSSStyleDeclaration)। +- `style.cssText` এর সাহায্যে আমরা একাধিক `"style"` অ্যাট্রিবিউট সেট করতে পারি। -- The `style.cssText` property corresponds to the whole `"style"` attribute, the full string of styles. +কোন এলিমেন্টের প্রয়োগকৃত সর্বশেষ সকল স্ট্যাইল জানতে: -To read the resolved styles (with respect to all classes, after all CSS is applied and final values are calculated): - -- The `getComputedStyle(elem, [pseudo])` returns the style-like object with them. Read-only. +- `getComputedStyle(elem, [pseudo])` সকল প্রপার্টি রিটার্ন করবে. এটি Read-only।