Introduction to browser events

2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md

@@ -1,6 +1,6 @@
 Jawabannya: `1` dan `2`.
 
-Pengendali pertama dijalankan, karena tidak di hapuskan oleh `removeEventListener`. Untuk menghapuskan pengendali kita harus meneruskan secara tepat fungsi yang telah di atur. Dan pada kode sebuah fungsi baru di teruskan, terlihat sama, tapi berbeda fungsi.
+penangan pertama dijalankan, karena tidak di hapuskan oleh `removeEventListener`. Untuk menghapuskan penangan kita harus meneruskan secara tepat fungsi yang telah di atur. Dan pada kode sebuah fungsi baru di teruskan, terlihat sama, tapi berbeda fungsi.
 
 Untuk menghapuskan objek fungsi, kita harus menyimpan refensi ke fungsi tersebut, seperti ini:
 
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
 button.removeEventListener("click", handler);
 ```
 
-Pengendali `button.onclick` bekerja secara sendiri dan sebagai tambahan untuk `addEvenetListener`.
+penangan `button.onclick` bekerja secara sendiri dan sebagai tambahan untuk `addEvenetListener`.

2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md

@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Pengendali mana yang dijalankan?
+# Penangan mana yang dijalankan?
 
 Ada sebuah tombol pada variable. Tidak ada pengedali di tombol tersebut.
 
-Manakah pengendali yang dijalankan pada saat klik pada kode berikut ini? Manakah `alert` yang akan ditunjukan?
+Manakah penangan yang dijalankan pada saat klik pada kode berikut ini? Manakah `alert` yang akan ditunjukan?
 
 ```js no-beautify
 button.addEventListener("click", () => alert("1"));

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.
+Pertama kita perlu memilih metode untuk memposisikan bola.
 
-We can't use `position:fixed` for it, because scrolling the page would move the ball from the field.
+Kita tidak dapat menggunakan `position:fixed` untuk itu, karena pada saat halaman digulir bola akan berpindah dari lapangan.
 
-So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned.
+Jadi kita sebaiknya menggunakan `position:absolute` dan, untuk membuat posisinya benar-benar tepat, buat lapangan(_`field`_) itu sendiri diposisikan.
 
-Then the ball will be positioned relatively to the field:
+Kemudian bola akan diposisikan relatif terhadap lapangan(_`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; /* relatif ke posisi terdekat blok atas (lapangan) */
   top: 0;
-  transition: 1s all; /* CSS animation for left/top makes the ball fly */
+  transition: 1s all; /* Animasi CSS untuk left/top untuk membuat bolanya terbang */
 }
 ```
 
-Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now.
+Selanjutnya kita harus mengatur dengan benar `ball.style.left/top`. Mereka memiliki koordinat relatif ke lapangan(_`field`_) sekarang.
 
-Here's the picture:
+Berikut ini gambarnya:
 
 ![](move-ball-coords.svg)
 
-We have `event.clientX/clientY` -- window-relative coordinates of the click.
+Kita memiliki `event.clientX/clientY` -- koordinat relatif jendela (_window_) dari klik.
 
-To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
+Untuk mendapatkan koordinat kiri relatif terhadap lapangan(_`field`_), kita kurangkan dengan nilai dari ujung dan pembatas kiri lapangan:
 
 ```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.
+Biasanya, `ball.style.left` artinya "ujung kiri dari elemen" (bola). Jadi kita mengatur nilai `left`, kemudian ujung bola, bukan tengah, akan berada tepat dibawah kursor mouse.
 
-We need to move the ball half-width left and half-height up to make it center.
+Kita perlu memindahkan bola setengah lebar kiri dan setengah tinggi atas untuk membuatnya di tengah.
 
-So the final `left` would be:
+Jadi nilai terakhir `left` akan menjadi:
 
 ```js
 let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
 ```
 
-The vertical coordinate is calculated using the same logic.
+Koordinat vertikal di ukur dengan menggunakan logika yang sama.
 
-Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
+Harap dicatat bahwa lebar/tinggi bola harus di ketahui pada saat kita mengakses `ball.offsetWidth`. Sebaiknya di atur pada HTML atau CSS.

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md

@@ -1,48 +1,47 @@
 
 # HTML/CSS
-First let's create HTML/CSS.
+Pertama buat HTML/CSS.
 
-A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element.
+Sebuah menu adalah komponen tersendiri pada halaman, jadi lebih baik untuk menaruhnya kedalam satu elemen DOM.
 
-A list of menu items can be laid out as a list `ul/li`.
+Sebuah daftar dari item menu bisa dapat diatur kedalam daftar menggunakan `ul/li`.
 
-Here's the example structure:
+Ini contoh strukturnya:
 
 ```html
 <div class="menu">
-  <span class="title">Sweeties (click me)!</span>
+  <span class="title">Manis-Manis (Tekan saya)!</span>
   <ul>
-    <li>Cake</li>
-    <li>Donut</li>
-    <li>Honey</li>
+    <li>Kue</li>
+    <li>Donat</li>
+    <li>Madu</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.
+Kita dapat menggunakan `<span>` untuk judul, karena `<div>` memiliki `display:block`, dan akan memenuhi 100% horisontal lebar elemen.
 
-Like this:
+Seperti ini:
 
 ```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)">Manis-Manis (Tekan saya)!</div>
 ```
 
-So if we set `onclick` on it, then it will catch clicks to the right of the text.
+Jadi jika kita mengatur `onclick` pada judul, maka itu akan menangkap klik diselah kanan teks.
 
-As `<span>` has an implicit `display: inline`, it occupies exactly enough place to fit all the text:
+Sedangkan `<span>` memiliki `display:inline`, dan akan memenuhi ruang yang cukup sesuai dengan teks:
 
 ```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)">Manis-Manis (Tekan saya)!</span>
 ```
 
-# Toggling the menu
+# Membuka dan menutup menu
 
-Toggling the menu should change the arrow and show/hide the menu list.
+Membuka dan menutup menu seharusnya menganti posisi anak panah dan menunjukan atau menyembunyikan daftar menu.
 
-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`.
-
-Without it, the menu will be closed:
+Semua pergantian ini sangat sempurna untuk di tanggani oleh CSS. Pada Javascript kita harus memberi label pada kondisi menu saat ini dengan menambahkan/menghapuskan kelas(_class_) `.open`.
 
+Tanpanya, menu akan tetap tertutup:
 ```css
 .menu ul {
   margin: 0;
@@ -58,7 +57,7 @@ Without it, the menu will be closed:
 }
 ```
 
-...And with `.open` the arrow changes and the list shows up:
+...Dan dengan `.open` anak panah akan berubah dan daftar akan kelihatan:
 
 ```css
 .menu.open .title::before {

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html

@@ -22,11 +22,11 @@
       color: green;
     }
 
-    .menu.open .title::before {
+    .menu.buka .title::before {
       content: '▼ ';
     }
 
-    .menu.open ul {
+    .menu.buka ul {
       display: block;
     }
   </style>
@@ -35,11 +35,11 @@
 <body>
 
   <div id="sweeties" class="menu">
-    <span class="title">Sweeties (click me)!</span>
+    <span class="title">Manis-Manis (Klik Saya)!</span>
     <ul>
-      <li>Cake</li>
-      <li>Donut</li>
-      <li>Honey</li>
+      <li>Kue</li>
+      <li>Donat</li>
+      <li>Madu</li>
     </ul>
 
   </div>
@@ -49,7 +49,7 @@
     let titleElem = menuElem.querySelector('.title');
 
     titleElem.onclick = function() {
-      menuElem.classList.toggle('open');
+      menuElem.classList.toggle('buka');
     };
   </script>
 

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html

@@ -5,11 +5,11 @@
 </head>
 <body>
 
-  ▶ ▼ Sweeties (click me)!
+  ▶ ▼ Manis-Manis (Klik Saya)!
   <ul>
-    <li>Cake</li>
-    <li>Donut</li>
-    <li>Honey</li>
+    <li>Kue</li>
+    <li>Donat</li>
+    <li>Madu</li>
   </ul>
 
 </body>

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md

@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Create a sliding menu
+# Buat sebuah menu geser
 
-Create a menu that opens/collapses on click:
+Buat sebuah menu yang terbuka/tertutup pada saat ditekan:
 
 [iframe border=1 height=100 src="solution"]
 
-P.S. HTML/CSS of the source document is to be modified.
+Tambahan: HTML/CSS dari dokumen harus dimodifikasi. 

2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md

@@ -1,12 +1,11 @@
 
-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.
+Untuk Menambahkan tombol kita bisa menggunakan `position:absolute` (dan membuat pane `position:relative`) atau `float:right`. `float:right` memiliki keuntung dimana tombol tidak akan perna tumpang tindih dengan teks, tetapi `position:absolute` memberikan lebih banyak kebebasan. Jadi pilihannya pada kamu.
 
-Then for each pane the code can be like:
+Kemudian pada setiap `pane` kodenya akan seperti ini:
 ```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:
+Kemudian `<button>` menjadi `pane.firstChild`, jadi kita tambahkan sebuah penangan seperti ini:
 
 ```js
 pane.firstChild.onclick = () => pane.remove();

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>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>
     </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>
     </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>
     </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
+      // Tombol menjadi anak pertama dari `pane`
       pane.firstChild.onclick = () => pane.remove();
     }
   </script>

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):
+  Kode tombol (Kamu bisa mengubahnya menggunakan 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>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>
     </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>
     </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>
     </div>
   </div>

2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Add a closing button
+# Tambahkan tombol untuk menutup
 
-There's a list of messages.
+Ada sebuah daftar pesan.
 
-Use JavaScript to add a closing button to the right-upper corner of each message.
+Gunakan Javascript untuk menambahkan tombol untuk menutup pada bagian pojok kanan atas setiap pesan.
 
-The result should look like this:
+Hasil seharusnya seperti ini:
 
 [iframe src="solution" height=450]

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md

@@ -1,17 +1,18 @@
-The images ribbon can be represented as `ul/li` list of images `<img>`.
+Pita gambar bisa di diwakili sebagai `ul/li` daftar dari gambar `<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:
+Biasanya, pita seperti itu sangat luas, tapi kita akan menambahkan ukuran tetap pada `<div>` untuk "memotong" pita, jadi hanya sebagian dari pita yang kelihatan:
 
 ![](carousel1.svg)
 
-To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
+Untuk menampilkan daftar secara horisontal kita perlu menambahkan properti CSS yang benar pada `<li>`, seperti `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.
+Untuk `<img>` kita sebaiknya juga mengatur `display`, karena bawaanya merupakan `inline`. Ada 
+For `<img>` we should also adjust `display`, because by default it's `inline`. Ada ruang ekstra yang disediakan di bawah elemen `inline` untuk "ekor huruf", jadi kita bisa menggunakan `display:block` untuk menghapusnya.
 
-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()`:
+Untuk membuat pengulirannya, kita bisa menggeser `<ul>`. Ada banyak cara untuk melakukannya, contohnya dengan menganti `margin-left` atau (performa lebih baik) gunakan `transform: translateX()`:
 
 ![](carousel2.svg)
 
-The outer `<div>` has a fixed width, so "extra" images are cut.
+`<div>` luar memiliki lebar tetap, jadi gambar "ekstra" dipotong.
 
-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.
+Keseluruhan korsel(_carousel_) adalah "komponen grafis" mandiri pada halaman, jadi sebaiknya kita membungkusnya menjadi satu `<div class="carousel">` dan menata elemen-elemen ke dalamnya.

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html

@@ -27,35 +27,35 @@
   </div>
 
   <script>
-    /* label the images, just for convenience, to visually track them */
+    /* Beri label pada gambar untuk memudahkan */
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
       li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
       i++;
     }
 
-    /* configuration */
-    let width = 130; // image width
-    let count = 3; // visible images count
+    /* Konfigurasi */
+    let width = 130; // Lebar gambar
+    let count = 3; // Nomor gambar
 
     let list = carousel.querySelector('ul');
     let listElems = carousel.querySelectorAll('li');
 
-    let position = 0; // ribbon scroll position
+    let position = 0; // posisi gulir pita
 
     carousel.querySelector('.prev').onclick = function() {
       // shift left
       position += width * count;
-      // can't move to the left too much, end of images
+      // tidak bisa bergerak ke kiri terlalu banyak, gambar terakhir
       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
+      // hanya dapat menggeser pita untuk (panjang pita total - jumlah yang terlihat) gambar
       position = Math.max(position, -width * (listElems.length - count));
       list.style.marginLeft = position + 'px';
     };