Modifying the document

2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md

@@ -1,15 +1,15 @@
-Answer: **1 and 3**.
+Jawabannya: **1 dan 3**.
 
-Both commands result in adding the `text` "as text" into the `elem`.
+Kedua perintah tersebut mengakibatkan penambahan `text` 'sebagai teks' ke dalam `elem`
 
-Here's an example:
+Berikut adalah contohnya:
 
 ```html run height=80
 <div id="elem1"></div>
 <div id="elem2"></div>
 <div id="elem3"></div>
 <script>
-  let text = '<b>text</b>';
+  let text = "<b>text</b>";
 
   elem1.append(document.createTextNode(text));
   elem2.innerHTML = text;

2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md

@@ -1,12 +1,12 @@
-importance: 5
+Tingkat kepentingan: 5
 
 ---
 
 # createTextNode vs innerHTML vs textContent
 
-We have an empty DOM element `elem` and a string `text`.
+Kita memiliki elemen DOM kosong `elem` dan sebuah string `text`.
 
-Which of these 3 commands will do exactly the same?
+Di antara 3 perintah ini, mana yang akan melakukan hal yang sama?
 
 1. `elem.append(document.createTextNode(text))`
 2. `elem.innerHTML = text`

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md

@@ -1,16 +1,18 @@
-First, let's make HTML/CSS.
+Pertama, mari membuat HTML/CSS.
 
-Each component of the time would look great in its own `<span>`:
+Setiap komponen waktu akan terlihat bagus dalam elemen `<span>` sendiri:
 
 ```html
 <div id="clock">
-  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec"
+    >ss</span
+  >
 </div>
 ```
 
-Also we'll need CSS to color them.
+Kita juga akan membutuhkan CSS untuk memberi warna pada mereka.
 
-The `update` function will refresh the clock, to be called by `setInterval` every second:
+Fungsi `update` akan menyegarkan jam, dipanggil oleh `setInterval` setiap detik:
 
 ```js
 function update() {
@@ -32,15 +34,17 @@ function update() {
 }
 ```
 
-In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+Pada baris `(*)`, kita memeriksa tanggal saat ini setiap kali. Panggilan ke `setInterval` tidak dapat diandalkan: mereka mungkin terjadi dengan penundaan.
 
-The clock-managing functions:
+Fungsi pengelolaan jam:
 
 ```js
 let timerId;
 
-function clockStart() { // run the clock  
-  if (!timerId) { // only set a new interval if the clock is not running
+function clockStart() {
+  // menjalankan jam
+  if (!timerId) {
+    // hanya atur interval baru jika jam tidak berjalan
     timerId = setInterval(update, 1000);
   }
   update(); // (*)
@@ -52,6 +56,6 @@ function clockStop() {
 }
 ```
 
-Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
+Harap dicatat bahwa panggilan ke `update()` tidak hanya dijadwalkan dalam `clockStart()`, tetapi segera dijalankan pada baris `(*)`. Jika tidak, pengunjung harus menunggu sampai eksekusi pertama `setInterval`. Dan jam akan kosong sampai saat itu.
 
-Also it is important to set a new interval in `clockStart()` only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse - we would only keep the `timerID` of the last interval, losing references to all others. Then we wouldn't be able to stop the clock ever again! Note that we need to clear the `timerID` when the clock is stopped in the line `(**)`, so that it can be started again by running `clockStart()`.
+Juga penting untuk mengatur interval baru dalam `clockStart()` hanya ketika jam tidak berjalan. Jika tidak, mengklik tombol start beberapa kali akan mengatur beberapa interval yang berjalan bersamaan. Lebih buruk lagi - kita hanya akan menyimpan `timerID` dari interval terakhir, kehilangan referensi ke semua yang lain. Maka kita tidak akan bisa menghentikan jam lagi! Perlu dicatat bahwa kita perlu membersihkan `timerID` ketika jam berhenti pada baris `(**)`, sehingga itu dapat dimulai kembali dengan menjalankan `clockStart()`.

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html

@@ -1,69 +1,69 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<head>
-  <style>
-    .hour {
-      color: red
-    }
-
-    .min {
-      color: green
-    }
-
-    .sec {
-      color: blue
-    }
-  </style>
-</head>
+  <head>
+    <style>
+      .hour {
+        color: red;
+      }
 
-<body>
+      .min {
+        color: green;
+      }
 
-  <div id="clock">
-    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
-  </div>
+      .sec {
+        color: blue;
+      }
+    </style>
+  </head>
 
-  <script>
-    let timerId;
+  <body>
+    <div id="clock">
+      <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec"
+        >ss</span
+      >
+    </div>
 
-    function update() {
-      let clock = document.getElementById('clock');
-      let date = new Date();
+    <script>
+      let timerId;
 
-      let hours = date.getHours();
-      if (hours < 10) hours = '0' + hours;
-      clock.children[0].innerHTML = hours;
+      function update() {
+        let clock = document.getElementById("clock");
+        let date = new Date();
 
-      let minutes = date.getMinutes();
-      if (minutes < 10) minutes = '0' + minutes;
-      clock.children[1].innerHTML = minutes;
+        let hours = date.getHours();
+        if (hours < 10) hours = "0" + hours;
+        clock.children[0].innerHTML = hours;
 
-      let seconds = date.getSeconds();
-      if (seconds < 10) seconds = '0' + seconds;
-      clock.children[2].innerHTML = seconds;
-    }
+        let minutes = date.getMinutes();
+        if (minutes < 10) minutes = "0" + minutes;
+        clock.children[1].innerHTML = minutes;
 
-    function clockStart() {
-      // set a new interval only if the clock is stopped
-      // otherwise we would rewrite the timerID reference to the running interval and wouldn't be able to stop the clock ever again
-      if (!timerId) { 
-        timerId = setInterval(update, 1000);
+        let seconds = date.getSeconds();
+        if (seconds < 10) seconds = "0" + seconds;
+        clock.children[2].innerHTML = seconds;
       }
-      update(); // <--  start right now, don't wait 1 second till the first setInterval works
-    }
 
-    function clockStop() {
-      clearInterval(timerId);
-      timerId = null; // <-- clear timerID to indicate that the clock has been stopped, so that it is possible to start it again in clockStart()
-    }
+      function clockStart() {
+        // atur interval baru hanya jika jam berhenti
+        // jika tidak, kita akan menulis kembali referensi timerID ke interval yang berjalan dan tidak akan dapat menghentikan jam lagi
+        if (!timerId) {
+          timerId = setInterval(update, 1000);
+        }
+        update(); // <--  mulai sekarang juga, jangan tunggu 1 detik sampai setInterval pertama berfungsi
+      }
 
-    clockStart();
-  </script>
+      function clockStop() {
+        clearInterval(timerId);
+        timerId = null; // <-- hapus timerID untuk menunjukkan bahwa jam telah dihentikan, sehingga memungkinkan untuk memulainya kembali di clockStart()
+      }
 
-  <!-- click on this button calls clockStart() -->
-  <input type="button" onclick="clockStart()" value="Start">
+      clockStart();
+    </script>
 
-  <!-- click on this button calls clockStop() -->
-  <input type="button" onclick="clockStop()" value="Stop">
+    <!-- tekan tombol ini untuk memanggil clockStart() -->
+    <input type="button" onclick="clockStart()" value="Start" />
 
-</body>
+    <!-- tekan tombol ini untuk memanggil clockStop() -->
+    <input type="button" onclick="clockStop()" value="Stop" />
+  </body>
 </html>

2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html

@@ -1,12 +1,10 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-<body>
+  <body>
+    <!-- tekan tombol ini untuk memanggil clockStart() -->
+    <input type="button" onclick="clockStart()" value="Start" />
 
-  <!-- click on this button calls clockStart() -->
-  <input type="button" onclick="clockStart()" value="Start">
-
-  <!-- click on this button calls clockStop() -->
-  <input type="button" onclick="clockStop()" value="Stop">
-
-</body>
+    <!-- tekan tombol ini untuk memanggil clockStop() -->
+    <input type="button" onclick="clockStop()" value="Stop" />
+  </body>
 </html>

2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md

@@ -1,11 +1,11 @@
-importance: 4
+Tingkat kepentingan: 4
 
 ---
 
-# Colored clock with setInterval
+# Jam Berwarna dengan setInterval
 
-Create a colored clock like here:
+Buatlah jam berwarna seperti di sini:
 
 [iframe src="solution" height=60]
 
-Use HTML/CSS for the styling, JavaScript only updates time in elements.
+Gunakan HTML/CSS untuk styling, JavaScript hanya untuk memperbarui waktu pada elemen-elemen.

2-ui/1-document/07-modifying-document/11-append-to-list/solution.md

@@ -1,8 +1,7 @@
+Ketika kita perlu menyisipkan sebagian HTML di suatu tempat, `insertAdjacentHTML` adalah pilihan terbaik.
 
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
-
-The solution:
+Solusi:
 
 ```js
-one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');
+one.insertAdjacentHTML("afterend", "<li>2</li><li>3</li>");
 ```

2-ui/1-document/07-modifying-document/11-append-to-list/task.md

@@ -1,14 +1,15 @@
-importance: 5
+Tingkat kepentingan: 5
 
 ---
 
-# Insert the HTML in the list
+# Menyisipkan HTML ke dalam daftar
 
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+Tulis kode untuk menyisipkan `<li>2</li><li>3</li>` antara dua `<li>` di sini:
 
 ```html
 <ul id="ul">
   <li id="one">1</li>
+  <!-- Menyisipkan `<li>2</li><li>3</li>` di sini -->
   <li id="two">4</li>
 </ul>
 ```

2-ui/1-document/07-modifying-document/12-sort-table/solution.md

@@ -1,18 +1,20 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+Solusinya singkat, namun mungkin terlihat sedikit rumit, jadi di sini saya berikan dengan komentar yang ekstensif:
 
 ```js
 let sortedRows = Array.from(table.tBodies[0].rows) // 1
-  .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
+  .sort((rowA, rowB) =>
+    rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML)
+  );
 
 table.tBodies[0].append(...sortedRows); // (3)
 ```
 
-The step-by-step algorthm:
+Algoritma langkah-demi-langkah:
 
-1. Get all `<tr>`, from `<tbody>`.
-2. Then sort them comparing by the content of the first `<td>` (the name field).
-3. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. Dapatkan semua `<tr>`, dari `<tbody>`.
+2. Kemudian urutkan mereka dengan membandingkan berdasarkan konten `<td>` pertama (bidang nama).
+3. Sekarang masukkan node dengan urutan yang benar dengan `.append(...sortedRows)`.
 
-We don't have to remove row elements, just "re-insert", they leave the old place automatically.
+Kita tidak perlu menghapus elemen baris, cukup "memasukkan kembali", karena mereka akan meninggalkan tempat lama secara otomatis.
 
-P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.
+P.S. Dalam kasus kita, ada <tbody> yang eksplisit dalam tabel, tetapi bahkan jika tabel HTML tidak memiliki <tbody>, struktur DOM selalu memiliki elemen tersebut.

2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html

@@ -1,30 +1,41 @@
 <!DOCTYPE html>
 
 <table id="table">
-<thead>
-  <tr>
-    <th>Name</th><th>Surname</th><th>Age</th>
-  </tr>
-</thead>
-<tbody>
-  <tr>
-    <td>John</td><td>Smith</td><td>10</td>
-  </tr>
-  <tr>
-    <td>Pete</td><td>Brown</td><td>15</td>
-  </tr>
-  <tr>
-    <td>Ann</td><td>Lee</td><td>5</td>
-  </tr>
-  <tr>
-    <td>...</td><td>...</td><td>...</td>
-  </tr>
-</tbody>
+  <thead>
+    <tr>
+      <th>Nama</th>
+      <th>Nama Belakang</th>
+      <th>Umur</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>John</td>
+      <td>Smith</td>
+      <td>10</td>
+    </tr>
+    <tr>
+      <td>Pete</td>
+      <td>Brown</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <td>Ann</td>
+      <td>Lee</td>
+      <td>5</td>
+    </tr>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+  </tbody>
 </table>
 
 <script>
-  let sortedRows = Array.from(table.tBodies[0].rows)
-    .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
+  let sortedRows = Array.from(table.tBodies[0].rows).sort((rowA, rowB) =>
+    rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML)
+  );
 
   table.tBodies[0].append(...sortedRows);
 </script>