diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html
index 6f8ed9c4d..618d2a634 100644
--- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html
@@ -10,18 +10,18 @@
 
   <div id="container">
     <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>Kuda</h3>
+      <p>Kuda adalah salah satu dari dua subspesies Equus ferus yang masih ada. Ini adalah mamalia berkuku aneh milik keluarga taksonomi Equidae. Kuda telah berevolusi selama 45 hingga 55 juta tahun terakhir dari makhluk kecil berjari banyak, Eohippus, menjadi hewan besar berjari satu saat ini.</p>
       <button class="remove-button">[x]</button>
     </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>Keledai</h3>
+      <p>Keledai (Equus africanus asinus) adalah anggota keluarga kuda yang dijinakkan, Equidae. Nenek moyang keledai liar adalah keledai liar Afrika, E. africanus. Keledai telah digunakan sebagai hewan pekerja setidaknya selama 5000 tahun.</p>
       <button class="remove-button">[x]</button>
     </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>Kucing</h3>
+      <p>Kucing domestik (bahasa Latin: Felis catus) adalah mamalia karnivora kecil yang biasanya berbulu. Mereka sering disebut kucing rumah ketika dipelihara sebagai hewan peliharaan dalam ruangan atau hanya kucing ketika tidak perlu membedakan mereka dari felids dan kucing lainnya. Kucing sering dihargai oleh manusia karena persahabatan dan kemampuan mereka untuk berburu hama.
       </p>
       <button class="remove-button">[x]</button>
     </div>
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html
index 8a9ed9a09..616661fb2 100644
--- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html
@@ -10,25 +10,25 @@
 
   <div id="container">
     <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>Kuda</h3>
+      <p>Kuda adalah salah satu dari dua subspesies Equus ferus yang masih ada. Ini adalah mamalia berkuku aneh milik keluarga taksonomi Equidae. Kuda telah berevolusi selama 45 hingga 55 juta tahun terakhir dari makhluk kecil berjari banyak, Eohippus, menjadi hewan besar berjari satu saat ini.</p>
       <button class="remove-button">[x]</button>
     </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>Keledai</h3>
+      <p>Keledai (Equus africanus asinus) adalah anggota keluarga kuda yang dijinakkan, Equidae. Nenek moyang keledai liar adalah keledai liar Afrika, E. africanus. Keledai telah digunakan sebagai hewan pekerja setidaknya selama 5000 tahun.</p>
       <button class="remove-button">[x]</button>
     </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>Kucing</h3>
+      <p>Kucing domestik (bahasa Latin: Felis catus) adalah mamalia karnivora kecil yang biasanya berbulu. Mereka sering disebut kucing rumah ketika dipelihara sebagai hewan peliharaan dalam ruangan atau hanya kucing ketika tidak perlu membedakan mereka dari felids dan kucing lainnya. Kucing sering dihargai oleh manusia karena persahabatan dan kemampuan mereka untuk berburu hama.
       </p>
       <button class="remove-button">[x]</button>
     </div>
   </div>
 
   <script>
-    // ...your code...
+    // ...kode kamu...
   </script>
 
 </body>
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
index 62c0a8ab0..d23a711fb 100644
--- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
+++ b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Hide messages with delegation
+# Menyembunyikan pesan menggunakan delegasi
 
-There's a list of messages with removal buttons `[x]`. Make the buttons work.
+Ada sebuah daftar dengan tombol `[x]`. Buat tombol itu berfungsi.
 
-Like this:
+Seperti ini:
 
 [iframe src="solution" height=420]
 
-P.S. Should be only one event listener on the container, use event delegation.
+Tambahan: Gunakan 1 event listener pada container, gunakan delegasi peristiwa (_event delegation_).
\ No newline at end of file
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
index 09c14a08c..766b2b934 100644
--- a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
@@ -1,4 +1,4 @@
-The solution has two parts.
+Solusi terbagi atas 2 bagian.
 
-1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
-2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
+1. Bungkus setiap node pada pohon kedalam `<span>`. Kemudian kita bisa menambahkan `:hover` dengan CSS-style dan menanggani klik tepat pada teks, karena lebar `<span>` sama dengan lebar tulisan (lebar tidak sama jika tidak menggunakan `<span>`);  
+2. Atur sebuah penangan (_handler_) ke `tree` akar dari node dan tanggani setiap klik pada judul `<span>`.
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html
index 0e85e457e..e63670c4c 100644
--- a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html
@@ -17,36 +17,36 @@
 <body>
 
   <ul class="tree" id="tree">
-    <li>Animals
+    <li>Hewan
       <ul>
-        <li>Mammals
+        <li>Mamalia
           <ul>
-            <li>Cows</li>
-            <li>Donkeys</li>
-            <li>Dogs</li>
-            <li>Tigers</li>
+            <li>Sapi</li>
+            <li>Keledai</li>
+            <li>Anjing</li>
+            <li>Harimau</li>
           </ul>
         </li>
-        <li>Other
+        <li>Lain
           <ul>
-            <li>Snakes</li>
-            <li>Birds</li>
-            <li>Lizards</li>
+            <li>Ular</li>
+            <li>Burung</li>
+            <li>Kadal</li>
           </ul>
         </li>
       </ul>
     </li>
-    <li>Fishes
+    <li>Ikan
       <ul>
-        <li>Aquarium
+        <li>Akuarium
           <ul>
-            <li>Guppy</li>
-            <li>Angelfish</li>
+            <li>Gupi (ikan seribu)</li>
+            <li>Ikan bidadari</li>
           </ul>
         </li>
-        <li>Sea
+        <li>Laut
           <ul>
-            <li>Sea trout</li>
+            <li>Trout laut</li>
           </ul>
         </li>
       </ul>
@@ -54,15 +54,15 @@
   </ul>
 
   <script>
-    // move all text into <span>
-    // they occupy exactly the place necessary for the text,
+    // pindahkan semua teks kedalam <span>
+    // mereka menempati tempat yang tepat diperlukan untuk teks,
     for (let li of tree.querySelectorAll('li')) {
       let span = document.createElement('span');
       li.prepend(span);
-      span.append(span.nextSibling); // move the text node into span
+      span.append(span.nextSibling); // memindahkan node teks ke dalam span
     }
 
-    // catch clicks on whole tree
+    // tangkap klik pada keseluruhan pohon (tree)
     tree.onclick = function(event) {
 
       if (event.target.tagName != 'SPAN') {
@@ -70,7 +70,7 @@
       }
 
       let childrenContainer = event.target.parentNode.querySelector('ul');
-      if (!childrenContainer) return; // no children
+      if (!childrenContainer) return; // tidak ada elemen bawah
 
       childrenContainer.hidden = !childrenContainer.hidden;
     }
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html b/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html
index 8572517f2..fa23866be 100644
--- a/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html
@@ -6,36 +6,36 @@
 <body>
 
   <ul class="tree" id="tree">
-    <li>Animals
+    <li>Hewan
       <ul>
-        <li>Mammals
+        <li>Mamalia
           <ul>
-            <li>Cows</li>
-            <li>Donkeys</li>
-            <li>Dogs</li>
-            <li>Tigers</li>
+            <li>Sapi</li>
+            <li>Keledai</li>
+            <li>Anjing</li>
+            <li>Harimau</li>
           </ul>
         </li>
-        <li>Other
+        <li>Lain
           <ul>
-            <li>Snakes</li>
-            <li>Birds</li>
-            <li>Lizards</li>
+            <li>Ular</li>
+            <li>Burung</li>
+            <li>Kadal</li>
           </ul>
         </li>
       </ul>
     </li>
-    <li>Fishes
+    <li>Ikan
       <ul>
-        <li>Aquarium
+        <li>Akuarium
           <ul>
-            <li>Guppy</li>
-            <li>Angelfish</li>
+            <li>Gupi (ikan seribu)</li>
+            <li>Ikan bidadari</li>
           </ul>
         </li>
-        <li>Sea
+        <li>Laut
           <ul>
-            <li>Sea trout</li>
+            <li>Trout laut</li>
           </ul>
         </li>
       </ul>
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
index bdcf2a510..3a32a1198 100644
--- a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
+++ b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md
@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Tree menu
+# Menu pohon (_tree menu_)
 
-Create a tree that shows/hides node children on click:
+Buat sebuah pohon yang akan menampilkan/menyembunyikan elemen bawahan pada saat di klik:
 
 [iframe border=1 src="solution"]
 
-Requirements:
+Syarat:
 
-- Only one event handler (use delegation)
-- A click outside the node title (on an empty space) should not do anything.
+- Hanya satu penangan peristiwa (_event handler_) gunakan delegasi peristiwa.
+- Klik di luar judul node (pada ruang kosong) tidak boleh melakukan apa-apa.
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html b/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html
index d5d2d640b..8782f9b98 100644
--- a/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html
+++ b/2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html
@@ -25,8 +25,8 @@
   <table id="grid">
     <thead>
       <tr>
-        <th data-type="number">Age</th>
-        <th data-type="string">Name</th>
+        <th data-type="number">Umur</th>
+        <th data-type="string">Nama</th>
       </tr>
     </thead>
     <tbody>
@@ -59,10 +59,10 @@
       if (e.target.tagName != 'TH') return;
 
       let th = e.target;
-      // if TH, then sort
-      // cellIndex is the number of th:
-      //   0 for the first column
-      //   1 for the second column, etc
+      // Jika TH, maka urutkan
+      // cellIndex adalah nomor dari th:
+      //   0 untuk kolom pertama
+      //   1 untuk kolom kedua, dan seterusnya
       sortGrid(th.cellIndex, th.dataset.type);
     };
 
@@ -71,7 +71,7 @@
 
       let rowsArray = Array.from(tbody.rows);
 
-      // compare(a, b) compares two rows, need for sorting
+      // bandingkan(a, b) bandikna kedua baris, untuk di urutkan
       let compare;
 
       switch (type) {
@@ -87,7 +87,7 @@
           break;
       }
 
-      // sort
+      // urutkan
       rowsArray.sort(compare);
 
       tbody.append(...rowsArray);
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html b/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html
index 8fac06246..cbf7f437f 100644
--- a/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html
+++ b/2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html
@@ -25,8 +25,8 @@
   <table id="grid">
     <thead>
       <tr>
-        <th data-type="number">Age</th>
-        <th data-type="string">Name</th>
+        <th data-type="number">Umur</th>
+        <th data-type="string">Nama</th>
       </tr>
     </thead>
     <tbody>
@@ -54,7 +54,7 @@
   </table>
 
   <script>
-    // ...your code...
+    // ...Kode kamu...
   </script>
 
 </body>
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
index ec85a473c..715ee7084 100644
--- a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
+++ b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md
@@ -2,19 +2,19 @@ importance: 4
 
 ---
 
-# Sortable table
+# Tabel yang bisa diurutkan
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+Buat sebuah table yang dapat diurutkan: klik pada elemen `<th>` harus mengurutkan kolom dibawahnya.
 
-Each `<th>` has the type in the attribute, like this:
+Setiap `<th>` memiliki tipe pada atribut, seperti ini:
 
 ```html
 <table id="grid">
   <thead>
     <tr>
 *!*
-      <th data-type="number">Age</th>
-      <th data-type="string">Name</th>
+      <th data-type="number">Umur</th>
+      <th data-type="string">Nama</th>
 */!*
     </tr>
   </thead>
@@ -32,12 +32,12 @@ Each `<th>` has the type in the attribute, like this:
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+Pada contoh diatas kolom memiliki nomor, dan kolom kedua - string (teks). Fungsi pengurutan harus menanggani pengurutan berdasarkan tipenya.
 
-Only `"string"` and `"number"` types should be supported.
+Hanya tipe `"string"` dan `"number"` yang bisa di urutkan.
 
-The working example:
+Contoh yang sudah jadi:
 
 [iframe border=1 src="solution" height=190]
 
-P.S. The table can be big, with any number of rows and columns.
+Tambahan: Tabel bisa besar, dengan banyak baris dan kolom.
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html
index 1ef37cdc9..b94553ee4 100644
--- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html
@@ -6,10 +6,11 @@
   <style>
     body {
       height: 2000px;
-      /* make body scrollable, the tooltip should work after the scroll */
+      /* membuat badan dapat digulir, tooltip bahkan setelah digulir */
     }
 
     .tooltip {
+      /* beberapa style untuk tooltip, kamu bisa gunakan punya kamu*/
       position: fixed;
       padding: 10px 20px;
       border: 1px solid #b3c9ce;
@@ -28,10 +29,11 @@
   <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
   <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
 
-  <button data-tooltip="the tooltip is longer than the element">Short button</button>
-  <button data-tooltip="HTML<br>tooltip">One more button</button>
+  <button data-tooltip="Tooltip lebih panjang dari elemen tombol">Tombol pendek</button>
+  <button data-tooltip="HTML<br>tooltip">Sebuah tombol lainnya</button>
+
+  <p>Gulir halaman untuk membuat tombol terlihat di bagian atas, periksa jika tooltip tampil dengan benar.</p>
 
-  <p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
 
 
   <script>
@@ -40,25 +42,25 @@
     document.onmouseover = function(event) {
       let target = event.target;
 
-      // if we have tooltip HTML...
+      // Jika kita memiliki HTML tooltip
       let tooltipHtml = target.dataset.tooltip;
       if (!tooltipHtml) return;
 
-      // ...create the tooltip element
+      // ...buat element tooltip
 
       tooltipElem = document.createElement('div');
       tooltipElem.className = 'tooltip';
       tooltipElem.innerHTML = tooltipHtml;
       document.body.append(tooltipElem);
 
-      // position it above the annotated element (top-center)
+      // posisikan elemen tooltip diatas elemen yang beranotasi (atas-tengah)
       let coords = target.getBoundingClientRect();
 
       let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
-      if (left < 0) left = 0; // don't cross the left window edge
+      if (left < 0) left = 0; // jangan lewati bagian kiri ujung jendela (window)
 
       let top = coords.top - tooltipElem.offsetHeight - 5;
-      if (top < 0) { // if crossing the top window edge, show below instead
+      if (top < 0) { // jika melewati bagian ujung atas jendela (window), tampilkan dibawah ini
         top = coords.top + target.offsetHeight + 5;
       }
 
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html
index add3b2144..79826fcd5 100644
--- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html
@@ -6,11 +6,11 @@
   <style>
     body {
       height: 2000px;
-      /* make body scrollable, the tooltip should work after the scroll */
+      /* membuat badan dapat digulir, tooltip bahkan setelah digulir */
     }
 
     .tooltip {
-      /* some styles for the tooltip, you can use your own instead */
+      /* beberapa style untuk tooltip, kamu bisa gunakan punya kamu*/
       position: fixed;
       padding: 10px 20px;
       border: 1px solid #b3c9ce;
@@ -29,14 +29,14 @@
   <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
   <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
 
-  <button data-tooltip="the tooltip is longer than the element">Short button</button>
-  <button data-tooltip="HTML<br>tooltip">One more button</button>
+  <button data-tooltip="Tooltip lebih panjang dari elemen tombol">Tombol pendek</button>
+  <button data-tooltip="HTML<br>tooltip">Sebuah tombol lainnya</button>
 
-  <p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
+  <p>Gulir halaman untuk membuat tombol terlihat di bagian atas, periksa jika tooltip tampil dengan benar.</p>
 
 
   <script>
-    // ...your code...
+    // ...Kode kamu...
   </script>
 
 </body>
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
index 3001b9915..0b6644efe 100644
--- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
@@ -2,37 +2,37 @@ importance: 5
 
 ---
 
-# Tooltip behavior
+# Perilaku Tooltip
 
-Create JS-code for the tooltip behavior.
+Buat Kode JS untuk perilaku tooltip.
 
-When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+Pada saat mouse menghampir sebuah elemen dengan `data-tooltip`, tooltip harus tampil diatasnya, dan pada saat mouse itu pindah tooltipnya di sembunyikan.
 
-An example of annotated HTML:
+Contoh dari HTML yang beranotasi:
 ```html
-<button data-tooltip="the tooltip is longer than the element">Short button</button>
-<button data-tooltip="HTML<br>tooltip">One more button</button>
+<button data-tooltip="Tooltip lebih panjang dari elemen tombol">Tombol pendek</button>
+<button data-tooltip="HTML<br>tooltip">Sebuah tombol lainnya</button>
 ```
 
-Should work like this:
+Harus berfungsi seperti ini:
 
 [iframe src="solution" height=200 border=1]
 
-In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet).
+Pada tugas ini kita beranggapan bawah semua elemen dengan `data-tooltip` memiliki teks didalamnya, Tidak ada elemen bersarang (belum).
 
-Details:
+Rincian:
 
-- The distance between the element and the tooltip should be `5px`.
-- The tooltip should be centered relative to the element, if possible.
-- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
-- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- Jarak antara elemen dan tooltip harusnya `5px`.
+- Jika memungkinkan, tooltip harus ditengah relatif pada elemen yang beranotasi.
+- Tooltip tidak boleh melewati ujung dari jendela (_window_). Biasanya tooltip harus berada di atas elemen, tapi jika elemen itu berada pada bagian atas halaman, dan tidak ada area untuk tooltip, maka posisi tooltip dibawah elemen.
+- Konten tooltip diberikan dalam atribut 'data-tooltip'. Ini bisa menjadi HTML asalan.
 
-You'll need two events here:
-- `mouseover` triggers when a pointer comes over an element.
-- `mouseout` triggers when a pointer leaves an element.
+Kamu akan membutuhkan 2 peristiwa:
+- `mouseover` akan dijalankan pada saat pointer berada di atas elemen beranotasi.
+- `mouseout` akan dijalankan pada saat pointer meninggalkan elemen yang beranotasi.
 
-Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+Tolong gunakan delegasi peristiwa: atur 2 buah penangan pada `document` untuk melacak semua "masukan" dan "keluaran" dari elemen yang memiliki `data-tooltip` dan untuk menanggani tooltip dari elemen itu.
 
-After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
+Setelah perilaku tooltip dibuat, bahkan orang yang tidak familiar dengan JavaScript bisa menambahkan elemen yang beranotasi.
 
-P.S. Only one tooltip may show up at a time.
+Tambahan: Tooltip hanya bisa ditujukan satu-satu.
diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md
index 41df9f079..d2c6f3cb6 100644
--- a/2-ui/2-events/03-event-delegation/article.md
+++ b/2-ui/2-events/03-event-delegation/article.md
@@ -1,91 +1,91 @@
 
-# Event delegation
+# Delegasi Peristiwa
 
-Capturing and bubbling allow us to implement one of most powerful event handling patterns called *event delegation*.
+Menangkap dan pengelembungan mengizinkan kita untuk mengimplementasikan salah satu pola penanganan peristiwa paling kuat yang disebut dengan *delegasi peristiwa (_event delegation_)*.
 
-The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor.
+Ide utama yaitu jika kita memiliki banyak elemen yang akan di tangani dengan cara yang sama, maka sebaiknya daripada memberikan sebuah penangan pada setiap elemen tersebut -- kita buat sebuah penangan (_handler_) pada elemen atas yang melingkupi semua elemen tersebut.
 
-In the handler we get `event.target` to see where the event actually happened and handle it.
+Pada penangan kita mendapatkan `event.target` untuk melihat dimanakah kejadian itu terjadi, dan akan menangani kejadian itu.
 
-Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy.
+Mari lihat sebuah contoh -- [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) mencerminkan filosofi Cina kuno.
 
-Here it is:
+Ini dia:
 
 [iframe height=350 src="bagua" edit link]
 
-The HTML is like this:
+HTMLnya seperti ini:
 
 ```html
 <table>
   <tr>
-    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+    <th colspan="3"><em>Bagua</em> Bagan: Arah, Elemen, Warna, Arti</th>
   </tr>
   <tr>
-    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders</td>
+    <td class="nw"><strong>Barat Laut</strong><br>Logam<br>Perak<br>Orang Tua</td>
     <td class="n">...</td>
     <td class="ne">...</td>
   </tr>
-  <tr>...2 more lines of this kind...</tr>
-  <tr>...2 more lines of this kind...</tr>
+  <tr>...2 buah teks seperti di atas...</tr>
+  <tr>...2 buah teks seperti di atas...</tr>
 </table>
 ```
 
-The table has 9 cells, but there could be 99 or 9999, doesn't matter.
+Tabel memiliki 9 sel, tapi bisa saja memiliki 99 atau 9999 sell, tidaklah penting.
 
-**Our task is to highlight a cell `<td>` on click.**
+**Tugas kita adalah untuk memberikan highlight ke sel `<td>` yang di klik.**
 
-Instead of assign an `onclick` handler to each `<td>` (can be many) -- we'll setup the "catch-all" handler on `<table>` element.
+Daripada mengatur sebuah penangan `onclick` pada setiap `<td>` (yang bisa sangat banyak) -- kita akan mengatur sebuah penangan "penangkap-semua" pada elemen `<table>`.
 
-It will use `event.target` to get the clicked element and highlight it.
+Penangan itu akan menggunakan `event.target` untuk mendapatkan elemen yang diklik dan menghighlightnya.
 
-The code:
+Kodenya:
 
 ```js
 let selectedTd;
 
 *!*
 table.onclick = function(event) {
-  let target = event.target; // where was the click?
+  let target = event.target; // dimanakah klik terjadi?
 
-  if (target.tagName != 'TD') return; // not on TD? Then we're not interested
+  if (target.tagName != 'TD') return; // bukan di TD? kita tidak peduli
 
-  highlight(target); // highlight it
+  highlight(target); // highlight elemen itu
 };
 */!*
 
 function highlight(td) {
-  if (selectedTd) { // remove the existing highlight if any
+  if (selectedTd) { // hapus elemen lain yang sudah di highlight
     selectedTd.classList.remove('highlight');
   }
   selectedTd = td;
-  selectedTd.classList.add('highlight'); // highlight the new td
+  selectedTd.classList.add('highlight'); // menghighlight elemen yang baru
 }
 ```
 
-Such a code doesn't care how many cells there are in the table. We can add/remove `<td>` dynamically at any time and the highlighting will still work.
+Kode seperti itu, tidak peduli berapa banyak sel yang ada pada table tersebut. Kita bisa menambahkan/menghapuskan `td` secara dinamis pada waktu kapanpun dan proses menghighlight akan tetap berfungsi.
 
-Still, there's a drawback.
+Tapi, tetap ada kekurangannya.
 
-The click may occur not on the `<td>`, but inside it.
+Klik mungkin tidak terjadi pada `<td>`, tapi pada elemen didalamnya.
 
-In our case if we take a look inside the HTML, we can see nested tags inside `<td>`, like `<strong>`:
+Pada kasus kita jika dilihat pada HTML, kita memiliki sebuah elemen bersarang pada `<td>`, seperti `<strong>`:
 
 ```html
 <td>
 *!*
-  <strong>Northwest</strong>
+  <strong>Barat Laut</strong>
 */!*
   ...
 </td>
 ```
 
-Naturally, if a click happens on that `<strong>` then it becomes the value of `event.target`.
+Biasanya, jika klik terjadi pada `<strong>` maka elemen itu akan menjadi nilai dari `event.target`.
 
 ![](bagua-bubble.svg)
 
-In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `<td>` or not.
+Pada penangan (_handler_) `table.onclick` kita sebaiknya mengambil `event.target` dan mencari tahu apakah klik terjadi didalam `<td>` atau tidak.
 
-Here's the improved code:
+Ini kode yang sudah diperbaiki:
 
 ```js
 table.onclick = function(event) {
@@ -99,33 +99,33 @@ table.onclick = function(event) {
 };
 ```
 
-Explanations:
-1. The method `elem.closest(selector)` returns the nearest ancestor that matches the selector. In our case we look for `<td>` on the way up from the source element.
-2. If `event.target` is not inside any `<td>`, then the call returns immediately, as there's nothing to do.
-3. In case of nested tables, `event.target` may be a `<td>`, but lying outside of the current table. So we check if that's actually *our table's* `<td>`.
-4. And, if it's so, then highlight it.
+Penjelasan:
+1. Metode `elem.closest(selector)` akan mengembalikan elemen atas terdekat yang sama dengan pemilih (_selector_). Pada kasus kita yang dicari adalah `<td>` pada bagian atas dari elemen sumber.
+2. Jika `event.target` tidak didalam `<td>`, maka kita akan langsung mengembalikan, karena tidak ada yang bisa dilakukan.
+3. Jika pada kasus elemen bersarang didalam tabel, `event.target` bisa saja merupakan elemen `<td>`, tapi berada diluar tabel yang kita atur. Jadi kita memeriksa jika tabel itu adalah *tabel yang kita butuh* `<td>`.
+4. Dan, jika benar, maka beri highlight pada elemen itu.
 
-As the result, we have a fast, efficient highlighting code, that doesn't care about the total number of `<td>` in the table.
+Hasilnya, kita memiliki kode yang cepat, efisien dalam memberikan highlight, yang tidak peduli terhadap jumlah dari elemen `<td>` pada sebuah tabel.
 
-## Delegation example: actions in markup
+## Contoh Delegasi: tindakan dalam markup
 
-There are other uses for event delegation.
+Ada kegunaan lain untuk delegasi acara.
 
-Let's say, we want to make a menu with buttons "Save", "Load", "Search" and so on. And there's an object with methods `save`, `load`, `search`... How to match them?
+Bayangkan, kita mau membuat sebuah menu dengan tombol "Simpan", "Muat", "Cari" dan seterusnya. Dan ada sebuah objek dengan metode `simpan`, `muat`, `cari`... Bagaimana cara untuk menyamakan mereka?
 
-The first idea may be to assign a separate handler to each button. But there's a more elegant solution. We can add a handler for the whole menu and `data-action` attributes for buttons that has the method to call:
+Ide pertama yaitu dengan mengatur penangan (_handler_) berbeda pada setiap tombol, Tapi ada solusi yang lebih elegan. Kita bisa menambahkan sebuah penangan (_handler_) untuk seseluruhan menu dan menambahkan atribut `data-action` untuk tombol yang bisa memanggil/memiliki sebuah metode:
 
 ```html
-<button *!*data-action="save"*/!*>Click to Save</button>
+<button *!*data-action="save"*/!*>Klik untuk simpan</button>
 ```
 
-The handler reads the attribute and executes the method. Take a look at the working example:
+Penangan (_handler_) membaca atribut dan mengeksekusi metode yang sama dengan atribut. Coba lihat contohnya:
 
 ```html autorun height=60 run untrusted
 <div id="menu">
-  <button data-action="save">Save</button>
-  <button data-action="load">Load</button>
-  <button data-action="search">Search</button>
+  <button data-action="save">Simpan</button>
+  <button data-action="load">Muat</button>
+  <button data-action="search">Cari</button>
 </div>
 
 <script>
@@ -136,15 +136,15 @@ The handler reads the attribute and executes the method. Take a look at the work
     }
 
     save() {
-      alert('saving');
+      alert('Menyimpan');
     }
 
     load() {
-      alert('loading');
+      alert('Memuat');
     }
 
     search() {
-      alert('searching');
+      alert('Mencari');
     }
 
     onClick(event) {
@@ -161,37 +161,37 @@ The handler reads the attribute and executes the method. Take a look at the work
 </script>
 ```
 
-Please note that `this.onClick` is bound to `this` in `(*)`. That's important, because otherwise `this` inside it would reference the DOM element (`elem`), not the `Menu` object, and `this[action]` would not be what we need.
+Harap dicatat bahwa `this.onClick` terikat pada `this` di `(*)`. Itu penting, karena jika tidak `this` didalamnya akan menyimpan referensi ke DOM elemen (`elem`), buka ke objek `Menu`, dan `this[action]` tidak akan seperti yang kita inginkan.
 
-So, what advantages does delegation give us here?
+Jadi,apakah keuntuk yang diberikan delegasi kepada kita disini?
 
 ```compare
-+ We don't need to write the code to assign a handler to each button. Just make a method and put it in the markup.
-+ The HTML structure is flexible, we can add/remove buttons at any time.
++ Kita teidak perlu lagi menulis kode untuk mengatur penangan (_handler_) untuk setiap tombol. Kita hanya perlu membuat sebuah metode dan menaruh markup didalamnya.
++ Struktur HTML menjadi fleksible, dan kita bisa menambah/menghapus tombol kapanpun kita mau.
 ```
 
-We could also use classes `.action-save`, `.action-load`, but an attribute `data-action` is better semantically. And we can use it in CSS rules too.
+Kita juga bisa menggunakan _class_ `.action-save`, `action-load`, tapi sebuah atribut `data-action` lebih baik secara semantik. Dan kita bisa gunakan itu pada aturan CSS juga.  
 
-## The "behavior" pattern
+## Perilaku pola
 
-We can also use event delegation to add "behaviors" to elements *declaratively*, with special attributes and classes.
+Kita juga bisa menggunakan delegasi peristiwa untuk menambahkan 'perilaku' kepada elemen secara deklarasi, dengan atribut khusus dan _class_.
 
-The pattern has two parts:
-1. We add a custom attribute to an element that describes its behavior.
-2. A document-wide handler tracks events, and if an event happens on an attributed element -- performs the action.
+Pola memiliki 2 bagian:
+1. Kita tambahkan sebuah atribut khusus ke sebuah elemen yang menjelaskan perilakunya.
+2. Penangan dokumen secara umum untuk melacak peristiwa, dan jika sebuah peristiwa terjadi pada elemen yang memiliki atribut khusus -- jalankan sebuah proses.
 
-### Behavior: Counter
+### Perilaku: Menghitung
 
-For instance, here the attribute `data-counter` adds a behavior: "increase value on click" to buttons:
+Contohnya, disini atribut `data-counter` menambahkan sebuah perilaku: "Menambah nilai pada klik" ke tombol:
 
 ```html run autorun height=60
-Counter: <input type="button" value="1" data-counter>
-One more counter: <input type="button" value="2" data-counter>
+Penghitung: <input type="button" value="1" data-counter>
+Penghitung lainnya: <input type="button" value="2" data-counter>
 
 <script>
   document.addEventListener('click', function(event) {
 
-    if (event.target.dataset.counter != undefined) { // if the attribute exists...
+    if (event.target.dataset.counter != undefined) { // Jika ada atributnya...
       event.target.value++;
     }
 
@@ -199,27 +199,27 @@ One more counter: <input type="button" value="2" data-counter>
 </script>
 ```
 
-If we click a button -- its value is increased. Not buttons, but the general approach is important here.
+Jika kita mengklik sebuah tombol -- nilainya akan bertambah. Bukan tombol, tapi pendekatan secara umum penting pada kasus ini.
 
-There can be as many attributes with `data-counter` as we want. We can add new ones to HTML at any moment. Using the event delegation we "extended" HTML, added an attribute that describes a new behavior.
+Bisa ada banyak atribut dengan `data-counter` sebanyak yang kita mau. Kta bisa menambah atribut baru ke HTML kapanpun kita mau. Menggunakan delegasi peristiwa kita "memperpanjang" HTML, menambahkan sebuah atribut baru untuk menjelaskan sebuah perilaku baru.
 
-```warn header="For document-level handlers -- always `addEventListener`"
-When we assign an event handler to the `document` object, we should always use `addEventListener`, not `document.on<event>`, because the latter will cause conflicts: new handlers overwrite old ones.
+```warn header="Untuk penangan tingkat dokumen -- selalu gunakan `addEventListener`"
+Pada saat kita mengatur sebuah penangan peristiwa (_event handler_) ke objek `dokumen`, sebaiknya selalu gunakan `addEvenListener`, dan bukan `document.on<event>`, karena yang kedua akan mengakibatkan konflik: penangan baru akan menimpah penangan yang lama.
 
-For real projects it's normal that there are many handlers on `document` set by different parts of the code.
+Untuk projek asli, adalah normal untuk memiliki banyak penangan (_handler_) yang di atur ke `document` pada bagian code yang berbeda.
 ```
 
-### Behavior: Toggler
+### Perilaku: Pengalih
 
-One more example of behavior. A click on an element with the attribute `data-toggle-id` will show/hide the element with the given `id`:
+Satu lagi contoh dari perilaku. Sebuah klik pada elemen dengan atribut `data-toggle-id` akan menampilkan/menyembunyikan elemen dengan `id` yang sama:
 
 ```html autorun run height=60
 <button *!*data-toggle-id="subscribe-mail"*/!*>
-  Show the subscription form
+  Tampilkan formulir berlangganan
 </button>
 
 <form id="subscribe-mail" hidden>
-  Your mail: <input type="email">
+  Email kamu: <input type="email">
 </form>
 
 <script>
@@ -236,37 +236,37 @@ One more example of behavior. A click on an element with the attribute `data-tog
 </script>
 ```
 
-Let's note once again what we did. Now, to add toggling functionality to an element -- there's no need to know JavaScript, just use the attribute `data-toggle-id`.
+Catat lagi apa yang kita lakukan. Sekarang, untuk menambahkan fungsi beralih pada elemen -- tidak memerlukan pengetahuan tentang JavaScript, hanya perlu menggunakan atribut `data-toggle-id`.
 
-That may become really convenient -- no need to write JavaScript for every such element. Just use the behavior. The document-level handler makes it work for any element of the page.
+Hal ini akan sangat menyederhanakan proses -- tidak perlu menulis JavaScript untuk setiap elemen. Hanya perlu menggunakan perilaku. Penangan (_handler_) tingkat dokumen akan membuat proses ini berfungsi pada setiap elemen yang ada di dalam halaman tersebut.
 
-We can combine multiple behaviors on a single element as well.
+Kita juga bisa menggabungkan beberapa perilaku pada sebuah elemen.
 
-The "behavior" pattern can be an alternative to mini-fragments of JavaScript.
+"Perilaku" pola bisa menjadi alternatif terhadap fargmen kecil JavaScript.
 
-## Summary
+## Ringkisan
 
-Event delegation is really cool! It's one of the most helpful patterns for DOM events.
+Delegasi peristiwa sangatlah keren! Itu salah satu pola yang paling berguna untuk peristiwa DOM.
 
-It's often used to add the same handling for many similar elements, but not only for that.
+Itu sering digunakan untuk menambahkan penangan untuk elemen yang mirip, tapi bukan hanya untuk itu.
 
-The algorithm:
+Algoritmanya:
 
-1. Put a single handler on the container.
-2. In the handler -- check the source element `event.target`.
-3. If the event happened inside an element that interests us, then handle the event.
+1. Taruh sebuah penangan (_handler_) pada elemen atas.
+2. Di penangan (_handler_) -- periksa sumber elemen dengan menggunakan `event.target`.
+3. Jika peristiwa terjadi didalam elemen yang kita inginkan, maka tangani peristiwa itu.
 
-Benefits:
+Keuntungan:
 
 ```compare
-+ Simplifies initialization and saves memory: no need to add many handlers.
-+ Less code: when adding or removing elements, no need to add/remove handlers.
-+ DOM modifications: we can mass add/remove elements with `innerHTML` and the like.
++ Menyederhanakan proses inisialisasi dan menghemat memori: tidak perlu membuat banyak penangan (_handler_).
++ Sedikit Kode: saat menambahkan dan menghapus elemen, kita tidak perlu tambah/hapus penangan (_handler_).
++ Modifikasi DOM: Kita bisa secara banyak menambahkan/menghapuskan elemen dengan `innerHTML` dan sejenisnya.
 ```
 
-The delegation has its limitations of course:
+Delegasi tentu juga memiliki batasannya:
 
 ```compare
-- First, the event must be bubbling. Some events do not bubble. Also, low-level handlers should not use `event.stopPropagation()`.
-- Second, the delegation may add CPU load, because the container-level handler reacts on events in any place of the container, no matter whether they interest us or not. But usually the load is negligible, so we don't take it into account.
+- Pertama, peristiwa harus bisa mengelembung. Bebebrapa peristiwa tidak mengelembung. Juga, penangan (_handler_) pada level bawah tidak boleh menggunakan `event.stopPropagation()`.
+- Kedua, delegasi mungkin menambahkan muatan pada CPU, karena penangan (_handler_) pada level atas akan bereaksi pada peristiwa yang terjadi didalam elemen itu, tidak peduli jika peristiwa itu yang kita inginkan atau tidak. Tapi biasanya proses muatannya tidak besar dan bisa diabaikan, jadi kita tidak perlu memperhitungkannya.
 ```
diff --git a/2-ui/2-events/03-event-delegation/bagua.view/index.html b/2-ui/2-events/03-event-delegation/bagua.view/index.html
index 685b35f9e..7c8def322 100644
--- a/2-ui/2-events/03-event-delegation/bagua.view/index.html
+++ b/2-ui/2-events/03-event-delegation/bagua.view/index.html
@@ -7,57 +7,57 @@
 
   <table id="bagua-table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3"><em>Bagua</em> Bagan: Arah, Elemen, Warna, Arti</th>
     </tr>
     <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
+      <td class="nw"><strong>Barat Laut</strong>
+        <br>Logam
+        <br>Perak
+        <br>Orang Tua
       </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
+      <td class="n"><strong>Utara</strong>
+        <br>Air
+        <br>Biru
+        <br>Mengubah
       </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
+      <td class="ne"><strong>Timur Laut</strong>
+        <br>Tanah
+        <br>Kuning
+        <br>Arah
       </td>
     </tr>
     <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
+      <td class="w"><strong>Barat</strong>
+        <br>Logam
+        <br>Emas
+        <br>Muda
       </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
+      <td class="c"><strong>Tengah</strong>
+        <br>Semua
+        <br>Ungu
+        <br>Harmonis
       </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
+      <td class="e"><strong>Timur</strong>
+        <br>Kayu
+        <br>Biru
+        <br>Masa Depan
       </td>
     </tr>
     <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
+      <td class="sw"><strong>Barat Daya</strong>
+        <br>Tanah
+        <br>Coklat
+        <br>Ketenangan
       </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
+      <td class="s"><strong>Selatan</strong>
+        <br>Api
+        <br>Oranye
+        <br>Ketenaran
       </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
+      <td class="se"><strong>Tenggara</strong>
+        <br>Kayu
+        <br>Hijau
+        <br>Romansa
       </td>
     </tr>