From 21d79fa47f10cd652de87da6c2720625eee2ff6f Mon Sep 17 00:00:00 2001
From: Saiful <msisaifulsaif@gmail.com>
Date: Fri, 5 Mar 2021 16:47:09 +0600
Subject: [PATCH 1/2] translate dom modification

---
 .../07-modifying-document/article.md          | 271 +++++++++---------
 1 file changed, 135 insertions(+), 136 deletions(-)
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index 75ce1fbb0..3f4017e1a 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -1,14 +1,14 @@
-# Modifying the document
+# ডকুমেন্টকে পরিবর্তন
 
-DOM modification is the key to creating "live" pages.
+DOM মোডিফিকেশনের মাধ্যমে আমরা আমাদের পেইজ কে আরো "ডায়নামিক প্রাণবন্ত" করতে পারি।
 
-Here we'll see how to create new elements "on the fly" and modify the existing page content.
+এখানে আমরা দেখব কিভাবে বিদ্যমান পেজের কন্টেন্ট সমূহকে "স্বতঃস্ফুর্তভাবে" পরিবর্তন করতে পারি।
 
-## Example: show a message
+## উদাহরণ: একটি মেসেজ দেখানো
 
-Let's demonstrate using an example. We'll add a message on the page that looks nicer than `alert`.
+চলুন একটি উদাহরণের সাহায্যে এটি বুঝি। আমরা একটি মেসেজ এলিমেন্ট লিখব যা `alert` এর মত দেখায়।
 
-Here's how it will look:
+এটি দেখতে এমন হবে:
 
 ```html autorun height="80"
 <style>
@@ -28,52 +28,52 @@ Here's how it will look:
 */!*
 ```
 
-That was the HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are in the HTML/CSS already).
+এটি একটি HTML উদাহরণ। চলুন পুরো ব্যাপারটি আমরা প্রোগ্রামাটিক্যালি জাভাস্ক্রিপ্ট এর সাহায্যে করি (ধরে নিই আমাদের ইতোমধ্যে CSS স্ট্যাইল করা আছে)।
 
-## Creating an element
+## এলিমেন্ট তৈরি
 
-To create DOM nodes, there are two methods:
+DOM নোড তৈরির জন্য দুটি মেথড আছে:
 
 `document.createElement(tag)`
-: Creates a new *element node* with the given tag:
+: ট্যাগ অনুযায়ী একটি নতুন *এলিমেন্ট নোড* তৈরি করা:
 
     ```js
     let div = document.createElement('div');
     ```
 
 `document.createTextNode(text)`
-: Creates a new *text node* with the given text:
+: টেক্সট অনুযায়ী একটি নতুন *টেক্সট নোড* তৈরি করা:
 
     ```js
     let textNode = document.createTextNode('Here I am');
     ```
 
-Most of the time we need to create element nodes, such as the `div` for the message.
+বেশিরভাব ক্ষেত্রে আমাদের এলিমেন্ট নোড তৈরি করা লাগে, যেমন মেসেজ দেখাতে `div` এলিমেন্ট।
 
-### Creating the message
+### মেসেজ এলিমেন্ট তৈরি
 
-Creating the message div takes 3 steps:
+DIV মেসেজটি তৈরিতে আমাদের তিনটি ধাপের প্রয়োজন:
 
 ```js
-// 1. Create <div> element
+// 1. <div> এলিমেন্ট তৈরি
 let div = document.createElement('div');
 
-// 2. Set its class to "alert"
+// 2. "alert" ক্লাশ নামটি সংযোগ
 div.className = "alert";
 
-// 3. Fill it with the content
+// 3. কন্টেন্ট সংযোগ
 div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
 ```
 
-We've created the element. But as of now it's only in a variable named `div`, not in the page yet. So we can't see it.
+আমরা এলিমেন্ট তৈরি করেছি। কিন্তু এখনো শুধুমাত্র `div` নামের একটি ভ্যারিয়েবল, এটি পেজে সংযুক্ত হবে না। তাই একে দেখতেও পারব না।
 
-## Insertion methods
+## পেজে সংযুক্তের মেথড
 
-To make the `div` show up, we need to insert it somewhere into `document`. For instance, into `<body>` element, referenced by `document.body`.
+`div` টি দেখাতে, আমাদের এটি `document` এর কোন একটি জায়গায় এটি সংযুক্ত করতে হবে। যেমন, `<body>` এলিমেন্ট, যা `document.body` দ্বারা সূচিত করা হয়।
 
-There's a special method `append` for that: `document.body.append(div)`.
+এটির একটি স্পেশাল মেথড আছে `append`: `document.body.append(div)`.
 
-Here's the full code:
+এখানে সম্পুর্ন কোডটি দেখুন:
 
 ```html run height="80"
 <style>
@@ -97,21 +97,21 @@ Here's the full code:
 </script>
 ```
 
-Here we called `append` on `document.body`, but we can call `append` method on any other element, to put another element into it. For instance, we can append something to `<div>` by calling `div.append(anotherElement)`.
+এখানে আমরা `document.body` তে `append` কল করেছি, কিন্তু আমরা চাইলে অন্য এলিমেন্টে সংযুক্ত করতে ঐ এলিমেন্ট সমূহেও `append` কল করতে পারি। যেমন, আমরা `<div>` এ অন্য এলিমেন্ট সংযুক্ত করতে পারি `div.append(anotherElement)`।
 
-Here are more insertion methods, they specify different places where to insert:
+এখানে আমরা আরো কিছু ইনসার্ট মেথড দেখব:
 
-- `node.append(...nodes or strings)` -- append nodes or strings *at the end* of `node`,
-- `node.prepend(...nodes or strings)` -- insert nodes or strings *at the beginning* of `node`,
-- `node.before(...nodes or strings)` –- insert nodes or strings *before* `node`,
-- `node.after(...nodes or strings)` –- insert nodes or strings *after* `node`,
-- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
+- `node.append(...nodes or strings)` -- *নোডের শেষে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+- `node.prepend(...nodes or strings)` -- *নোডের শুরুতে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+- `node.before(...nodes or strings)` –- *নোডের পূর্বে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+- `node.after(...nodes or strings)` –- *নোডের পরে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+- `node.replaceWith(...nodes or strings)` –- `node` কে অন্য নোড বা স্ট্রিং দ্বারা রিপ্লেস।
 
-Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically).
+মেথডসমূহের আর্গুমেণ্টটি যেকোন স্বতন্ত্র DOM নোড অথবা টেক্সট স্ট্রিং(যা স্বয়ংক্রিয়ভাবে টেক্সট নোড হবে) হতে পারে।
 
-Let's see them in action.
+চলুন উদাহরণের সাহায্যে দেখি।
 
-Here's an example of using these methods to add items to a list and the text before/after it:
+এখানে একটি লিস্ট আছে, এখানে আমরা ইনসার্শন মেথড সমূহ সংযুক্ত করব:
 
 ```html autorun
 <ol id="ol">
@@ -121,24 +121,24 @@ Here's an example of using these methods to add items to a list and the text bef
 </ol>
 
 <script>
-  ol.before('before'); // insert string "before" before <ol>
-  ol.after('after'); // insert string "after" after <ol>
+  ol.before('before'); // <ol> নোডের পূর্বে "before" স্ট্রিং
+  ol.after('after'); //  <ol> নোডের পর "after" স্ট্রিং
 
   let liFirst = document.createElement('li');
   liFirst.innerHTML = 'prepend';
-  ol.prepend(liFirst); // insert liFirst at the beginning of <ol>
+  ol.prepend(liFirst); // <ol> এর শুরুতে একটি লিস্ট
 
   let liLast = document.createElement('li');
   liLast.innerHTML = 'append';
-  ol.append(liLast); // insert liLast at the end of <ol>
+  ol.append(liLast); // <ol> এর শেষে একটি লিস্ট
 </script>
 ```
 
-Here's a visual picture of what the methods do:
+মেথডগুলো কিভাবে কাজ করে তার একটি চিত্র এখানে দেখুন:
 
 ![](before-prepend-append-after.svg)
 
-So the final list will be:
+সুতরাং সর্বশেষে আমাদের DOM টি হবে এমন:
 
 ```html
 before
@@ -152,9 +152,9 @@ before
 after
 ```
 
-As said, these methods can insert multiple nodes and text pieces in a single call.
+ইতোমধ্যে আমরা জেনেছি আমরা একাধিক নোড বা স্ট্রিং একবার কলের মাধ্যমে সংযুক্ত করতে পারি।
 
-For instance, here a string and an element are inserted:
+যেমন, এখানে আমরা একটি স্ট্রিং এবং একটি এলিমেন্ট সংযুক্ত করছি:
 
 ```html run
 <div id="div"></div>
@@ -163,9 +163,9 @@ For instance, here a string and an element are inserted:
 </script>
 ```
 
-Please note: the text is inserted "as text", not "as HTML", with proper escaping of characters such as `<`, `>`.
+দয়া করে নোট করুন: এখানে টেক্সটি একটি স্ট্রিং হিসেবেই সংযুক্ত হবে, "HTML" হিসেবে নয়, প্রপারলি ক্যারাক্টার `<`, `>` সমূহ এস্কেপ হবে।
 
-So the final HTML is:
+সুতরাং সর্বশেষ আউটপুটটি হবে এমন:
 
 ```html run
 *!*
@@ -175,26 +175,25 @@ So the final HTML is:
 <div id="div"></div>
 ```
 
-In other words, strings are inserted in a safe way, like `elem.textContent` does it.
+অন্য ভাবে বলা যায়, স্ট্রিং সমূহ নিরাপদ ভাবে সংযুক্ত হয়, `elem.textContent` এর মত।
 
-So, these methods can only be used to insert DOM nodes or text pieces.
-
-But what if we'd like to insert an HTML string "as html", with all tags and stuff working, in the same manner as `elem.innerHTML` does it?
+সুতরাং, মেথডসমূহ DOM নোড অথবা টেক্সট হিসেবে সংযুক্ত হয়।
 
+কিন্তু যদি আমরা কোন স্ট্রিংকে "HTML" কন্টেন্ট হিসেবে সংযুক্ত করতে চায়, যা সকল ট্যাগ এবং অন্যান্য ব্যাপার গুলো সহ কাজ করবে অনেকটা `elem.innerHTML` এর মত, এভাবে করা কি সম্ভব?
 ## insertAdjacentHTML/Text/Element
 
-For that we can use another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
+এজন্য আমরা আরেকটি বহুরূপী মেথড ব্যবহার করতে পারি: `elem.insertAdjacentHTML(where, html)`।
 
-The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
+যার প্রথম প্যারামিটারটি হবে পজিশন, অর্থাৎ `elem` এর কোন অবস্থানে সংযুক্ত হবে। নিচে এদের সম্পর্কে আলোচনা করা হল:
 
-- `"beforebegin"` -- insert `html` immediately before `elem`,
-- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
-- `"beforeend"` -- insert `html` into `elem`, at the end,
-- `"afterend"` -- insert `html` immediately after `elem`.
+- `"beforebegin"` -- `elem` শুরুর পূর্বে `html` টি সংযুক্ত হবে,
+- `"afterbegin"` -- `elem` এর শুরুতে `html` টি সংযুক্ত হবে,
+- `"beforeend"` -- `elem` টি শেষ হওয়ার পূর্বে `html` টি সংযুক্ত হবে,
+- `"afterend"` -- `elem` টি শেষ হওয়ার পর `html` টি সংযুক্ত হবে।
 
-The second parameter is an HTML string, that is inserted "as HTML".
+দ্বিতীয় প্যারামিটারটি হবে একটি HTML ট্রিং, যা "HTML" হিসেবে সংযুক্ত হবে।
 
-For instance:
+উদাহরণস্বরূপ:
 
 ```html run
 <div id="div"></div>
@@ -204,7 +203,7 @@ For instance:
 </script>
 ```
 
-...Would lead to:
+...যা দেখতে এমন হবে:
 
 ```html run
 <p>Hello</p>
@@ -212,22 +211,22 @@ For instance:
 <p>Bye</p>
 ```
 
-That's how we can append arbitrary HTML to the page.
+এভাবেই আমরা স্বতন্ত্র HTML পেজে সংযুক্ত করতে পারি।
 
-Here's the picture of insertion variants:
+এখানে সংযুক্তকরণের চিত্রটি দেখুন:
 
 ![](insert-adjacent.svg)
 
-We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML.
+এখানে আমরা পূর্বের এবং বর্তমান ছবিটি লক্ষ্য করলে বুঝতে পারি, দুইটি ছবিই একই পজিশন নির্দেশ করে, তবে পার্থক্য হল এই মেথডটির সাহায্যে আমরা স্ট্রিংকে HTML কন্টেন্ট হিসেবে সংযুক্ত করতে পারি।
 
-The method has two brothers:
+অনুরূপ আরো দুটি মেথড আছে:
 
-- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` is inserted "as text" instead of HTML,
-- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element.
+- `elem.insertAdjacentText(where, text)` -- পূর্বের মত, তবে এটি স্ট্রিং হিসেবে `text` নিবে এবং "টেক্সট" হিসেবে সংযুক্ত হবে,
+- `elem.insertAdjacentElement(where, elem)` -- একই কাজ করবে, তবে শুধুমাত্র এলিমেন্ট সংযুক্ত হবে।
 
-They exist mainly to make the syntax "uniform". In practice, only `insertAdjacentHTML` is used most of the time. Because for elements and text, we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces.
+তবে বেশিরভাগ ক্ষেত্রে এদের আলাদা করে ব্যবহার করা হয়না। বাস্তবিক ক্ষেত্রে আমরা বেশিরভাগ সময় শুধুমাত্র `insertAdjacentHTML` ব্যবহার করব। কেননা এলিমেন্ট এবং টেক্সটের জন্য আমাদের `append/prepend/before/after` মেথড সমূহ আছে -- টেক্সট ইনসার্শনের জন্য এরা বেশি সুবিধাজনক।
 
-So here's an alternative variant of showing a message:
+আমরা এভাবেও মেসেজটি দেখাতে পারি:
 
 ```html run
 <style>
@@ -249,9 +248,9 @@ So here's an alternative variant of showing a message:
 
 ## Node removal
 
-To remove a node, there's a method `node.remove()`.
+কোন নোড রিমুভ করতে একটি মেথড আছে - `node.remove()`।
 
-Let's make our message disappear after a second:
+চলুন আমাদের মেসেজটিকে এক সেকেন্ড পর DOM হতে রিমুভ করি:
 
 ```html run untrusted
 <style>
@@ -276,32 +275,32 @@ Let's make our message disappear after a second:
 </script>
 ```
 
-Please note: if we want to *move* an element to another place -- there's no need to remove it from the old one.
+দয়া করে নোট করুন: যদি আমরা এলিমেন্টটিকে অন্য আরেক এলিমেন্টের মধ্যে *move* করাতে চাই -- তাহলে আমাদের পূর্বের নোডটি *remove* করতে হবে না।
 
-**All insertion methods automatically remove the node from the old place.**
+**সকল ইনসার্শন মেথড স্বয়ংক্রিয়ভাবে পুরনো নোডটি DOM হতে রিমুভ করে দেয়।**
 
-For instance, let's swap elements:
+উদাহরণস্বরূপ, এলিমেন্টকে অদল বদল করি:
 
 ```html run height=50
 <div id="first">First</div>
 <div id="second">Second</div>
 <script>
-  // no need to call remove
-  second.after(first); // take #second and after it insert #first
+  // remove কল করা লাগবে না
+  second.after(first); // #second টির মধ্যে #first টি সংযুক্ত হবে
 </script>
 ```
 
 ## Cloning nodes: cloneNode
 
-How to insert one more similar message?
+কিভাবে আমরা অনূরূপ আরেকটি মেসেজ সংযুক্ত করত্র পারি?
 
-We could make a function and put the code there. But the alternative way would be to *clone* the existing `div` and modify the text inside it (if needed).
+আমরা একটি ফাংশন তৈরির মাধ্যমে এটি করতে পারি। কিন্তু আমাদের বিকল্প আরেকটি উপায় আছে *clone* যা বর্তমান `div` কে ক্লোন করবে এবং আমরা চাইলে একে পরিবর্তন করতে পারি (যদি আমাদের প্রয়োজন হয়)।
 
-Sometimes when we have a big element, that may be faster and simpler.
+অনেক সময় আমাদের অনেক বড় এলিমেন্ট থাকতে পারে, এক্ষেত্রে এটি সহজে এবং দ্রুত কাজ করবে।
 
-- The call `elem.cloneNode(true)` creates a "deep" clone of the element -- with all attributes and subelements. If we call `elem.cloneNode(false)`, then the clone is made without child elements.
+- `elem.cloneNode(true)` কলে এলিমেন্টটির একটি "ডীপ" ক্লোন তৈরি করে -- সকল সাব এলিমেন্ট এবং অ্যাট্রিবিউট সহ। যদি আমরা `elem.cloneNode(false)` এভাবে ক্রিয়েট করি, তাহলে সাব এলিমেন্ট ব্যতীত ক্লোন হবে।
 
-An example of copying the message:
+মেসেজ কপি করার একটি উদাহরণ:
 
 ```html run height="120"
 <style>
@@ -320,21 +319,21 @@ An example of copying the message:
 
 <script>
 *!*
-  let div2 = div.cloneNode(true); // clone the message
-  div2.querySelector('strong').innerHTML = 'Bye there!'; // change the clone
+  let div2 = div.cloneNode(true); // মেসেজ ক্লোন
+  div2.querySelector('strong').innerHTML = 'Bye there!'; // ক্লোন করা এলিমেন্টের strong এলিমেন্টকে পরিবর্তন
 
-  div.after(div2); // show the clone after the existing div
+  div.after(div2); // div এর পরে ক্লোন করা এলিমেন্টটি দেখানো হল
 */!*
 </script>
 ```
 
 ## DocumentFragment [#document-fragment]
 
-`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
+`DocumentFragment` হল একটি বিশেষ DOM নোড যা একটি র‍্যাপার হিসেবে কাজ করে, এবং একে আমরা অন্য নোডে সংযুক্ত করতে পারি।
 
-We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.
+আমরা অন্যান্য নোড এর মধ্যে সংযুক্তকরণের সময়, এটি সংযুক্ত হওয়ার পরিবর্তে এর কন্টেন্ট সমূহ সংযুক্ত হয়।
 
-For example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
+যেমন, `getListContent` ফাংশনটি `<li>` আইটেমের একটি ফ্রাগমেন্ট তৈরি করে, এবং এর পর `<ul>` এর মধ্যে সংযুক্ত করলাম:
 
 ```html run
 <ul id="ul"></ul>
@@ -358,7 +357,7 @@ ul.append(getListContent()); // (*)
 </script>
 ```
 
-Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends in", so the resulting structure will be:
+দয়া করে নোট করুন, শেষ লাইনে `(*)` আমরা `DocumentFragment` সংযুক্ত করলাম, কিন্তু এটি "মিশ্রিত" অবস্থায় আছে, সুতরাং আউটপুটটি হবে:
 
 ```html
 <ul>
@@ -368,7 +367,7 @@ Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends
 </ul>
 ```
 
-`DocumentFragment` is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:
+`DocumentFragment` কদাচিৎ ব্যবহার হয়। কেন আমাদের এই ধরণের বিশেষ নোডের দরকার হয়, যখন আমরা এটি এভাবে করতে পারি? নিচের উদাহরণটি দেখুন:
 
 ```html run
 <ul id="ul"></ul>
@@ -392,22 +391,22 @@ ul.append(...getListContent()); // append + "..." operator = friends!
 </script>
 ```
 
-We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
+পূর্বেই উল্লেখ করেছি `DocumentFragment` আমাদের বিশেষ কিছু কন্সেপ্টের জন্য দরকার হয়, যেমন [template](info:template-element) এলিমেন্ট, যা পরবর্তীতে আমরা আলোচনা করব।
 
-## Old-school insert/remove methods
+## পুরনো উপায়ে insert/remove মেথডস
 
 [old]
 
-There are also "old school" DOM manipulation methods, existing for historical reasons.
+এছাড়াও কিছু "পুরনো" DOM ম্যানিপুলেশন মেথড আছে, যা এখনো বিদ্যমান।
 
-These methods come from really ancient times. Nowadays, there's no reason to use them, as modern methods, such as `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, are more flexible.
+মেথডগুলো পুরনো জাভাস্ক্রিপ্টে ব্যবহার হত। বর্তমানে, মডার্ন জাভাস্ক্রিপ্টে আমাদের ঐ মেথড সমূহ ব্যবহারের দরকার পড়ে না, যেমন `append`, `prepend`, `before`, `after`, `remove`, `replaceWith` এই মেথড সমূহ অনেক বেশি কার্যকরী।
 
-The only reason we list these methods here is that you can find them in many old scripts:
+এখানে এদের নিয়ে আলোচনার একটি কারণ হল, পুরনো অনেক স্ক্রিপ্টে আমরা এদের ব্যবহার দেখতে পায়:
 
 `parentElem.appendChild(node)`
-: Appends `node` as the last child of `parentElem`.
+: `parentElem` এর সবার শেষে `node` সংযুক্তকরণে।
 
-    The following example adds a new `<li>` to the end of `<ol>`:
+    নিচের উদাহরণে `<ol>` এর একদম শেষে নতুন একটি `<li>` আইটেম সংযুক্তকরণ করা হল:
 
     ```html run height=100
     <ol id="list">
@@ -425,9 +424,9 @@ The only reason we list these methods here is that you can find them in many old
     ```
 
 `parentElem.insertBefore(node, nextSibling)`
-: Inserts `node` before `nextSibling` into `parentElem`.
+: `parentElem` এর নির্দিষ্ট অবস্থানে `node` সংযুক্তকরণ।
 
-    The following code inserts a new list item before the second `<li>`:
+    নিচের উদাহরণে দ্বিতীয় অবস্থানে `<li>` আইটেমটি সংযুক্ত হবে:
 
     ```html run height=100
     <ol id="list">
@@ -444,19 +443,19 @@ The only reason we list these methods here is that you can find them in many old
     */!*
     </script>
     ```
-    To insert `newLi` as the first element, we can do it like this:
+    `newLi` কে প্রথম এলিমেন্ট হিসেবে সংযুক্ত করতে পারি এভাবে:
 
     ```js
     list.insertBefore(newLi, list.firstChild);
     ```
 
 `parentElem.replaceChild(node, oldChild)`
-: Replaces `oldChild` with `node` among children of `parentElem`.
+: `parentElem` এ `oldChild` কে `node` দ্বারা পরিবর্তন।
 
 `parentElem.removeChild(node)`
-: Removes `node` from `parentElem` (assuming `node` is its child).
+: `parentElem` হতে `node` কে বাদ দিতে (ধরে নিন `node` হল `parentElem` এর একটি চাইল্ড)।
 
-    The following example removes first `<li>` from `<ol>`:
+    নিচের উদাহরণে `<ol>` হতে প্রথম `<li>` কে বাদ দেয়া দেখানো হল:
 
     ```html run height=100
     <ol id="list">
@@ -471,13 +470,13 @@ The only reason we list these methods here is that you can find them in many old
     </script>
     ```
 
-All these methods return the inserted/removed node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
+সকল মেথড inserted/removed নোডটিকে রিটার্ন করবে। অন্যভাবে বলা যায়, `parentElem.appendChild(node)` মেথডটি `node` টিকে রিটার্ন করে। তবে সাধারণত আমরা রিটার্ন ভ্যালু ব্যবহার করিনা, বেশিরভাগ ক্ষেত্রে শুধুমাত্র মেথডটি রান হয়।
 
-## A word about "document.write"
+## "document.write" সম্পর্কে কিছু আলোচনা
 
-There's one more, very ancient method of adding something to a web-page: `document.write`.
+এছাড়াও আরো একটি পুরনো উপায় আছে, যার মাধ্যমে আমরা পেজে কিছু দেখায়: `document.write`।
 
-The syntax:
+সিন্ট্যাক্সটি হল:
 
 ```html run
 <p>Somewhere in the page...</p>
@@ -489,73 +488,73 @@ The syntax:
 <p>The end</p>
 ```
 
-The call to `document.write(html)` writes the `html` into page "right here and now". The `html` string can be dynamically generated, so it's kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.
+`document.write(html)` কলের মাধ্যমে আমরা `html` এ "নির্দিষ্ট অবস্থানে" লিখতে পারি। `html` স্ট্রিং ডায়নামিক্যালি জেনারেট হয়, সুতরাং এটি আরো বেশি কার্যকরী। আমরা জাভাস্ক্রিপ্টের সাহায্যে একটি সম্পূর্ন ওয়েবপেজ লিখতে পারি।
 
-The method comes from times when there was no DOM, no standards... Really old times. It still lives, because there are scripts using it.
+মেথডটি অনেক পুরনো যখন কোন স্পেসিফিক DOM ছিল না, বা কোন স্ট্যান্ডার্ড ছিল না। এবং এটি এখনো ব্যবহার হয়, কেননা স্ক্রিপ্টে এটি ব্যবহৃত।
 
-In modern scripts we can rarely see it, because of the following important limitation:
+মডার্ন স্ক্রিপ্টে এটি তেমন ব্যবহার করা হয় না, কেননা এর কিছু লিমিটেশন আছে:
 
-**The call to `document.write` only works while the page is loading.**
+**`document.write` কাজ করে শুধুমাত্র পেজ লোডিংয়ের সময়।**
 
-If we call it afterwards, the existing document content is erased.
+যদি আমরা পরে এটি কল করি, বর্তমান ডকুমেন্ট কন্টেন্টটি মুছে যাবে।
 
-For instance:
+উদাহরণস্বরূপ:
 
 ```html run
 <p>After one second the contents of this page will be replaced...</p>
 *!*
 <script>
-  // document.write after 1 second
-  // that's after the page loaded, so it erases the existing content
+  // ১ সেকেন্ড পর document.write
+  // পেজ লোড হওয়ার পর, এক্সিক্টেন্ট কন্টেন্ট মুছে যাবে
   setTimeout(() => document.write('<b>...By this.</b>'), 1000);
 </script>
 */!*
 ```
 
-So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above.
+সুতরাং এটি পেজ "লোড সম্পন্ন" হওয়ার পর আর ব্যবহার উপযোগী নয়, এটি উপরে আলোচিত অন্যান্য DOM মেথডের মত না।
 
-That's the downside.
+এটিই এর খারাপ দিক।
 
-There's an upside also. Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.
+তবে এর ভালো দিকও আছে। ট্যাকনিক্যালি, `document.write` কল হয় যখন ব্রাউজার ইনকামিং HTML কে পার্স করে, এবং আমরা ডায়নামিক্যালি কিছু লিখতে পারি, ব্রাউজার এটি অন্যান্য HTML টেক্সটের মত মনে করে।
 
-So it works blazingly fast, because there's *no DOM modification* involved. It writes directly into the page text, while the DOM is not yet built.
+সুতরাং এটি অন্যান্য স্ক্রিপ্ট থেকে অনেক দ্রুত কাজ করে, কেননা এক্ষেত্রে কোন *DOM modification* হয়না। এটি সরাসরি পেইজে টেক্সট হিসেবে লিখে, এবং ঐ মূহুর্তেও DOM টিও সম্পুর্ণ বিল্ট হয়না।
 
-So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.
+সুতরাং যদি আমাদের লোডিং টাইমে কোন কন্টেন্ট ডায়নামিক্যালি লিখার দরকার হয়, যেখানে আমাদের দ্রুত করা লাগে, তখন এটি কাজে আসতে পারে। তবে এই ধরণের পরিস্থিতি তেমন আসে না। তারপরও আমাদের এই মেথডসমূহ সম্পর্কে জেনে রাখা উচিত।
 
-## Summary
+## সারাংশ
 
-- Methods to create new nodes:
-    - `document.createElement(tag)` -- creates an element with the given tag,
-    - `document.createTextNode(value)` -- creates a text node (rarely used),
-    - `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.  
+- নতুন নোড তৈরির মেথড:
+    - `document.createElement(tag)` -- প্রদত্ত ট্যাগ অনুযায়ী একটি নতুন *এলিমেন্ট নোড* তৈরি করে,
+    - `document.createTextNode(value)` -- একটি নতুন *টেক্সট নোড* তৈরি করে(কদাচিৎ ব্যবহার হয়),
+    - `elem.cloneNode(deep)` -- এলিমেন্টের ক্লোন করে, যদি `deep==true` হয় তাহলে সকল সাব এলিমেন্ট সহ ক্লোন হয়।
 
-- Insertion and removal:
-    - `node.append(...nodes or strings)` -- insert into `node`, at the end,
-    - `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning,
-    - `node.before(...nodes or strings)` –- insert right before `node`,
-    - `node.after(...nodes or strings)` –- insert right after `node`,
-    - `node.replaceWith(...nodes or strings)` –- replace `node`.
-    - `node.remove()` –- remove the `node`.
+- ইনসার্শন এবং রিমুভাল:
+    - `node.append(...nodes or strings)` -- *নোডের শেষে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+    - `node.prepend(...nodes or strings)` -- *নোডের শুরুতে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+    - `node.before(...nodes or strings)` –- *নোডের পূর্বে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+    - `node.after(...nodes or strings)` –- *নোডের পরে* কোন নোড অথবা স্ট্রিং সংযুক্ত,
+    - `node.replaceWith(...nodes or strings)` –- `node` কে অন্য নোড বা স্ট্রিং দ্বারা রিপ্লেস।
+    - `node.remove()` –- `node` রিমুভ।
 
-    Text strings are inserted "as text".
+    স্ট্রিং সমূহ "text" হিসেবেই সংযুক্ত হয়।
 
-- There are also "old school" methods:
+- এছাড়াও কিছু "পুরনো" মেথড আছে:
     - `parent.appendChild(node)`
     - `parent.insertBefore(node, nextSibling)`
     - `parent.removeChild(node)`
     - `parent.replaceChild(newElem, node)`
 
-    All these methods return `node`.
+    সকল মেথড `node` টিকে ভ্যালু হিসেবে রিটার্ন করে।
 
-- Given some HTML in `html`, `elem.insertAdjacentHTML(where, html)` inserts it depending on the value of `where`:
-    - `"beforebegin"` -- insert `html` right before `elem`,
-    - `"afterbegin"` -- insert `html` into `elem`, at the beginning,
-    - `"beforeend"` -- insert `html` into `elem`, at the end,
-    - `"afterend"` -- insert `html` right after `elem`.
+- এছাড়াও `html` আকারে কোন কিছু সংযুক্ত করতে আছে, `elem.insertAdjacentHTML(where, html)` এবং `where` নির্দেশ করে এটি এলিমেন্টের কোন পজিশনে ইনসার্ট হবে:
+    - `"beforebegin"` -- `elem` শুরুর পূর্বে `html` টি সংযুক্ত হবে,
+    - `"afterbegin"` -- `elem` এর শুরুতে `html` টি সংযুক্ত হবে,
+    - `"beforeend"` -- `elem` টি শেষ হওয়ার পূর্বে `html` টি সংযুক্ত হবে,
+    - `"afterend"` -- `elem` টি শেষ হওয়ার পর `html` টি সংযুক্ত হবে।
 
-    Also there are similar methods, `elem.insertAdjacentText` and `elem.insertAdjacentElement`, that insert text strings and elements, but they are rarely used.
+    এছাড়াও অনুরূপ আরো দুটি মেথড আছে, `elem.insertAdjacentText` এবং `elem.insertAdjacentElement`, যা যথাক্রমে টেক্সট এবং এলিমেন্টকে স্ট্রিং হিসেবে নেয়, তবে এদের ব্যবহার কদাচিৎ।
 
-- To append HTML to the page before it has finished loading:
+- পেজ লোডিং টাইমে কিছু সংযুক্ত করতে:
     - `document.write(html)`
 
-    After the page is loaded such a call erases the document. Mostly seen in old scripts.
+    পেজ লোড হওয়ার পর পুনরায় এটি কল করলে ডকুমেন্টটি মুছে যায়। পুরনো স্ক্রিপ্টে আমরা এদের দেখি।

From ce5a9f11d4a70dadaf724853cb2dab1ccc94cc83 Mon Sep 17 00:00:00 2001
From: Saiful <msisaifulsaif@gmail.com>
Date: Sat, 6 Mar 2021 12:28:21 +0600
Subject: [PATCH 2/2] translate all task and solution

---
 .../1-createtextnode-vs-innerhtml/solution.md |  6 +++---
 .../1-createtextnode-vs-innerhtml/task.md     |  4 ++--
 .../10-clock-setinterval/solution.md          | 12 +++++------
 .../10-clock-setinterval/task.md              |  6 +++---
 .../11-append-to-list/solution.md             |  6 +++---
 .../11-append-to-list/task.md                 |  4 ++--
 .../12-sort-table/solution.md                 | 14 ++++++-------
 .../12-sort-table/task.md                     |  8 ++++----
 .../4-clear-elem/solution.md                  | 10 +++++-----
 .../4-clear-elem/task.md                      |  2 +-
 .../5-why-aaa/solution.md                     | 10 +++++-----
 .../07-modifying-document/5-why-aaa/task.md   | 10 +++++-----
 .../6-create-list/solution.md                 |  2 +-
 .../6-create-list/task.md                     | 16 +++++++--------
 .../7-create-object-tree/solution.md          |  2 +-
 .../7-create-object-tree/task.md              | 20 +++++++++----------
 .../8-tree-count/solution.md                  |  2 +-
 .../8-tree-count/solution.view/index.html     |  4 ++--
 .../8-tree-count/task.md                      |  8 ++++----
 .../9-calendar-table/solution.md              | 14 ++++++-------
 .../9-calendar-table/task.md                  | 12 +++++------
 21 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
index a38f01645..fba9cd84a 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -1,8 +1,8 @@
-Answer: **1 and 3**.
+উত্তরটি হল: **1 and 3**।
 
-Both commands result in adding the `text` "as text" into the `elem`.
+উভয়ই কমান্ড ফলাফল হিসেবে `elem` এ `text` সংযোগ করে।
 
-Here's an example:
+এখানে একটি উদাহরণ দেখুন:
 
 ```html run height=80
 <div id="elem1"></div>
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
index e127bc0ef..fb97f9b65 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
@@ -4,9 +4,9 @@ importance: 5
 
 # createTextNode vs innerHTML vs textContent
 
-We have an empty DOM element `elem` and a string `text`.
+আমাদের একটি খালি DOM এলিমেন্ট `elem` এবং একটি `text` স্ট্রিং আছে।
 
-Which of these 3 commands do exactly the same?
+৩টি কমান্ডের মধ্যে কোন দুইটি একই কাজ করে?
 
 1. `elem.append(document.createTextNode(text))`
 2. `elem.innerHTML = text`
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
index 15238fcf4..64a8a699d 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
@@ -1,6 +1,6 @@
-First, let's make HTML/CSS.
+শুরুতে HTML/CSS তৈরি করি।
 
-Each component of the time would look great in its own `<span>`:
+প্রতিটি কম্পোনেন্টকে `<span>` দ্বারা আলাদা করি:
 
 ```html
 <div id="clock">
@@ -8,9 +8,9 @@ Each component of the time would look great in its own `<span>`:
 </div>
 ```
 
-Also we'll need CSS to color them.
+আমাদের CSS ও পরিবর্তন করতে হবে।
 
-The `update` function will refresh the clock, to be called by `setInterval` every second:
+`update` ফাংশনটি `setInterval` দ্বারা প্রতিসেকেন্ডে কল হয়:
 
 ```js
 function update() {
@@ -32,9 +32,9 @@ function update() {
 }
 ```
 
-In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+`(*)` এই লাইনে আমরা প্রতিবারের তারিখটি পরীক্ষা করি। এ ক্ষেত্রে `setInterval` নির্ভরযোগ্য নাও হতে পারে: এটি কিছু সময় নিতে পারে।
 
-The clock-managing functions:
+আমাদের ফাংশনগুলো হবে:
 
 ```js
 let timerId;
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
index a1b53e337..61c2fa6f5 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@@ -2,10 +2,10 @@ importance: 4
 
 ---
 
-# Colored clock with setInterval
+# একটি ঘড়ি
 
-Create a colored clock like here:
+এইরকম একটি ঘড়ি বানান:
 
 [iframe src="solution" height=60]
 
-Use HTML/CSS for the styling, JavaScript only updates time in elements.
+HTML/CSS এর সাহায্যে স্ট্যাইল করুন, জাভস্ক্রিপ্টের সাহায্যে শুধু সময়টি পরিবর্তন করুন।
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
index 4e77fb5cb..fbda31920 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
@@ -1,7 +1,7 @@
 
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
-  
-The solution:
+আমাদের HTML এর কোন একটি অংশে লিখার জন্য, `insertAdjacentHTML` সবচেয়ে বেশি উপযোগী।
+
+সমাধানটি হল:
 
 ```js
 one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
index 543cd3e46..e631eb7ae 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Insert the HTML in the list
+# লিস্টকে HTML এ লিখা
 
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+এই লিস্টকে `<li>2</li><li>3</li>` নিচের দুইটি `<li>` এর মাঝে লিখুন:
 
 ```html
 <ul id="ul">
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
index 49243e8e3..70a185433 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
@@ -1,4 +1,4 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+এটি খুব সহজেই করা যায়, তবে এটি কিছুটা ট্রিকি, এখানে বিস্তারিত আলোচনা করা হল:
 
 ```js
 let sortedRows = Array.from(table.tBodies[0].rows) // 1
@@ -7,12 +7,12 @@ let sortedRows = Array.from(table.tBodies[0].rows) // 1
 table.tBodies[0].append(...sortedRows); // (3)
 ```
 
-The step-by-step algorthm:
+এখানে ধাপে ধাপে অ্যালগরিদমটি আলোচনা করা হল:
 
-1. Get all `<tr>`, from `<tbody>`.
-2. Then sort them comparing by the content of the first `<td>` (the name field).
-3. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. `<tbody>` হতে সকল `<tr>` কে নিই।
+2. তারপর আমরা `<td>` কে কম্পেয়ার করব (name ফিল্ডটি অনুযায়ী)।
+3. এখন আমরা সঠিক নোড অনুযায়ী তাদের সংযুক্ত করব `.append(...sortedRows)`।
 
-We don't have to remove row elements, just "re-insert", they leave the old place automatically.
+আমাদের রো এলিমেন্টকে রিমুভ করতে হবে না, শুধুমাত্র "re-insert", স্বয়ংক্রিয়ভাবে পুরনো জায়গা গুলো ঠিক হয়ে যায়।
 
-P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.
+বি.দ্র. এক্ষেত্রে, *table* এ `<tbody>` বিদ্যমান, কিন্তু অনেক সময় `<tbody>` নাও থাকতে পারে, কিন্তু DOM এ সর্বদা এটি থাকে।
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
index 7cdba35bc..aac0790d5 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/task.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Sort the table
+# table টিকে সর্ট করুন
 
-There's a table:
+একটি table আছে:
 
 ```html run
 <table>
@@ -30,6 +30,6 @@ There's a table:
 </table>
 ```
 
-There may be more rows in it.
+এখানে আরো বেশি রো থাকতে পারে।
 
-Write the code to sort it by the `"name"` column.
+`"name"` অনুযায়ী কলামটিকে সর্ট করুন।
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
index 62c3386d8..a669272e6 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
@@ -1,5 +1,5 @@
 
-First, let's see how *not* to do it:
+প্রথমত, লক্ষ্য করুন, আমাদের এটি এভাবে করা উচিত হবে না:
 
 ```js
 function clear(elem) {
@@ -9,11 +9,11 @@ function clear(elem) {
 }
 ```
 
-That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped.
+এটি কাজ করবে নাহ, কেননা `remove()` কলে আমাদের `elem.childNodes` কালেকশনে কিছু পরিবর্তন হয়, সুতরাং এলিমেন্টটি সবসময় `0` থেকে শুরু হয়। কিন্তু `i` বৃদ্ধি পায়, এবং কিছু এলিমেন্ট বাদ পড়ে যায়।
 
-The `for..of` loop also does the same.
+`for..of` দ্বারাও কাজ করবে না।
 
-The right variant could be:
+সঠিক উপায়টি হল:
 
 ```js
 function clear(elem) {
@@ -23,7 +23,7 @@ function clear(elem) {
 }
 ```
 
-And also there's a simpler way to do the same:
+এবং আরো সহজে আমরা এভাবে করতে পারি:
 
 ```js
 function clear(elem) {
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
index 938d53470..57584fff1 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # Clear the element
 
-Create a function `clear(elem)` that removes everything from the element.
+একটি ফাংশন লিখুন `clear(elem)` যা এলিমেন্ট হতে সকল কিছু রিমুভ করে।
 
 ```html run height=60
 <ol id="elem">
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
index 6b85168b9..2a7b50aaa 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
@@ -1,9 +1,9 @@
-The HTML in the task is incorrect. That's the reason of the odd thing.
+আমাদের টাস্কটিই ভুল। যে কারণে আমরা এমন অনাকাঙ্ক্ষিত ঘটনার সম্মুখীন হচ্ছি।
 
-The browser has to fix it automatically. But there may be no text inside the `<table>`: according to the spec only table-specific tags are allowed. So the browser adds `"aaa"` *before* the `<table>`.
+ব্রাউজার আমাদের ভুল HTML কে স্বয়ংক্রিয়ভাবে ঠিক করে। `<table>` এর মধ্যে কোন টেক্সট থাকতে পারবে না: স্পেসিফিকেশন অনুযায়ী *table* এ শুধুমাত্র table স্পেসিফিক ট্যাগ থাকতে পারবে। সুতরাং ব্রাউজার `"aaa"` কে `<table>` এর *পূর্বে* যুক্ত করে।
 
-Now it's obvious that when we remove the table, it remains.
+এবং এর ফলে আমরা *table* কে রিমুভ করলেও টেক্সট রয়ে যায়।
 
-The question can be easily answered by exploring the DOM using the browser tools. It shows `"aaa"` before the `<table>`.
+আমরা ব্রাউজার টুলের সাহায্যে দেখলে আরো পরিষ্কারভাবে বুঝতে পারব। `"aaa"` কে `<table>` এর পূর্বে দেখাবে।
 
-The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.
+HTML স্ট্যান্ডার্ডে আমাদের ভুল HTML সমূহকে কিভাবে প্রসেস করবে তা আলোচনা করা হয়েছে, এবং এক্ষেত্রে ব্রাউজার এটিকে স্বয়ংক্রিয়ভাবে ঠিক করে।
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
index f87074dba..dd81accf4 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
@@ -2,13 +2,13 @@ importance: 1
 
 ---
 
-# Why does "aaa" remain?
+# কেন "aaa" অবশিষ্ট থাকে?
 
-In the example below, the call `table.remove()` removes the table from the document.
+নিচের উদাহরণে, `table.remove()` এর মাধ্যমে ডকুমেন্ট হতে টেবিল টি রিমুভ করা হয়।
 
-But if you run it, you can see that the text `"aaa"` is still visible.
+কিন্তু যদি আমরা এটি রান করি, তাহলে আমরা `"aaa"` কে ডকুমেন্টে দেখব।
 
-Why does that happen?
+কেন এটি রয়ে যায়?
 
 ```html height=100 run
 <table id="table">
@@ -22,6 +22,6 @@ Why does that happen?
   alert(table); // the table, as it should be
 
   table.remove();
-  // why there's still aaa in the document?
+  // কেন ডকুমেন্টে "aaa" অবশিষ্ট রয়ে গেল?
 </script>
 ```
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
index 1669be18f..6751a4d43 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
@@ -1 +1 @@
-Please note the usage of `textContent` to assign the `<li>` content.
+দয়া করে নোট করুন `<li>` এর কন্টেন্ট হিসেবে অ্যাসাইন করতে আমরা `textContent` ব্যবহার করব।
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md
index 43b0a34a7..6e5410c5e 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/task.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md
@@ -2,18 +2,18 @@ importance: 4
 
 ---
 
-# Create a list
+# একটি লিস্ট তৈরি
 
-Write an interface to create a list from user input.
+একটি ইন্টারফেস লিখুন যা ইউজার ইনপুট হতে একটি লিস্ট তৈরি করে।
 
-For every list item:
+প্রতিটি লিস্ট আইটেম:
 
-1. Ask a user about its content using `prompt`.
-2. Create the `<li>` with it and add it to `<ul>`.
-3. Continue until the user cancels the input (by pressing `key:Esc` or CANCEL in prompt).
+1. ইউজার হতে কন্টেন্ট নিবে `prompt` এর মাধ্যমে।
+2. `<li>` তৈরি করবে এবং একে `<ul>` এর মধ্যে সংযুক্ত করবে।
+3. ইউজার ক্যান্সেল করার পূর্ব পর্যন্ত এটি চলতে থাকবে (`key:Esc` চাপার মাধ্যমে এটি ক্যান্সেল হয়)।
 
-All elements should be created dynamically.
+সকল এলিমেন্ট স্বয়ংক্রিয়ভাবে তৈরি হয়।
 
-If a user types HTML-tags, they should be treated like a text.
+যদি ইউজার HTML-tags টাইপ করে, এটি টেক্সট হিসেবে কাজ করবে।
 
 [demo src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
index d29636ee2..23af6c395 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
@@ -1,4 +1,4 @@
-The easiest way to walk the object is to use recursion.
+সবচেয়ে সহজ উপায়টি হল রিকার্সিভলি অবজেক্টকে ইটারেট করা।
 
 1. [The solution with innerHTML](sandbox:innerhtml).
 2. [The solution with DOM](sandbox:build-tree-dom).
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
index 5ec1a01bc..358c40262 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Create a tree from the object
+# অবজেক্ট হতে একটি ট্রি তৈরি করুন
 
-Write a function `createTree` that creates a nested `ul/li` list from the nested object.
+`createTree` নামের একটি ফাংশন লিখুন যেটি একটি নেস্টেড `ul/li` লিস্ট ক্রিয়েট করবে একটি নেস্টেড অবজেক্ট হতে।
 
-For instance:
+উদাহরণস্বরূপ:
 
 ```js
 let data = {
@@ -28,7 +28,7 @@ let data = {
 };
 ```
 
-The syntax:
+সিন্ট্যাক্সটি:
 
 ```js
 let container = document.getElementById('container');
@@ -37,15 +37,15 @@ createTree(container, data); // creates the tree in the container
 */!*
 ```
 
-The result (tree) should look like this:
+ফলাফলটি দেখতে এমন হবে:
 
 [iframe border=1 src="build-tree-dom"]
 
-Choose one of two ways of solving this task:
+নিচের যে কোন একটি উপায়ে এট সমাধান করুন:
 
-1. Create the HTML for the tree and then assign to `container.innerHTML`.
-2. Create tree nodes and append with DOM methods.
+1. HTML ট্রি নোডটি তৈরি করে `container.innerHTML` এ অ্যাসাইন করুন।
+2. ট্রি নোড তৈরি করে DOM মেথডের সাহায্যে সংযুক্ত করা।
 
-Would be great if you could do both.
+যদি আপনি দুই উপায়েই করতে পারেন এটি আরো ভালো হবে।
 
-P.S. The tree should not have "extra" elements like empty `<ul></ul>` for the leaves.
+বি.দ্র. ট্রি টিতে কোন "অতিরিক্ত" এম্পটি `<ul></ul>` থাকবে না।
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
index 43b9a362c..94f85e4a4 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
@@ -1 +1 @@
-To append text to each `<li>` we can alter the text node `data`.
+আমরা `<li>` এ টেক্সট নোডের `data` প্রপার্টির সাথে মানটি যুক্ত করে দিব।
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
index ec44bfda1..f13028a2b 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
@@ -43,11 +43,11 @@
     let lis = document.getElementsByTagName('li');
 
     for (let li of lis) {
-      // get the count of all <li> below this <li>
+      // সকল লিস্টকে গণনা <li> below this <li>
       let descendantsCount = li.getElementsByTagName('li').length;
       if (!descendantsCount) continue;
 
-      // add directly to the text node (append to the text)
+      // মানটি লিখা
       li.firstChild.data += ' [' + descendantsCount + ']';
     }
   </script>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
index d6343bf3b..b5bc69650 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/task.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Show descendants in a tree
+# UL এর নেস্টেড লিস্ট এর সংখ্যা
 
-There's a tree organized as nested `ul/li`.
+একটি `ul/li` এর ট্রি আছে।
 
-Write the code that adds to each `<li>` the number of its descendants. Skip leaves (nodes without children).
+প্রতিটি `ul` এর অধীনে কতটি `<li>` আছে দেখান। (চিল্ড্রেন ব্যাতীত) নোড সমূহ বাদ যাবে।
 
-The result:
+ফলাফলটি হবে:
 
 [iframe border=1 src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
index de8be56e9..9dd75be05 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
@@ -1,9 +1,9 @@
-We'll create the table as a string: `"<table>...</table>"`, and then assign it to  `innerHTML`.
+আমরা টেবল টি জেনারেট করে: `"<table>...</table>"`, এই প্রপার্টিতে `innerHTML` সেট করে দিব।
 
-The algorithm:
+ধাপসমূহ হবে:
 
-1. Create the table header with `<th>` and weekday names.
-2. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`).
-3. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with `<td></td>`.
-4. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `<td>` to the calendar. If that's a Sunday, then add a newline <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.
-5. If the month has finished, but the table row is not yet full, add empty `<td>` into it, to make it square.
+1. প্রথমে হেডার রো তৈরি `<th>` করি এবং সপ্তাহের নাম লিখি।
+2. *date* অবজেক্ট করি `d = new Date(year, month-1)`। এবং `month` এর প্রথম দিনটি নেব (জাভাস্ক্রিপ্টে মাস শুরু হয় `0` হতে, `1` হতে না)।
+3. শুরুর কয়েকটি সেল `d.getDay()` খালি হতে পারে। তাদের এম্পটি `<td></td>` দ্বারা পূর্ণ করুন।
+4. দিনের মান বৃদ্ধি করুন `d`: `d.setDate(d.getDate()+1)`। যদি `d.getMonth()` পরবর্তী মাস না হয়, তাহলে ক্যালেন্ডারে তারিখটি লিখুন `<td>`। যদি দিনটি রবিবার হয়, তাহলে নতুন লাইনে যান <code>"&lt;/tr&gt;&lt;tr&gt;"</code>।
+5. যদি সম্পূর্ণ মাসটি শেষ হয়, এবং টেবলটি সম্পূর্ণ না হয়, খালি `<td>` দ্বারা পূর্ণ করুন।
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
index 37b1a60d2..bf53008f7 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
@@ -2,16 +2,16 @@ importance: 4
 
 ---
 
-# Create a calendar
+# ক্যালেন্ডার লিখা
 
-Write a function `createCalendar(elem, year, month)`.
+একটি ফাংশন লিখুন `createCalendar(elem, year, month)`।
 
-The call should create a calendar for the given year/month and put it inside `elem`.
+ফাংশন কলে `elem` এর মধ্যে একটি ক্যালেন্ডার তৈরি হবে মাস এবং বছর অনুযায়ী।
 
-The calendar should be a table, where a week is `<tr>`, and a day is `<td>`. The table top should be `<th>` with weekday names: the first day should be Monday, and so on till Sunday.
+ক্যালেন্ডারটি একটি *table* এ হবে, যেখানে সপ্তাহসমূহ হবে `<tr>` এ, এবং দিনগুলো থাকবে `<td>` এ। এবং একদম উপরের রোতে `<th>` সপ্তাহের দিন গুলোর নাম থাকবে: সপ্তাহ শুরু হবে সোমবার দিয়ে, এবং শেষ হবে রবিবারে।
 
-For instance, `createCalendar(cal, 2012, 9)` should generate in element `cal` the following calendar:
+যেমন, `createCalendar(cal, 2012, 9)` এই এলিমেন্টের `cal` জন্য নিচের ক্যালেন্ডারটি বানাবে:
 
 [iframe height=210 src="solution"]
 
-P.S. For this task it's enough to generate the calendar, should not yet be clickable.
+বি.দ্র. এই টাস্কটিতে শুধু ক্যালেন্ডারটি জেনারেট করলেই হবে, অন্য কোন ফাংশনালিটির প্রয়োজন নেই।
