Merge pull request #186 from msisaifu/modifying-document

Modifying the document

Author: jaamaalxyz

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>

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`

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md

@@ -1,16 +1,16 @@
-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">
   <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</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;

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 এর সাহায্যে স্ট্যাইল করুন, জাভস্ক্রিপ্টের সাহায্যে শুধু সময়টি পরিবর্তন করুন।

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>');

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">

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 এ সর্বদা এটি থাকে।

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"` অনুযায়ী কলামটিকে সর্ট করুন।

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) {

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">

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 সমূহকে কিভাবে প্রসেস করবে তা আলোচনা করা হয়েছে, এবং এক্ষেত্রে ব্রাউজার এটিকে স্বয়ংক্রিয়ভাবে ঠিক করে।

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>
 ```

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` ব্যবহার করব।

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"]

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).

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>` থাকবে না।

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` প্রপার্টির সাথে মানটি যুক্ত করে দিব।

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>

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"]

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>` দ্বারা পূর্ণ করুন।

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.
+বি.দ্র. এই টাস্কটিতে শুধু ক্যালেন্ডারটি জেনারেট করলেই হবে, অন্য কোন ফাংশনালিটির প্রয়োজন নেই।