Merge pull request #243 from EmptyWork/master

Event delegation

Author: yoga1234

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>

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>

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

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

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html

@@ -17,60 +17,60 @@
 <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>
     </li>
   </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') {
         return;
       }
 
       let childrenContainer = event.target.parentNode.querySelector('ul');
-      if (!childrenContainer) return; // no children
+      if (!childrenContainer) return; // tidak ada elemen bawah
 
       childrenContainer.hidden = !childrenContainer.hidden;
     }

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>

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.

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

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>

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.