From 658b0c488517bc66a3dadc6d02a3852fb24c57b0 Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 01:37:08 +0430
Subject: [PATCH 1/8] Update article.md

---
 .../01-introduction-browser-events/article.md | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index 19394e49e..5cb20dd64 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -1,38 +1,38 @@
-# Introduction to browser events
+# درامدی بر رویدادهای مرورگر
 
-*An event* is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM).
+*یک رویداد* نشانه‌ای از چیزی است که اتفاق افتاده است. همه‌ی عناصر درخت DOM این نشانه‌ها را تولید می‌کنند (اما رویدادها محدود به درخت DOM نیستند).
 
-Here's a list of the most useful DOM events, just to take a look at:
+در اینجا صرفا برای آشنایی اولیه، لیستی از پرکاربردترین رویدادهای DOM اورده شده:
 
-**Mouse events:**
-- `click` -- when the mouse clicks on an element (touchscreen devices generate it on a tap).
-- `contextmenu` -- when the mouse right-clicks on an element.
-- `mouseover` / `mouseout` -- when the mouse cursor comes over / leaves an element.
-- `mousedown` / `mouseup` -- when the mouse button is pressed / released over an element.
-- `mousemove` -- when the mouse is moved.
+**رویدادهای موس:**
+- `click` -- زمانی که موس روی یک عنصر کلیک می‌کند (دستگاه‌های لمسی این رویدادها هنگام ضربه زدن ایجاد می‌کنند).
+- `contextmenu` -- زمانی که موس روی یک عنصر راست‌کلیک می‌کند.
+- `mouseover` / `mouseout` -- زمانی که اشاره‌گر موس روی/بیرون یک عنصر می‌رود..
+- `mousedown` / `mouseup` -- زمانی که کلید موس روی عنصر فشرده/رها می‌شود.
+- `mousemove` -- زمانی که اشاره‌گر موس حرکت می‌کند.
 
-**Keyboard events:**
-- `keydown` and `keyup` -- when a keyboard key is pressed and released.
+**رویدادهای صفحه‌کلید:**
+- `keydown` و `keyup` -- زمانی که یک کلید از صفحه‌کلید فشرده/رها می‌شود.
 
-**Form element events:**
-- `submit` -- when the visitor submits a `<form>`.
-- `focus` --  when the visitor focuses on an element, e.g. on an `<input>`.
+**رویدادهای عناصر form:**
+- `submit` -- زمانی که بازدیدکننده یک `<form>` را ثبت می‌کند.
+- `focus` -- زمانی بازدیدکننده روی یک عنصر تمرکز کند, برای مثال یک `<input>`.
 
-**Document events:**
-- `DOMContentLoaded` -- when the HTML is loaded and processed, DOM is fully built.
+**رویدادهای :**
+- `DOMContentLoaded` -- زمانی که سند HTML لود و پردازش شود، همچنین درخت DOM نیز کاملا تشکیل شده است.
 
-**CSS events:**
-- `transitionend` -- when a CSS-animation finishes.
+**رویدادهای CSS:**
+- `transitionend` -- زمانی که یک انیمیشن CSS تمام می‌شود.
 
-There are many other events. We'll get into more details of particular events in next chapters.
+رویدادهای متعدد دیگری نیز وجود دارد. درباره  جزئیات مخصوص به هرکدام از رویدادها در بخش‌های بعدی صحبت می‌کنیم.
 
-## Event handlers
+## کنترل‌کننده‌های رویدادها
 
-To react on events we can assign a *handler* -- a function that runs in case of an event.
+برای واکنش به این رویداد‌ها باید یک *کنترل‌کننده* به آن اختصاص دهیم -- یک تابع که در زمان اتفاق افتادن یک رویداد اجرا می‌شود.
 
-Handlers are a way to run JavaScript code in case of user actions.
+کنترل‌کننده‌ها یک روش برای اجرای کدهای JavaScript در جواب به رفتارهای کاربر هستند.
 
-There are several ways to assign a handler. Let's see them, starting from the simplest one.
+چندین راه برای اختصاص کنترل‌کننده‌ها وجود دارد. برای آشنا شدن با آنها، از ساده‌ترین روش شروع می‌کنیم.
 
 ### HTML-attribute
 

From 5acc1e63f62bb572baa1f7d93294d1c3f58f94db Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 13:44:05 +0430
Subject: [PATCH 2/8] Update article.md

---
 .../01-introduction-browser-events/article.md | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index 5cb20dd64..d153e9265 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -34,97 +34,97 @@
 
 چندین راه برای اختصاص کنترل‌کننده‌ها وجود دارد. برای آشنا شدن با آنها، از ساده‌ترین روش شروع می‌کنیم.
 
-### HTML-attribute
+### صفت HTML
 
-A handler can be set in HTML with an attribute named `on<event>`.
+یک کنترل‌کننده می‌تواند درون HTML با یک صفتی به نام `on<event>` تعریف شود.
 
-For instance, to assign a `click` handler for an `input`, we can use `onclick`, like here:
+برای مثال اگر بخواهیم یک کنترل‌کننده `click` برای یک `input` اختصاص دهیم، مشابه مثال زیر از `onclick` استفاده می‌کنیم:
 
 ```html run
-<input value="Click me" *!*onclick="alert('Click!')"*/!* type="button">
+<input value="روی من کلیک کن" *!*onclick="alert('کلیک!')"*/!* type="button">
 ```
 
-On mouse click, the code inside `onclick` runs.
+در زمان کلیک موس، کدی که داخل `onclick` است اجرا خواهد شد.
 
-Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we forget that the code is inside the attribute and use double quotes inside, like this:  `onclick="alert("Click!")"`, then it won't work right.
+توجه کنید که داخل `onclick` ما از سینگل کوتیشن استفاده کردیم، چون که خود صفت درون یک دابل‌کوتیشن تعریف شده. اگر فراموش کنیم که کد داخل یک صفت است و از دابل‌کوتیشن استفاده کنیم، مثل این: `onclick="alert("کلیک!")"`، کد ما کار نخواهد کرد.
 
-An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there.
+صفت HTML جای آنچنان مناسبی برای نوشتن کد‌های طولانی نیست. پس بهتر است یک تابع جاوااسکریپت ایجاد کنیم و درون این صفت آنرا صدا بزنیم.
 
-Here a click runs the function `countRabbits()`:
+اینجا یک کلیک، تابع `countRabbits()` را فراخوانی می‌کند:
 
 ```html autorun height=50
 <script>
   function countRabbits() {
     for(let i=1; i<=3; i++) {
-      alert("Rabbit number " + i);
+      alert("تعداد خرگوش " + i);
     }
   }
 </script>
 
-<input type="button" *!*onclick="countRabbits()"*/!* value="Count rabbits!">
+<input type="button" *!*onclick="countRabbits()"*/!* value="خرگوش‌ها را بشمار!">
 ```
 
-As we know, HTML attribute names are not case-sensitive, so `ONCLICK` works as well as `onClick` and `onCLICK`... But usually attributes are lowercased: `onclick`.
+همانطور که می‌دانیم، صفت‌های HTML به بزرگی و کوچکی حروف (case-sensitive) وابسته نیستند، پس ‍`ONCLICK` مانند `onClick` و `onCLICK` کار می‌کند ... اما معمولا صفت‌ها با حروف کوچک نوشته می‌شوند، مانند: `onclick`.
 
-### DOM property
+### خاصیت DOM
 
-We can assign a handler using a DOM property `on<event>`.
+ما با استفاده از یک خاصیت DOM به نام `on<event>` می‌توانیم یک کنترل‌کننده تعریف کنیم.
 
-For instance, `elem.onclick`:
+برای مثال، `elem.onclick`:
 
 ```html autorun
-<input id="elem" type="button" value="Click me">
+<input id="elem" type="button" value="روی من کلیک کن">
 <script>
 *!*
   elem.onclick = function() {
-    alert('Thank you');
+    alert('ممنونم');
   };
 */!*
 </script>
 ```
 
-If the handler is assigned using an HTML-attribute then the browser reads it, creates a new function from the attribute content and writes it to the DOM property.
+اگر که کنترل‌کننده توسط یک صفت HTML تعریف‌شده باشد، مرورگر آنرا می‌خواند و یک تابع جدید از مقدار آن صفت ایجاد می‌کند و آنرا به خاصیت متناظر DOM اختصاص می‌دهد.
 
-So this way is actually the same as the previous one.
+پس این روش درواقع شبیه روش قبلی است.
 
-These two code pieces work the same:
+این دو قطعه کد همانند هم عمل می‌کنند:
 
 1. Only HTML:
 
     ```html autorun height=50
-    <input type="button" *!*onclick="alert('Click!')"*/!* value="Button">
+    <input type="button" *!*onclick="alert('کلیک!')"*/!* value="دکمه">
     ```
 2. HTML + JS:
 
     ```html autorun height=50
-    <input type="button" id="button" value="Button">
+    <input type="button" id="button" value="دکمه">
     <script>
     *!*
       button.onclick = function() {
-        alert('Click!');
+        alert('کلیک!');
       };
     */!*
     </script>
     ```
 
-In the first example, the HTML attribute is used to initialize the `button.onclick`, while in the second example -- the script, that's all the difference.
+در مثال اولی، ما از صفت HTML برای مقدار دهی به `button.onclick` استفاده کردیم، درصورتی که در مثال دوم، این کار با کد انجام شده. تنها تفاوتشان همین است.
 
-**As there's only one `onclick` property, we can't assign more than one event handler.**
+**از آنجایی که فقط یک خاصیت `onclick` روی عنصر وجود دارد، نمی‌توانیم بیشتر از یک کنترل‌کننده‌ برای این رویداد تعریف کنیم.**
 
-In the example below adding a handler with JavaScript overwrites the existing handler:
+در مثال زیر، وقتی که یک کنترل‌کننده توسط جاواسکریپت به عنصر اختصاص می‌دهیم، می‌بینیم که جایگزین کنترل‌کننده قبلی می‌شود.
 
 ```html run height=50 autorun
-<input type="button" id="elem" onclick="alert('Before')" value="Click me">
+<input type="button" id="elem" onclick="alert('قبل')" value="روی من کلیک کن">
 <script>
 *!*
-  elem.onclick = function() { // overwrites the existing handler
-    alert('After'); // only this will be shown
+  elem.onclick = function() { // کنترل‌کننده فعلی را رونویسی می‌کند
+    alert('بعد'); // فقط این پیام نمایش داده می‌شود
   };
 */!*
 </script>
 ```
 
-To remove a handler -- assign `elem.onclick = null`.
+برای برداشتن یا حذف یک کنترل کننده، می‌توانیم از `elem.onclick = null` استفاده کنیم.
 
 ## Accessing the element: this
 

From 6455495677b1a8cf104b308522fba5414d66c19b Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 14:24:29 +0430
Subject: [PATCH 3/8] Update article.md

---
 .../01-introduction-browser-events/article.md | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index d153e9265..f6ff15552 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -126,72 +126,72 @@
 
 برای برداشتن یا حذف یک کنترل کننده، می‌توانیم از `elem.onclick = null` استفاده کنیم.
 
-## Accessing the element: this
+## دسترسی به عنصر: this
 
-The value of `this` inside a handler is the element. The one which has the handler on it.
+مقدار `this` داخل یک کنترل‌کننده خود عنصر است. عنصری که کنترل‌کننده روی آن تعریف شده.
 
-In the code below `button` shows its contents using `this.innerHTML`:
+در کد زیر `button` محتویات خود را با `this.innerHTML` نمایش می‌دهد:
 
 ```html height=50 autorun
-<button onclick="alert(this.innerHTML)">Click me</button>
+<button onclick="alert(this.innerHTML)">روی من کلیک کن</button>
 ```
 
-## Possible mistakes
+## اشتباهات احتمالی
 
-If you're starting to work with events -- please note some subtleties.
+اگر که به تازگی می‌خواهید با رویدادها کار کنید، به این نکات مهم توجه کنید.
 
-We can set an existing function as a handler:
+ما می‌توانیم تابعی که از قبل تعریف شده و وجود دارد را به عنوان کنترل‌کننده استفاده کنیم.
 
 ```js
 function sayThanks() {
-  alert('Thanks!');
+  alert('ممنونم!');
 }
 
 elem.onclick = sayThanks;
 ```
 
-But be careful: the function should be assigned as `sayThanks`, not `sayThanks()`.
+اما مراقب باشید: تابع باید به صورت `sayThanks` به خاصیت DOM اختصاص یابد، نه به صورت `sayThanks()`.
 
 ```js
-// right
+// درست
 button.onclick = sayThanks;
 
-// wrong
+// اشتباه
 button.onclick = sayThanks();
 ```
 
-If we add parentheses, then `sayThanks()` becomes is a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work.
+اگر که ما پرانتزها را اضافه کنیم تابع `sayThanks()` صدا زده می‌شود. پس مورد دوم درواقع *خروجی* حاصل از اجرای تابع را، که `undefined` است (چون تابع چیزی را باز نمی‌گرداند)، به عنوان کنترل‌کننده به `onclick` اختصاص می‌دهد، که قاعدتا کار نمی‌کند.
 
-...On the other hand, in the markup we do need the parentheses:
+...از سوی دیگر، ما در کد HTML به پرانتز ها نیاز داریم:
 
 ```html
 <input type="button" id="button" onclick="sayThanks()">
 ```
 
-The difference is easy to explain. When the browser reads the attribute, it creates a handler function with body from the attribute content.
+توضیح و توجیه این تفاوت آسان است. زمانی که مرورگر مقدار صفت را می‌خواند، یک کنترل‌کننده با بدنه‌‌ای شامل محتویات آن صفت می‌سازد.
 
-So the markup generates this property:
+پس چیزی شبیه این خاصیت ایجاد می‌شود:
 ```js
 button.onclick = function() {
 *!*
-  sayThanks(); // <-- the attribute content goes here
+  sayThanks(); // <-- محتویات صفت اینجا قرار می‌گیرد
 */!*
 };
 ```
 
-**Don't use `setAttribute` for handlers.**
+**برای کنترل‌کننده‌ها از `setAttribute` استفاده نکنید.**
 
-Such a call won't work:
+این چنین فراخوانی‌ای کار نخواهد کرد:
 
 ```js run no-beautify
-// a click on <body> will generate errors,
-// because attributes are always strings, function becomes a string
+// یک کلیک روی <body> باعث بروز خطا می‌شود،
+// چون که صفت‌ها همیشه رشته هستند، و تابع تبدیل به رشته می‌شود
 document.body.setAttribute('onclick', function() { alert(1) });
 ```
 
-**DOM-property case matters.**
+**بزرگی و کوچکی حروف برای خاصیت‌های DOM اهمیت‌دارد.**
 
-Assign a handler to `elem.onclick`, not `elem.ONCLICK`, because DOM properties are case-sensitive.
+کنترل‌کننده‌ ‌را به `elem.onclick` اختصاص دهید، نه به `elem.ONCLICK`، چونکه خصوصیات عناصر DOM به بزرگی و کوچکی حروف حساس هستند.
 
 ## addEventListener
 

From a31ee21d6768f710476db00dc2df01132634b2ca Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 14:55:32 +0430
Subject: [PATCH 4/8] Update article.md

---
 .../01-introduction-browser-events/article.md | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index f6ff15552..4249a6b56 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -195,62 +195,62 @@ document.body.setAttribute('onclick', function() { alert(1) });
 
 ## addEventListener
 
-The fundamental problem of the aforementioned ways to assign handlers -- we can't assign multiple handlers to one event.
+مشکل اساسی با روش‌هایی که در بالا درباره تعریف و اختصاص دادن کنترل‌کننده‌ها گفته شد، این است که نمی‌توانیم چند گنترل‌کننده‌ را به یک رویداد اختصاص دهیم.
 
-Let's say, one part of our code wants to highlight a button on click, and another one wants to show a message on the same click.
+فرض کنیم که یک قسمت از کد می‌خواهد که دکمه‌ای را هنگام کلیک شدن، هایلایت کند، و کد دیگری که می‌خواهد در زمان همان کلیک پیغامی را نمایش دهد.
 
-We'd like to assign two event handlers for that. But a new DOM property will overwrite the existing one:
+معمولا می‌خواهیم که دو کنترل‌کننده برای آن تعریف کنیم. ولی می‌دانیم که مقداردهی خاصیت DOM مقدار قبلی را رونویسی می‌کند:
 
 ```js no-beautify
 input.onclick = function() { alert(1); }
 // ...
-input.onclick = function() { alert(2); } // replaces the previous handler
+input.onclick = function() { alert(2); } // جایگزین کنترل‌کننده قبلی می‌شود
 ```
 
-Developers of web standards understood that long ago and suggested an alternative way of managing handlers using special methods `addEventListener` and `removeEventListener`. They are free of such a problem.
+توسعه‌دهندگان استاندارهای وب خیلی وقت پیش متوجه این موضوع شدند و یک راه حل جایگزین برای مدیریت کنترل‌کننده‌‌ها با استفاده از متد‌های مخصوص `addEventListener` و `removeEventListener` پیشنهاد دادند. این دو متد مشکل بالا را نخواهند داشت.
 
-The syntax to add a handler:
+سینتکس و چگونگی اضافه کردن یک کنترل‌کننده:
 
 ```js
 element.addEventListener(event, handler, [options]);
 ```
 
 `event`
-: Event name, e.g. `"click"`.
+: نام رویداد, برای مثال `"click"`.
 
 `handler`
-: The handler function.
+: تابع کنترل‌کننده.
 
 `options`
-: An additional optional object with properties:
-    - `once`: if `true`, then the listener is automatically removed after it triggers.
-    - `capture`: the phase where to handle the event, to be covered later in the chapter <info:bubbling-and-capturing>. For historical reasons, `options` can also be `false/true`, that's the same as `{capture: false/true}`.
-    - `passive`: if `true`, then the handler will not call `preventDefault()`, we'll explain that later in <info:default-browser-action>.
+: یک شئ  به عنوان ورودی اختیاری با خصوصیات زیر:
+    - `once`: اگر `true` باشد, کنترل‌کننده بعد از اولین اجرا از روی عنصر حذف می‌شود.
+    - `capture`: مرحله‌ای که کنترل‌کننده در آن عمل می‌کند, در این مورد در قسمت <info:bubbling-and-capturing> صبحت می‌شود. به دلایلی, `options` می‌تواند `false/true` باشد, که مشابه همان `{capture: false/true}` خواهد بود.
+    - `passive`: اگر `true` باشد, کنترل‌کننده تابع `preventDefault()` را صدا نخواهد زد، درباره این موضوع بعدا در قسمت <info:default-browser-action> صحبت خواهیم کرد.
 
-To remove the handler, use `removeEventListener`:
+برای حذف یک کنترل کننده از `removeEventListener`‌ استفاده می‌کنیم:
 
 ```js
 element.removeEventListener(event, handler, [options]);
 ```
 
-````warn header="Removal requires the same function"
-To remove a handler we should pass exactly the same function as was assigned.
+````warn header="حذف کردن دقیقا به همان تابع نیاز خواهد داشت"
+برای حذف یک کنترل‌کننده ما باید دقیقا همان تابعی که به عنوان کنترل‌کننده اختصاص داده بودیم را به تابع بدهیم.
 
-This doesn't work:
+کد زیر کار نمی‌کند:
 
 ```js no-beautify
-elem.addEventListener( "click" , () => alert('Thanks!'));
+elem.addEventListener( "click" , () => alert('ممنونم!'));
 // ....
-elem.removeEventListener( "click", () => alert('Thanks!'));
+elem.removeEventListener( "click", () => alert('ممنونم!'));
 ```
 
-The handler won't be removed, because `removeEventListener` gets another function -- with the same code, but that doesn't matter, as it's a different function object.
+کنترل‌کننده حذف نمی‌شود، چونکه `removeEventListener` تابع دیگری دریافت کرده. درست است که کدهای آنها مشابه است، اما مهم نیست، چرا که یک شئ‌تابع متفاوت است.
 
-Here's the right way:
+این روش درست است:
 
 ```js
 function handler() {
-  alert( 'Thanks!' );
+  alert( 'ممنون!' );
 }
 
 input.addEventListener("click", handler);
@@ -258,52 +258,52 @@ input.addEventListener("click", handler);
 input.removeEventListener("click", handler);
 ```
 
-Please note -- if we don't store the function in a variable, then we can't remove it. There's no way to "read back" handlers assigned by `addEventListener`.
+توجه کنید، اگر که ما تابع کنترل‌کننده‌را درون یک متغیر ذخیره نکنیم، نمی‌توانیم آنرا حذف کنیم. راهی برای "بازخوانی" کنترل‌کننده‌هایی که با `addEventListener` اختصاص داده‌ می‌شوند وجود ندارد.
 ````
 
-Multiple calls to `addEventListener` allow to add multiple handlers, like this:
+با چند بار صدا زدن `addEventListener` می‌توانیم چندین کنترل‌کننده برای یک رویداد اختصاص دهیم. مانند:
 
 ```html run no-beautify
-<input id="elem" type="button" value="Click me"/>
+<input id="elem" type="button" value="روی من کلیک کن"/>
 
 <script>
   function handler1() {
-    alert('Thanks!');
+    alert('ممنونم!');
   };
 
   function handler2() {
-    alert('Thanks again!');
+    alert('باز هم ممنونم!');
   }
 
 *!*
   elem.onclick = () => alert("Hello");
-  elem.addEventListener("click", handler1); // Thanks!
-  elem.addEventListener("click", handler2); // Thanks again!
+  elem.addEventListener("click", handler1); // ممنونم!
+  elem.addEventListener("click", handler2); // باز هم ممنونم!
 */!*
 </script>
 ```
 
-As we can see in the example above, we can set handlers *both* using a DOM-property and `addEventListener`. But generally we use only one of these ways.
+همانطور که در مثال‌های بالا میبینیم، می‌توانیم کنترل‌کننده‌ها را با *هر دو* روش استفاده از خاصیت DOM و `addEventListener` اختصاص دهیم. اما معمولا از یکی از این دو روش استفاده می‌کنیم.
 
-````warn header="For some events, handlers only work with `addEventListener`"
-There exist events that can't be assigned via a DOM-property. Only with `addEventListener`.
+````warn header="برای بعضی از رویدادها، کنترل‌کننده‌ها فقط با `addEventListener` کار می‌کنند"
+رویدادهایی وجود دارند که نمی‌توان با استفاده از خاصیت DOM برای آنها کنترل‌کننده اختصاص داد. فقط با `addEventListener`.
 
-For instance, the `DOMContentLoaded` event, that triggers when the document is loaded and DOM is built.
+برای مثال، رویداد `DOMContentLoaded` که زمانی اتفاق می‌افتد که سند بارگزاری شده و درخت DOM ساخته شده.
 
 ```js
-// will never run
+// هیچ‌وقت اجرا نمی‌شود
 document.onDOMContentLoaded = function() {
-  alert("DOM built");
+  alert("درخت DOM ساخته شد");
 };
 ```
 
 ```js
-// this way it works
+// با این روش کار می‌کند
 document.addEventListener("DOMContentLoaded", function() {
-  alert("DOM built");
+  alert("درخت DOM ساخته شد");
 });
 ```
-So `addEventListener` is more universal. Although, such events are an exception rather than the rule.
+پس رویداد `addEventListener` کلی‌تر است. هرچند, این چنین رویداد‌هایی بیشتر استثنا هستند تا یک قانون.
 ````
 
 ## Event object

From aeaedec949fa2264b041ed96c7a71ac875ed672d Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 17:23:04 +0430
Subject: [PATCH 5/8] translated article.md

---
 .../01-introduction-browser-events/article.md | 86 +++++++++----------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index 4249a6b56..58cc9f1f9 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -306,64 +306,64 @@ document.addEventListener("DOMContentLoaded", function() {
 پس رویداد `addEventListener` کلی‌تر است. هرچند, این چنین رویداد‌هایی بیشتر استثنا هستند تا یک قانون.
 ````
 
-## Event object
+## شئ رویداد
 
-To properly handle an event we'd want to know more about what's happened. Not just a "click" or a "keydown", but what were the pointer coordinates? Which key was pressed? And so on.
+برای اینکه بتوانیم بهتر یک رویداد را کنترل کنیم باید در مورد اینکه چه اتفاقی اتفاده اطلاعات بیشتری داشته باشیم. اینکه فقط "click" یا "keydown" اتفاق افتاده کافی نیست، بلکه مختصات اشاره‌گر موس، اینکه کدام کلید فشرده شده، و ... اهمیت دارد.
 
-When an event happens, the browser creates an *event object*, puts details into it and passes it as an argument to the handler.
+زمانی که یک رویداد اتفاق می‌افتد، مرورگر یک *شئ رویداد (event object)* ایجاد می‌کند، جزئیاتی درباره رویداد را درون آن قرار می‌دهد و به عنوان ورودی به کنترل کننده ارسال می‌کند.
 
-Here's an example of getting pointer coordinates from the event object:
+این یک نمونه از گرفتن مختصات اشاره‌گر از شئ رویداد است:
 
 ```html run
-<input type="button" value="Click me" id="elem">
+<input type="button" value="روی من کلیک کن" id="elem">
 
 <script>
   elem.onclick = function(*!*event*/!*) {
-    // show event type, element and coordinates of the click
-    alert(event.type + " at " + event.currentTarget);
-    alert("Coordinates: " + event.clientX + ":" + event.clientY);
+    // نمایش نوع رویداد, عنصر و و مختصات کلیک
+    alert(event.type + " در " + event.currentTarget);
+    alert("مختصات: " + event.clientX + ":" + event.clientY);
   };
 </script>
 ```
 
-Some properties of `event` object:
+بعضی از خصوصیات شئ `event`:
 
 `event.type`
-: Event type, here it's `"click"`.
+: نوع رویداد، در اینجا `"click"` است.
 
 `event.currentTarget`
-: Element that handled the event. That's exactly the same as `this`, unless the handler is an arrow function, or its `this` is bound to something else, then we can get the element from  `event.currentTarget`.
+: عنصری که رویداد را کنترل می‌کند. دقیقا همان `this` است، مگر اینکه کنترل کننده یک تابع پیکانی (arrow function) باشد، یا اینکه `this` به چیز دیگری مقید شده باشد، در این صورت می‌توانیم عنصر را از `event.currentTarget` بگیریم.
 
 `event.clientX / event.clientY`
-: Window-relative coordinates of the cursor, for pointer events.
+: مختصات اشاره‌گر موس نسبت به پنجره برای رویدادهای مربوط به اشاره‌گر موس.
 
-There are more properties. Many of them depend on the event type: keyboard events have one set of properties, pointer events - another one, we'll study them later when we come to different events in details.
+خصوصیات بیشتری نیز وجود دارد. خیلی از آنها به نوع رویداد بستگی دارند: رویدادهای صفحه‌کلید یک مجموعه خصوصیت دارند، رویدادهای اشاره‌گر موس یک مجموعه دیگر. درباره آنها در آینده بیشتر یاد خواهیم گرفت و درباره جزئیات هرکدام بحث می‌کنیم.
 
-````smart header="The event object is also available in HTML handlers"
-If we assign a handler in HTML, we can also use the `event` object, like this:
+````smart header="شئ رویداد در کنترل‌کننده‌های HTML نیز وجود دارد"
+اگر که یک کنترل‌کننده را درون HTML تعریف کنیم، می‌توانیم از شئ `event` استفاده کنیم، مانند:
 
 ```html autorun height=60
-<input type="button" onclick="*!*alert(event.type)*/!*" value="Event type">
+<input type="button" onclick="*!*alert(event.type)*/!*" value="نوع رویداد">
 ```
 
-That's possible because when the browser reads the attribute, it creates a handler like this:  `function(event) { alert(event.type) }`. That is: its first argument is called `"event"`, and the body is taken from the attribute.
+این امکان‌پذیر است زیرا زمانی که مرورگر صفت را می٬خواند، یک کنترل‌کننده مانند: `function(event) {alert(event.type) }` می‌سازد. که یعنی: اولین آرگومان `"event"` نام دارد و بدنه‌ی تابع از صفت گرفته شده است.
 ````
 
 
-## Object handlers: handleEvent
+## اشیاء کنترل‌کننده: handleEvent
 
-We can assign not just a function, but an object as an event handler using `addEventListener`. When an event occurs, its `handleEvent` method is called.
+نه تنها می‌توانیم تابع را به عنوان کنترل‌کننده‌ها استفاده کنیم، بلکه می‌توانیم با استفاده از `addEventListener` اشياء را نیز به عنوان کنترل‌کننده اختصاص دهیم. زمانی که رویدادی اتفاق می‌افتد خصوصیت `handleEvent` آن شئ صدا زده می‌شود.
 
-For instance:
+برای مثال:
 
 
 ```html run
-<button id="elem">Click me</button>
+<button id="elem">روی من کلیک کن</button>
 
 <script>
   let obj = {
     handleEvent(event) {
-      alert(event.type + " at " + event.currentTarget);
+      alert(event.type + " در " + event.currentTarget);
     }
   };
 
@@ -371,23 +371,23 @@ For instance:
 </script>
 ```
 
-As we can see, when `addEventListener` receives an object as the handler, it calls `obj.handleEvent(event)` in case of an event.
+همانطور که میبینید زمانی که `addEventListener` یک شئ را به کنترل‌کننده دریافت می‌کند، `obj.handleEvent(event)` را در صورت اتفاق افتادن آن رویداد صدا می‌زند.
 
-We could also use a class for that:
+همچنین می‌توانیم از یک کلاس برای این کار استفاده کنیم:
 
 
 ```html run
-<button id="elem">Click me</button>
+<button id="elem">روی من کلیک کن</button>
 
 <script>
   class Menu {
     handleEvent(event) {
       switch(event.type) {
         case 'mousedown':
-          elem.innerHTML = "Mouse button pressed";
+          elem.innerHTML = "کلید موس فشار داده شد";
           break;
         case 'mouseup':
-          elem.innerHTML += "...and released.";
+          elem.innerHTML += "...و رها شد.";
           break;
       }
     }
@@ -401,12 +401,12 @@ We could also use a class for that:
 </script>
 ```
 
-Here the same object handles both events. Please note that we need to explicitly setup the events to listen using `addEventListener`. The `menu` object only gets `mousedown` and `mouseup` here, not any other types of events.
+اینجا یک شئ هر دو رویداد را کنترل می‌کند. توجه کنید که برای اینکار باید دقیقا از `addEventListener` برای اختصاص کنترل‌کننده استفاده کنیم. `menu` فقط `mousedown` و `mouseup` را کنترل می‌کند و در صورت وقوع رویدادهای دیگر کاری انجام نمی‌دهد.
 
-The method `handleEvent` does not have to do all the job by itself. It can call other event-specific methods instead, like this:
+متد `handleEvent` قرار نیست که همه‌ی کارها را خودش انجام دهد. می‌تواند بقیه متد‌های مربوط به رویدادها را صدا بزند. برای مثال:
 
 ```html run
-<button id="elem">Click me</button>
+<button id="elem">روی من کلیک کن</button>
 
 <script>
   class Menu {
@@ -417,11 +417,11 @@ The method `handleEvent` does not have to do all the job by itself. It can call
     }
 
     onMousedown() {
-      elem.innerHTML = "Mouse button pressed";
+      elem.innerHTML = "کلید موس فشرده شد";
     }
 
     onMouseup() {
-      elem.innerHTML += "...and released.";
+      elem.innerHTML += "...و رها شد.";
     }
   }
 
@@ -431,22 +431,22 @@ The method `handleEvent` does not have to do all the job by itself. It can call
 </script>
 ```
 
-Now event handlers are clearly separated, that may be easier to support.
+اکنون، کنترل‌کننده‌ها به وضوح جدا شده‌اند. در آینده برای ارتقا کد کار آسانتری خواهیم داشت.
 
-## Summary
+## خلاصه
 
-There are 3 ways to assign event handlers:
+۳ راه برای اختصاص کنترل‌کننده‌ها به رویدادها وجود دارد:
 
-1. HTML attribute: `onclick="..."`.
-2. DOM property: `elem.onclick = function`.
-3. Methods: `elem.addEventListener(event, handler[, phase])` to add, `removeEventListener` to remove.
+1. صفت‌های HTML: `onclick="..."`.
+2. خصوصیت DOM: `elem.onclick = function`.
+3. متدها: `elem.addEventListener(event, handler[, phase])` برای اضافه کردن, `removeEventListener` برای حذف کردن.
 
-HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there.
+صفت‌های HTML کاربرد خیلی کمی دارند، چرا که نوشتن کد جاوااسکریپت وسط یک تگ HTML مقداری عجیب به نظر می‌رسد. همچنین نمی‌شود کد زیادی در آنجا نوشت.
 
-DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing.
+صفت‌های DOM برای استفاده مناسب است، اما نمی‌توانیم بیشتر از یک کنترل‌کننده برای یک رویداد خاص استفاده کنیم. در بیشتر اوقات این محدودیت برای ما مهم نیست.
 
-The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transitionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event.
+اما راه آخر قابل انعطاف‌ترین راه است، اما نوشتن بیشتری نسبت به دو روش قبل دارد. تعداد کمی از رویدادها فقط با این روش کار می‌کنند. مثل `transitionend` و `DOMContentLoaded` (در آینده درباره‌ آن صحبت می‌کنیم). همچنین `addEventListener` اشیا را نیز به عنوان کنترل‌کننده قبول می‌کند. در این حالت متد `handleEvent` در صورت اتفاق افتادن رویداد صدا زده می‌شود.
 
-No matter how you assign the handler -- it gets an event object as the first argument. That object contains the details about what's happened.
+بدون توجه به این که از کدام روش برای اختصاص دادن کنترل‌کننده‌ به رویداد استفاده کنید، همیشه یک شئ رویداد به عنوان اولین ورودی دریافت خواهد کرد. این شئ شامل اطلاعات و جزئیاتی درباره اینکه چه اتفاقی افتاده است.
 
-We'll learn more about events in general and about different types of events in the next chapters.
+درباره کلیت رویدادها و تفاوت انواع آنها در بخش‌های بعدی یاد خواهیم گرفت.

From 7d3092c4fd781245ddb0094897bf1c2223e1f614 Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 18:03:23 +0430
Subject: [PATCH 6/8] 01-hide-other to 04-move-ball-feild

---
 .../01-hide-other/solution.view/index.html    |  8 ++---
 .../01-hide-other/source.view/index.html      |  6 ++--
 .../01-hide-other/task.md                     |  6 ++--
 .../02-hide-self-onclick/solution.md          |  4 +--
 .../02-hide-self-onclick/task.md              |  8 ++---
 .../03-which-handlers-run/solution.md         |  8 ++---
 .../03-which-handlers-run/task.md             |  6 ++--
 .../04-move-ball-field/solution.md            | 30 +++++++++----------
 .../solution.view/index.html                  | 16 +++++-----
 .../04-move-ball-field/source.view/index.html |  4 +--
 .../04-move-ball-field/task.md                | 20 ++++++-------
 11 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
index 7228a45de..a3835be85 100644
--- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
@@ -7,13 +7,13 @@
 
 <body>
 
-  <input type="button" id="hider" value="Click to hide the text" />
+  <input type="button" id="hider" value="کلیک کنید تا متن مخفی شود" />
 
-  <div id="text">Text</div>
+  <div id="text">متن</div>
 
   <script>
-    // Here it doesn't matter how we hide the text,
-    // could also use style.display:
+    // در اینجا چگونگی مخفی کردن متن اهمیت ندارد،
+    // همچنین می‌توانید از style.display استفاده کنید:
     document.getElementById('hider').onclick = function() {
       document.getElementById('text').hidden = true;
     }
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
index 17c5be6d1..cfb00176e 100644
--- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
@@ -7,12 +7,12 @@
 
 <body>
 
-  <input type="button" id="hider" value="Click to hide the text" />
+  <input type="button" id="hider" value="کلیک کنید تا متن مخفی شود" />
 
-  <div id="text">Text</div>
+  <div id="text">متن</div>
 
   <script>
-    /* your code */
+    /* کد شما */
   </script>
 
 </body>
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
index 7cb0cb0c9..ada109129 100644
--- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Hide on click
+# مخفی کردن در صورت کلیک
 
-Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
+یک کد جاوا‌اسکریپتی به `button` اضافه کنید تا `<div id="text">` در زمان کلیک شدن مخفی شود.
 
-The demo:
+دمو:
 
 [iframe border=1 src="solution" height=80]
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
index cded5b622..b69020042 100644
--- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
@@ -1,5 +1,5 @@
-Can use `this` in the handler to reference "the element itself" here:
+برای دسترسی به "خود عنصر" می‌توانیم درون کنترل‌کننده از `this` استفاده کنیم:
 
 ```html run height=50
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+<input type="button" onclick="this.hidden=true" value="کلیک کنید تا مخفی شود">
 ```
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
index 9ee8f18e1..15b1d6404 100644
--- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Hide self
+# مخفی کردن خود عنصر
 
-Create a button that hides itself on click.
+یک button بسازید که وقتی کلیک می‌شود خودش را مخفی کند.
 
 ```online
-Like this:
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+مثل این:
+<input type="button" onclick="this.hidden=true" value="کلیک کنید تا مخفی شود">
 ```
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
index d569f0e4d..98cf4fc68 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
@@ -1,8 +1,8 @@
-The answer: `1` and `2`.
+جواب: `1` و `2`.
 
-The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
+کنترل‌کننده اول اجرا می‌شود زیرا توسط `removeEventListener` حذف نمی‌شود. برای حذف کنترل‌کننده باید دقیقا خود تابعی که استفاده کردیم را به ورودی بدهیم. و در این کد یک تابع جدید به عنوان ورودی استفاده شده که فقط شبیه هستند، اما یک تابع نیستند.
 
-To remove a function object, we need to store a reference to it, like this:
+برای حذف یک شئ تابع باید آنرا در یک متغیر به عنوان مرجع ذخیره کنیم. مانند:
 
 ```js
 function handler() {
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
 button.removeEventListener("click", handler);
 ```
 
-The handler `button.onclick` works independently and in addition to `addEventListener`.
+کنترل‌کننده `button.onclick` جدا و علاوه بر `addEventListener` کار می‌کند.
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
index f8cd75d5a..653c96852 100644
--- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Which handlers run?
+# کدام کنترل‌کننده اجرا شود؟
 
-There's a button in the variable. There are no handlers on it.
+یک دکمه درون  متغیر ذخیره شده. ولی هیچ کنترل‌کننده به آن اختصاص نیافته.
 
-Which handlers run on click after the following code? Which alerts show up?
+با توجه به کد زیر، کدام کنترل‌کننده بعد از کلیک اجرا می‌شود؟ کدوم پیغام نمایش داده می‌شود؟
 
 ```js no-beautify
 button.addEventListener("click", () => alert("1"));
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
index b04cb8231..3f78573aa 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
@@ -1,11 +1,11 @@
 
-First we need to choose a method of positioning the ball.
+اول نیاز داریم که روش قرارگیری توپ را انتخاب کنیم.
 
-We can't use `position:fixed` for it, because scrolling the page would move the ball from the field.
+نمی‌توانیم از `position:fixed` به این منظور استفاده کنیم. چون اسکرول کردن صفحه باید توپ را در زمین جابجا کند.
 
-So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned.
+پس باید از `position:absolute` استفاده کنیم و برای اینکه از موقعیت توپ مطمئن شویم، روش قرارگیری `field` را نیز تنظیم می‌کنیم.
 
-Then the ball will be positioned relatively to the field:
+در این صورت، توپ نسبت به زمین قرار گرفته می‌شود:
 
 ```css
 #field {
@@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field:
 
 #ball {
   position: absolute;
-  left: 0; /* relative to the closest positioned ancestor (field) */
+  left: 0; /* نسبت به نزدیکترین والدی که موقعیت آن تنظیم شده (field) */
   top: 0;
-  transition: 1s all; /* CSS animation for left/top makes the ball fly */
+  transition: 1s all; /* انیمیشن‌های CSS برای چپ/بالا، انگار توپ پرتاب شده */
 }
 ```
 
-Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now.
+حال باید مقدارهای درستی به `ball.style.left/top` بدهیم. این مقدار نسبت به زمین خواهد بود.
 
-Here's the picture:
+مانند این تصویر:
 
 ![](move-ball-coords.svg)
 
-We have `event.clientX/clientY` -- window-relative coordinates of the click.
+ما `event.clientX/clientY` را داریم، مختصات اشاره‌گر موس نسبت به پنجره.
 
-To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
+برای اینکه مقدار `left` مختصات اشاره‌گر موس در زمان کلیک را نسبت به زمین بگیریم، باید چپ زمین و عرض حاشیه را از هم کم کنیم.
 
 ```js
 let left = event.clientX - fieldCoords.left - field.clientLeft;
 ```
 
-Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor.
+معمولا، `ball.style.left` به معنی "حاشیه چپ عنصر" (توپ) است. پس اگر که به `left` مقدار دهیم، پس گوشیه توپ، و نه وسط آن زیر موس قرار می‌گیرد.
 
-We need to move the ball half-width left and half-height up to make it center.
+باید که توپ را به اندازه نصف طولش به چپ، و به اندازه نصف ارتفاع آن به بالا ببریم تا وسط قرار گیرد.
 
-So the final `left` would be:
+پس مقدار نهایی `left` به صورت زیر است:
 
 ```js
 let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
 ```
 
-The vertical coordinate is calculated using the same logic.
+مختصات عمودی نیز با همین منطق محاسبه می‌شود.
 
-Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
+لطفا توجه کنید که طول/ارتفاع توب باید در زمانی که به `ball.offsetWidth` معلوم باشد. پس باید در HTML یا CSS آنها را مقدار دهی کنیم.
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
index 3ebe8739e..c25185051 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
@@ -27,7 +27,7 @@
 
 <body style="height:2000px">
 
-  Click on a field to move the ball there.
+  روی زمین کلیک کنید تا توپ حرکت کند.
   <br>
 
 
@@ -39,29 +39,29 @@
   <script>
     field.onclick = function(event) {
 
-      // window-relative field coordinates
+      // مختصات زمین نسبت به پنجره
       let fieldCoords = this.getBoundingClientRect();
 
-      // the ball has position:absolute, the field: position:relative
-      // so ball coordinates are relative to the field inner left-upper corner
+      // توپ موقعیت position:absolute و زمین موقعیت position:relative دارد
+      // پس مختصات توپ نسبت به گوشه بالا چپ درون زمین است
       let ballCoords = {
         top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
         left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2
       };
 
-      // prevent crossing the top field boundary
+      // جلوگیری از عبور از مرز بالای زمین
       if (ballCoords.top < 0) ballCoords.top = 0;
 
-      // prevent crossing the left field boundary
+      // جلوگیری از عبور از مرز چپ زمین
       if (ballCoords.left < 0) ballCoords.left = 0;
 
 
-      // // prevent crossing the right field boundary
+      // جلوگیری از عبور از مرز راست زمین
       if (ballCoords.left + ball.clientWidth > field.clientWidth) {
         ballCoords.left = field.clientWidth - ball.clientWidth;
       }
 
-      // prevent crossing the bottom field boundary
+      // جلوگیری از عبور از مرز پایین زمین
       if (ballCoords.top + ball.clientHeight > field.clientHeight) {
         ballCoords.top = field.clientHeight - ball.clientHeight;
       }
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
index 34f9c88ae..e29ebc357 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
@@ -16,8 +16,8 @@
 
 <body style="height:2000px">
 
-  Click on a field to move the ball there.
-  <br> The ball should never leave the field.
+  روی زمین کلیک کنید تا توپ حرکت کند.
+  <br> توپ نباید هیچ‌وقت زمین را ترک کند.
 
 
   <div id="field">
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
index d5269147a..32805751b 100644
--- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
@@ -2,20 +2,20 @@ importance: 5
 
 ---
 
-# Move the ball across the field
+# توپ را طول زمین حرکت دهید
 
-Move the ball across the field to a click. Like this:
+باید یک کلیک توپ را در طول زمین حرکت کنید. مانند:
 
 [iframe src="solution" height="260" link]
 
-Requirements:
+نیازها:
 
-- The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
-- CSS-animation is welcome.
-- The ball must not cross field boundaries.
-- When the page is scrolled, nothing should break.
+- در زمان کلیک، وسط توپ باید دقیقا زیر وس قرار بگیرید (در صورت امکان بدون خروج از حاشیه‌های زمین).
+- استفاده از انیمیشن‌های CSS توصیه می‌شود.
+- توپ نباید از حدود زمین عبور کند.
+- در صورت پیمایش صفحه، نباید چیزی خراب شود.
 
-Notes:
+نکات:
 
-- The code should also work with different ball and field sizes, not be bound to any fixed values.
-- Use properties `event.clientX/event.clientY` for click coordinates.
+- کد شما باید با توپ‌ها و اندازه‌های مختلف زمین کارکند، و مقید به مقادیر ثابتی نباشد.
+- از خصوصیات `event.clientX/event.clientY` برای گرفتن مختصات اشاره‌گر موس استفاده کنید.

From a0091df2b924211779562f5401df08b3f4a41edd Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 18:15:07 +0430
Subject: [PATCH 7/8] 05-sliding-menu

---
 .../05-sliding-menu/solution.md               | 38 +++++++++----------
 .../05-sliding-menu/solution.view/index.html  |  8 ++--
 .../05-sliding-menu/source.view/index.html    |  8 ++--
 .../05-sliding-menu/task.md                   |  6 +--
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
index 7554a2f09..64de3e7b3 100644
--- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
@@ -1,47 +1,47 @@
 
 # HTML/CSS
-First let's create HTML/CSS.
+اول باید که HTML/CSS را بسازیم.
 
-A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element.
+منو یک جزء گرافیکی مستقل روی صفحه است. پس بهتر است که همه آنرا را درون یک عنصر DOM قرار دهیم.
 
-A list of menu items can be laid out as a list `ul/li`.
+یک لیست از آیتم‌های منو می‌تواند مانند لیستی از `ul/li` باشد.
 
-Here's the example structure:
+در اینجا یک ساختار نمونه آمده:
 
 ```html
 <div class="menu">
-  <span class="title">Sweeties (click me)!</span>
+  <span class="title">شیرینی‌ها (کلیک کنید)!</span>
   <ul>
-    <li>Cake</li>
-    <li>Donut</li>
-    <li>Honey</li>
+    <li>کیک</li>
+    <li>دونات</li>
+    <li>عسل</li>
   </ul>
 </div>
 ```
 
-We use `<span>` for the title, because `<div>` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width.
+برای عنوان از `<spcan>` استفاده می‌کنیم، زیرا `<div>` از قبل یک ویژگی خاص `display: block` دارد و 100% عرض افقی را پر می‌کند.
 
-Like this:
+مانند این:
 
 ```html autorun height=50
-<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
+<div style="border: solid red 1px" onclick="alert(1)">شیرینی‌ها (کلیک کنید)!</div>
 ```
 
-So if we set `onclick` on it, then it will catch clicks to the right of the text.
+پس اگر `onclick` را روی آن تعریف کنیم، کلیک‌ها را در سمت راست متن نیز دریافت می‌کند.
 
-As `<span>` has an implicit `display: inline`, it occupies exactly enough place to fit all the text:
+در صورتی که `<span>` از قبل یک ویژگی خاص `display: inline‍` دارد، تنها فضای مورد نیاز متن را اشغال می‌کند:
 
 ```html autorun height=50
-<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
+<span style="border: solid red 1px" onclick="alert(1)">شیرینی‌ها (کلیک کنید)!</span>
 ```
 
-# Toggling the menu
+# باز و بسته کردن منو
 
-Toggling the menu should change the arrow and show/hide the menu list.
+باز و بسته کردن منو باید کمان‌ها را تغییر دهد و آیتم‌های درون لیست منو را نشان دهد یا مخفی کند.
 
-All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`.
+همه‌ی این تغییرات کاملا توسط CSS کنترل می‌شود. در جاوااسکریپت باید وضعیت باز و بسته رودن را با اضافه کردن یا حذف کردن کلاس `.open` مشخص کنیم.
 
-Without it, the menu will be closed:
+بدون این کلاس، منو بسته است:
 
 ```css
 .menu ul {
@@ -58,7 +58,7 @@ Without it, the menu will be closed:
 }
 ```
 
-...And with `.open` the arrow changes and the list shows up:
+... و با `.open` کمان‌ها تغییر می‌کنند و لیست نمایش داده می‌شود:
 
 ```css
 .menu.open .title::before {
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html
index 0c1996a7e..be3d46878 100644
--- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html
@@ -35,11 +35,11 @@
 <body>
 
   <div id="sweeties" class="menu">
-    <span class="title">Sweeties (click me)!</span>
+    <span class="title">شیرینی‌ها (کلیک کنید)!</span>
     <ul>
-      <li>Cake</li>
-      <li>Donut</li>
-      <li>Honey</li>
+      <li>کیک</li>
+      <li>دونات</li>
+      <li>عسل</li>
     </ul>
 
   </div>
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html
index 03dded0cd..44fd2af03 100644
--- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html
@@ -5,11 +5,11 @@
 </head>
 <body>
 
-  ▶ ▼ Sweeties (click me)!
+  ▶ ▼ شیرینی‌ها (کلیک کنید)!
   <ul>
-    <li>Cake</li>
-    <li>Donut</li>
-    <li>Honey</li>
+    <li>کلیک</li>
+    <li>دونات</li>
+    <li>عسل</li>
   </ul>
 
 </body>
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md
index 34c313710..f182ebcb3 100644
--- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md
@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Create a sliding menu
+# ساخت یک منوی کشویی
 
-Create a menu that opens/collapses on click:
+یک منویی بسازید که در زمان کلیک باز/بسته شود:
 
 [iframe border=1 height=100 src="solution"]
 
-P.S. HTML/CSS of the source document is to be modified.
+پی‌نوشت: سورس کد HTML/CSS سند باید تغییر کند.

From b26e551c61ed2f92bd29cb203b471b7b5317b484 Mon Sep 17 00:00:00 2001
From: Erfan Yeganegi <yeganegierfan@gmail.com>
Date: Tue, 14 Sep 2021 20:35:01 +0430
Subject: [PATCH 8/8] 07-carousel

---
 .../06-hide-message/solution.md                |  6 +++---
 .../06-hide-message/solution.view/index.html   | 14 +++++++-------
 .../06-hide-message/source.view/index.html     | 14 +++++++-------
 .../06-hide-message/task.md                    |  8 ++++----
 .../07-carousel/solution.md                    | 14 +++++++-------
 .../07-carousel/solution.view/index.html       | 18 +++++++++---------
 .../07-carousel/solution.view/style.css        |  4 ++--
 .../07-carousel/source.view/index.html         |  8 ++++----
 .../07-carousel/source.view/style.css          |  4 ++--
 .../07-carousel/task.md                        |  8 ++++----
 10 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
index 022a0d977..d1c577d07 100644
--- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
@@ -1,12 +1,12 @@
 
-To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
+برای اضافه کردن دکمه می‌توانیم از `position:absoulute` (و روی pane از `position:relative` استفاده کنیم) یا اینکه از `float:right` استفاده کنیم. استفاده از `float:right` این مزیت را دارد که دکمه هیچ‌وقت روی متن قرار نمیگیرد. اما `position:absolute` ازادی عمل بیشتری در اختیار ما می‌گذار. انتخاب بر عهده شماست.
 
-Then for each pane the code can be like:
+بعد برای هر پیام کد چیزی شبیه این خواهد بود:
 ```js
 pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
 ```
 
-Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
+سپس `<button>` همان `pane.firstChild` می‌شود. پس می‌توانیم یک کنترل‌کننده به آن اختصاص دهیم. مانند زیر:
 
 ```js
 pane.firstChild.onclick = () => pane.remove();
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
index ff9d8cc2b..6862662db 100644
--- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
@@ -10,16 +10,16 @@
 
   <div>
     <div class="pane">
-      <h3>Horse</h3>
-      <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
+      <h3>اسب</h3>
+      <p>اسب یا باره یکی از دو زیرگونه‌های اسب وحشی است. این جانور پستاندار و فَردسُم است و به تیره اسبیان تعلق دارد. فرگشت اسب از ۴۵ تا ۵۵ میلیون سال پیش به این سو آغاز شده‌است، گذشتهٔ اسب‌های بزرگ و تک‌سم امروزی به جانورانی کوچک‌جثه و چندسم بازمی‌گردد.</p>
     </div>
     <div class="pane">
-      <h3>Donkey</h3>
-      <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
+      <h3>الاغ</h3>
+      <p>الاغ یا درازگوش جانوری اهلی از خانوادهٔ اسبیان است. خر وحشی آفریقایی جد وحشی خرهای اهلی است. این حیوان حدود ۵۰۰۰ سال پیش در مصر یا بین‌النهرین اهلی شد. انسان‌ها از این حیوان بیشتر برای بارکشی استفاده می‌کنند.</p>
     </div>
     <div class="pane">
-      <h3>Cat</h3>
-      <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
+      <h3>گربه</h3>
+      <p>گُربه یک گونهٔ اهلی گوشت‌خوار از پستانداران است که جثهٔ کوچکی دارد. گربه تنها گونهٔ اهلی در خانوادهٔ گربه‌ایان است و برای تمیز دادن آن از اعضای وحشی این خانواده، اغلب از آن تحت عنوان گربهٔ خانگی یاد می‌شود.
       </p>
     </div>
   </div>
@@ -30,7 +30,7 @@ <h3>Cat</h3>
 
     for(let pane of panes) {
       pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
-      // button becomes the first child of pane
+      // دکمه اولین فرزند pane می‌شود
       pane.firstChild.onclick = () => pane.remove();
     }
   </script>
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html
index 07adbf985..de645fe2c 100644
--- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html
@@ -8,21 +8,21 @@
 
 <body>
 
-  The button code (may need to adjust CSS):
+  کد دکمه (ممکن است که نیاز به تغییر CSS داشته باشید):
   <button class="remove-button">[x]</button>
 
   <div>
     <div class="pane">
-      <h3>Horse</h3>
-      <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
+      <h3>اسب</h3>
+      <p>اسب یا باره یکی از دو زیرگونه‌های اسب وحشی است. این جانور پستاندار و فَردسُم است و به تیره اسبیان تعلق دارد. فرگشت اسب از ۴۵ تا ۵۵ میلیون سال پیش به این سو آغاز شده‌است، گذشتهٔ اسب‌های بزرگ و تک‌سم امروزی به جانورانی کوچک‌جثه و چندسم بازمی‌گردد.</p>
     </div>
     <div class="pane">
-      <h3>Donkey</h3>
-      <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
+      <h3>الاغ</h3>
+      <p>الاغ یا درازگوش جانوری اهلی از خانوادهٔ اسبیان است. خر وحشی آفریقایی جد وحشی خرهای اهلی است. این حیوان حدود ۵۰۰۰ سال پیش در مصر یا بین‌النهرین اهلی شد. انسان‌ها از این حیوان بیشتر برای بارکشی استفاده می‌کنند.</p>
     </div>
     <div class="pane">
-      <h3>Cat</h3>
-      <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
+      <h3>گربه</h3>
+      <p>گُربه یک گونهٔ اهلی گوشت‌خوار از پستانداران است که جثهٔ کوچکی دارد. گربه تنها گونهٔ اهلی در خانوادهٔ گربه‌ایان است و برای تمیز دادن آن از اعضای وحشی این خانواده، اغلب از آن تحت عنوان گربهٔ خانگی یاد می‌شود.
       </p>
     </div>
   </div>
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
index 152cf41fe..48a1303ba 100644
--- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Add a closing button
+# دکمه بسته‌شدن اضافه کنید
 
-There's a list of messages.
+لیستی از پیام‌ها موجود است.
 
-Use JavaScript to add a closing button to the right-upper corner of each message.
+با استفاده از جاوااسکریپت یک دکمه بستن به گوشه بالا راست هر پیام اضافه کنید.
 
-The result should look like this:
+نتیجه باید چنین چیزی باشد:
 
 [iframe src="solution" height=450]
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
index 1c6b52cea..175ba07c3 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
@@ -1,17 +1,17 @@
-The images ribbon can be represented as `ul/li` list of images `<img>`.
+نوار عکس‌ها را می‌توان به عنوان یک لیست `ul/li‍` شامل عکس‌ها `<img>` نشان داد.
 
-Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visible:
+معمولا، چنین نوار عریض است، اما ما یک `<div>` با سیز ثایت دور قرار می‌دهیم تا آنرا "ببریم". با اینکار فقط قستمی از آن نمایش داده می‌شود:
 
 ![](carousel1.svg)
 
-To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
+برا اینکه لیست را افقی نمایش دهیم باید خصوصیات CSS‌ درستی را برای `<li>` نسبت دهیم. مثلا `display: inline-block`.
 
-For `<img>` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it.
+برای `<img>` باید `display` را تغییر دهیم. چرا که مقدار پیشفرض آن `inline` است. فضای رزورشده اضافی زیر عناصر `inline` قرار دارد (برای "letter tail" ها)، برای حذف آن می‌توانیم از `display:block` کمک بگیریم.
 
-To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
+برای پیمایش کردن، می‌توانیم `<ul>` را تغییر مکان دهیم. راه‌های زیادی برای این کار وجود دارد. برای مثال عوض کردن مقدار `margin-left` یا (برای کارایی بالاتر) استفاده از `transform: translateX()‍`:
 
 ![](carousel2.svg)
 
-The outer `<div>` has a fixed width, so "extra" images are cut.
+‍`<div>` بیرونی طول ثابتی دارد. پس عکس‌های "اضافه" برش داده می‌شوند.
 
-The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `<div class="carousel">` and style things inside it.
+همه‌ی این اسلایدر یک حزء گرافیکی مستقل روی صحفه است. پس بهتر است آنرا درون یک `<div class="carousel">` قرار دهیم و اجزای درون آنرا استایل دهیم
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
index 2c6073316..eb2142751 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
@@ -27,7 +27,7 @@
   </div>
 
   <script>
-    /* label the images, just for convenience, to visually track them */
+    /* برای راحتی مشاهده عملکرد اسلایدر، عکس‌ها را برچسب‌گذاری می‌کنیم */
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
@@ -35,27 +35,27 @@
       i++;
     }
 
-    /* configuration */
-    let width = 130; // image width
-    let count = 3; // visible images count
+    /* تنظیمات */
+    let width = 130; // طول عکس
+    let count = 3; // تعداد عکس‌های نمایان
 
     let list = carousel.querySelector('ul');
     let listElems = carousel.querySelectorAll('li');
 
-    let position = 0; // ribbon scroll position
+    let position = 0; // موقعیت پیمایش نوار
 
     carousel.querySelector('.prev').onclick = function() {
-      // shift left
+      // به چپ بردن
       position += width * count;
-      // can't move to the left too much, end of images
+      // بیش از حد نمی‌توان به چپ برد چون عکس‌ها تمام شده
       position = Math.min(position, 0)
       list.style.marginLeft = position + 'px';
     };
 
     carousel.querySelector('.next').onclick = function() {
-      // shift right
+      // به راست بردن
       position -= width * count;
-      // can only shift the ribbbon for (total ribbon length - visible count) images
+      // نوار را فقط برای (طول همه‌ی نوار - تعداد عکس‌های نمایان) تعداد عکس می‌توان تغییر مکان داد
       position = Math.max(position, -width * (listElems.length - count));
       list.style.marginLeft = position + 'px';
     };
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css
index bbbc6327e..8ea0e781d 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css
@@ -14,7 +14,7 @@ body {
 .carousel img {
   width: 130px;
   height: 130px;
-  /* make it block to remove space around images */
+  /* برای حذف فضای اضافه دور عکس آنرا به block‌ تبدیل می‌کنیم */
   display: block;
 }
 
@@ -60,7 +60,7 @@ body {
   padding: 0;
   list-style: none;
   transition: margin-left 250ms;
-  /* remove white-space between inline-block'ed li */
+  /* حذف فاصله سفید بین li هایی که دارای خصوصیت inline-block هستند */
   /* http://davidwalsh.name/remove-whitespace-inline-block */
   font-size: 0;
 }
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
index e9a9bc8d4..7b8c7d840 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
@@ -7,7 +7,7 @@
 
 <body>
 
-  <!-- create your markup and styles -->
+  <!-- ساختار و استایل خود را پیاده‌‌سازی کنید -->
 
   <button class="arrow">⇦</button>
   <button class="arrow">⇨</button>
@@ -28,8 +28,8 @@
 
 
   <script>
-    // label the images to visually track them, just for convenience,
-    // this code can be removed
+    // برای راحتی مشاهده عملکرد اسلایدر، عکس‌هارا برچسب‌گذاری می‌شوند
+    // این کد می‌تواند حذف شود
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
@@ -37,7 +37,7 @@
       i++;
     }
 
-    // ...your code to make carousel alive!
+    // ...کد شما برای زنده کردن اسلایدر
   </script>
 
 </body>
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css
index 75c68f01a..f20ab02e5 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css
@@ -30,9 +30,9 @@ ul {
 ul img {
   width: 130px;
   height: 130px;
-  display: block; /* removes extra space near images */
+  display: block; /* حذف فاصله‌های اضافی نزدیک عکس‌ها */
 }
 
 ul li {
-  display: inline-block; /* removes extra space between list items
+  display: inline-block; /* حذف فاصله اضافی بین آیتم‌های لیست */
 }
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
index a6adbffa5..d04f51d14 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
@@ -2,12 +2,12 @@ importance: 4
 
 ---
 
-# Carousel
+# اسلایدر
 
-Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows.
+یک "اسلایدر چرخشی" بسازید. نوار از عکس‌ها که با کلیک بر روی فلش‌ها پیمایش می‌شوند.
 
 [iframe height=200 src="solution"]
 
-Later we can add more features to it: infinite scrolling, dynamic loading etc.
+بعدا می‌توانیم امکانات دیگری به آن اضافه کنیم: پیمایش بی‌نهایت، بارگزاری پویا و ...
 
-P.S. For this task HTML/CSS structure is actually 90% of the solution.
+پی‌نوشت: برای این تکلیف ساختار HTML/CSS تقریبا 90% راه حل است.