Modifying the document by msisaifu · Pull Request #186 · javascript-tutorial/bn.javascript.info

Original file line number	Diff line number	Diff line change
		@@ -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>
Expand Down

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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`
Expand Down

12 changes: 6 additions & 6 deletions 2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md

Original file line number	Diff line number	Diff line change
		@@ -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() {
Expand All		@@ -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;
Expand Down

6 changes: 3 additions & 3 deletions 2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 এর সাহায্যে স্ট্যাইল করুন, জাভস্ক্রিপ্টের সাহায্যে শুধু সময়টি পরিবর্তন করুন।

6 changes: 3 additions & 3 deletions 2-ui/1-document/07-modifying-document/11-append-to-list/solution.md

Original file line number	Diff line number	Diff line change
		@@ -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>');
Expand Down

4 changes: 2 additions & 2 deletions 2-ui/1-document/07-modifying-document/11-append-to-list/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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">
Expand Down

14 changes: 7 additions & 7 deletions 2-ui/1-document/07-modifying-document/12-sort-table/solution.md

Original file line number	Diff line number	Diff line change
		@@ -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
Expand All		@@ -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 এ সর্বদা এটি থাকে।

8 changes: 4 additions & 4 deletions 2-ui/1-document/07-modifying-document/12-sort-table/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,9 +2,9 @@ importance: 5

		---

		# Sort the table
		# table টিকে সর্ট করুন

		There's a table:
		একটি table আছে:

		```html run
		<table>
Expand All		@@ -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"` অনুযায়ী কলামটিকে সর্ট করুন।

10 changes: 5 additions & 5 deletions 2-ui/1-document/07-modifying-document/4-clear-elem/solution.md

Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@

		First, let's see how not to do it:
		প্রথমত, লক্ষ্য করুন, আমাদের এটি এভাবে করা উচিত হবে না:

		```js
		function clear(elem) {
Expand All		@@ -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) {
Expand All		@@ -23,7 +23,7 @@ function clear(elem) {
		}
		```

		And also there's a simpler way to do the same:
		এবং আরো সহজে আমরা এভাবে করতে পারি:

		```js
		function clear(elem) {
Expand Down

2 changes: 1 addition & 1 deletion 2-ui/1-document/07-modifying-document/4-clear-elem/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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">
Expand Down

10 changes: 5 additions & 5 deletions 2-ui/1-document/07-modifying-document/5-why-aaa/solution.md

Original file line number	Diff line number	Diff line change
		@@ -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 সমূহকে কিভাবে প্রসেস করবে তা আলোচনা করা হয়েছে, এবং এক্ষেত্রে ব্রাউজার এটিকে স্বয়ংক্রিয়ভাবে ঠিক করে।

10 changes: 5 additions & 5 deletions 2-ui/1-document/07-modifying-document/5-why-aaa/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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">
Expand All		@@ -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 changes: 1 addition & 1 deletion 2-ui/1-document/07-modifying-document/6-create-list/solution.md

Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Please note the usage of `textContent` to assign the `<li>` content.
		দয়া করে নোট করুন `<li>` এর কন্টেন্ট হিসেবে অ্যাসাইন করতে আমরা `textContent` ব্যবহার করব।

16 changes: 8 additions & 8 deletions 2-ui/1-document/07-modifying-document/6-create-list/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 changes: 1 addition & 1 deletion 2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md

Original file line number	Diff line number	Diff line change
		@@ -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).

20 changes: 10 additions & 10 deletions 2-ui/1-document/07-modifying-document/7-create-object-tree/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = {
Expand All		@@ -28,7 +28,7 @@ let data = {
		};
		```

		The syntax:
		সিন্ট্যাক্সটি:

		```js
		let container = document.getElementById('container');
Expand All		@@ -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 changes: 1 addition & 1 deletion 2-ui/1-document/07-modifying-document/8-tree-count/solution.md

Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		To append text to each `<li>` we can alter the text node `data`.
		আমরা `<li>` এ টেক্সট নোডের `data` প্রপার্টির সাথে মানটি যুক্ত করে দিব।

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down

8 changes: 4 additions & 4 deletions 2-ui/1-document/07-modifying-document/8-tree-count/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"]

14 changes: 7 additions & 7 deletions 2-ui/1-document/07-modifying-document/9-calendar-table/solution.md

Original file line number	Diff line number	Diff line change
		@@ -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>"</tr><tr>"</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>"</tr><tr>"</code>।
		5. যদি সম্পূর্ণ মাসটি শেষ হয়, এবং টেবলটি সম্পূর্ণ না হয়, খালি `<td>` দ্বারা পূর্ণ করুন।

12 changes: 6 additions & 6 deletions 2-ui/1-document/07-modifying-document/9-calendar-table/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -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.
		বি.দ্র. এই টাস্কটিতে শুধু ক্যালেন্ডারটি জেনারেট করলেই হবে, অন্য কোন ফাংশনালিটির প্রয়োজন নেই।