UI server, memperbarui script dan update hal kecil lainnya

.eslintignore

@@ -0,0 +1 @@
+!/node_modules/*

.github/CODEOWNERS

@@ -6,5 +6,5 @@
 # the repo. Unless a later match takes precedence,
 # @global-owner1 and @global-owner2 will be requested for
 # review when someone opens a pull request.
-*       @reacto11mecha @nomadkode @dydrmr5 @dipras @AlfatArdiansa @hendraaagil @amdev142 @hudadamar21
-*       @vipscodes @Fikriihsan03 @wanrabbae @wahyall @dhafitf
+*       @reacto11mecha @nomadkode @wanrabbae @wahyall @dhafitf
+*       @hasheemi @KimmyKx @rolandopranata @azqilana @rizkyikhwan

.mergify.yml

@@ -31,19 +31,20 @@ pull_request_rules:
       label:
         add:
           - markdown files
-          - request docs team untuk review
-  - name: review docs team untuk file markdown
+          - request javascript team docs untuk review
+  - name: review javascript team docs untuk file markdown
     conditions:
       - label=markdown files
     actions:
       request_reviews:
-        teams:
-          - "@bellshade/docs-team"
+        users:
+          - dhafitf
+          - nomadkode
 
   - name: review javascript team untuk file markdown
     conditions:
       - label=javascript files
     actions:
       request_reviews:
         teams:
-          - "@bellshade/javascript-team"
+          - "@bellshade/javascript-team"

.tern-project

@@ -0,0 +1,21 @@
+{
+  "ecmaVersion": 8,
+  "libs": ["browser"],
+  "loadEagerly": ["server/**"],
+  "dontLoad": ["node_modules/**"],
+  "plugins": {
+    "doc_comment": true,
+    "node": {
+      "dontLoad": "",
+      "load": "",
+      "modules": ""
+    },
+    "modules": {
+      "dontLoad": "",
+      "load": "",
+      "modules": ""
+    },
+    "node_resolve": {},
+    "commonjs": {}
+  }
+}

CONTRIBUTING.md

@@ -122,6 +122,28 @@ Pull request `merged` jika:
 - Mengikuti standar dan arahan dari `CONTRIBUTING.md`
 - Lulus test dan cek dari beberapa test yang sudah kami siapkan
 
+## Snippet Tambahan
+
+Jika kamu menambahkan kode yang memerlukan html dan ada `console.log` didalamnya, wajib tambahkan kode dibawah ini, tambahkan kodenya di bagian `head` dari htmlnya.
+
+```html
+<script>
+  const _log = console.log;
+  const encoder = new TextEncoder();
+
+  console.log = function (...rest) {
+    window.parent.postMessage(
+      {
+        source: "iframe",
+        message: rest.map((d) => encoder.encode(d))
+      },
+      "*"
+    );
+    _log.apply(console, arguments);
+  };
+</script>
+```
+
 ## Tambahan
 
 - Jika ada kendala atau masalah dalam pull request, kamu bisa laporkan masalah pada [issue](https://github.com/bellshade/Javascript/issues)

README.md

@@ -43,45 +43,48 @@ Beberapa contoh sederhana penggunaan JavaScript:
 ### :one: Jalur Belajar Basic
 
 Jalur belajar ini diperuntukkan bagi kalian yang masih awam atau baru saja terjun di dunia pemrograman. Di sini kalian akan belajar dasar-dasar JavaScript mulai dari variabel hingga objek.
-| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
-| :-----------: | :----------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: |:---------------------------------------------------------------------: |
-| 01 | Pengenalan | Memahami bagaimana JavaScript bekerja | [Hello World](learn/basic/001_hello_world) | [WPU - Pengenalan JavaScript](https://youtu.be/RUTV_5m4VeI) |
-| 02 | Variabel dan Tipe Data | Memahami apa itu variabel dan tipe data yang ada di JavaScript | [Variable & Datatype](learn/basic/002_variable_datatype) | [WPU - Variabel](https://youtu.be/X1q_cK0Qv6o) dan [WPU - Tipe Data](https://youtu.be/1FAnrYu7LCM) |
-| 03 | Operator Aritmatik | Dapat melakukan operasi aritmatika sederhana | [Arithmetic](learn/basic/005_arithmetic_operation) | [WPU - Operator Aritmatika](https://youtu.be/EnXClrVdpTM) |
-| 04 | Pengkondisian | Memahami salah satu dari inti dari membuat pemograman yaitu melakukan pengkondisian | [Conditioning](learn/basic/006_conditioning) | [WPU - Pengkondisian](https://youtu.be/hXbDQryJAh0) |
-| 05 | Perulangan | Memahami inti kedua dari pemograman yaitu melakukan perulangan | [Looping](learn/basic/007_looping) | [WPU - Perulangan dengan For](https://youtu.be/1HussC8jKrk) dan [WPU - Perulangan dengan While](https://youtu.be/61XLzozBj2c) |
-| 06 | Fungsi | Mengenal konsep fungsi dalam teknik pemograman | [Function](learn/basic/008_function) | [WPU - Function](https://youtu.be/6-UqHXBtYkg) |
-| 07 | Konsep Array | Memahami konsep Array dan mencoba untuk mengimplemntasikannya dalam program | [Array](learn/basic/009_array) | [WPU - Array](https://youtu.be/CW5pfpafgDE) |
-| 08 | Konsep Objek | Mengenal konsep Object yang menjadi konsep paling penting di Javascript | [Object](learn/basic/011_object) | [WPU - Object](https://youtu.be/RKsapPaUgww) |
-| 09 | Class | Memahami penggunaan _class_ dalam pembuatan sebuah objek | [Object](learn/basic/013_classes) | [WPU - Object](https://youtu.be/RKsapPaUgww) |
+
+| Langkah |         Topik          |                                 Target Pembelajaran                                 |                          Materi                          |                                                         Video Rujukan                                                         |
+| :-----: | :--------------------: | :---------------------------------------------------------------------------------: | :------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: |
+|   01    |       Pengenalan       |                        Memahami bagaimana JavaScript bekerja                        |        [Hello World](learn/Basic/001_hello_world)        |                                  [WPU - Pengenalan JavaScript](https://youtu.be/RUTV_5m4VeI)                                  |
+|   02    | Variabel dan Tipe Data |           Memahami apa itu variabel dan tipe data yang ada di JavaScript            | [Variable & Datatype](learn/Basic/002_variable_datatype) |              [WPU - Variabel](https://youtu.be/X1q_cK0Qv6o) dan [WPU - Tipe Data](https://youtu.be/1FAnrYu7LCM)               |
+|   03    |   Operator Aritmatik   |                    Dapat melakukan operasi aritmatika sederhana                     |    [Arithmetic](learn/Basic/005_arithmetic_operation)    |                                   [WPU - Operator Aritmatika](https://youtu.be/EnXClrVdpTM)                                   |
+|   04    |     Pengkondisian      | Memahami salah satu dari inti dari membuat pemograman yaitu melakukan pengkondisian |       [Conditioning](learn/Basic/006_conditioning)       |                                      [WPU - Pengkondisian](https://youtu.be/hXbDQryJAh0)                                      |
+|   05    |       Perulangan       |           Memahami inti kedua dari pemograman yaitu melakukan perulangan            |            [Looping](learn/Basic/007_looping)            | [WPU - Perulangan dengan For](https://youtu.be/1HussC8jKrk) dan [WPU - Perulangan dengan While](https://youtu.be/61XLzozBj2c) |
+|   06    |         Fungsi         |                   Mengenal konsep fungsi dalam teknik pemograman                    |           [Function](learn/Basic/008_function)           |                                        [WPU - Function](https://youtu.be/6-UqHXBtYkg)                                         |
+|   07    |      Konsep Array      |     Memahami konsep Array dan mencoba untuk mengimplemntasikannya dalam program     |              [Array](learn/Basic/009_array)              |                                          [WPU - Array](https://youtu.be/CW5pfpafgDE)                                          |
+|   08    |      Konsep Objek      |       Mengenal konsep Object yang menjadi konsep paling penting di Javascript       |             [Object](learn/Basic/011_object)             |                                         [WPU - Object](https://youtu.be/RKsapPaUgww)                                          |
+|   09    |         Class          |              Memahami penggunaan _class_ dalam pembuatan sebuah objek               |            [Object](learn/Basic/013_classes)             |                                         [WPU - Object](https://youtu.be/RKsapPaUgww)                                          |
 
 ### :two: Jalur Belajar DOM
 
 Jika sebelumnya kalian sudah mempelajari dan memahamai dasar-dasar JavaScript, selanjutnya kalian bisa belajar DOM. Di sini kalian akan belajar bagaimana berinteraksi langsung dengan website dengan cara memanipulasi objek / element HTML dengan menggunakan JavaScript.
-| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
-| :-----------: | :----------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: |:---------------------------------------------------------------------: |
-| 01 | Pengenalan | Mengenali apa itu DOM dan cara kerjanya | [Introduction](learn/DOM/001_Introduction) | [WPU - Pengenalan DOM](https://youtu.be/aT60R1cySLM) |
-| 02 | Nodes | Memahami konsep _Nodes_ pada DOM | [Nodes](learn/DOM/002_DOM_Nodes) | [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM) |
-| 03 | Collections | Memahami konsep _Colections_ pada DOM | [Collections](learn/DOM/003_Collections) | [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM) |
-| 04 | Method | Memahami bagaimana cara memanipulasi DOM dengan menggunakan _method_ yang ada | [Method](learn/DOM/004_Methods) | [WPU - DOM Manipulation](https://youtu.be/ff5aKnXmnx0) |
-| 05 | Events | Memahami apa itu _event_ pada DOM yang berguna untuk memberikan interaksi pada element HTML | [Events](learn/DOM/005_Events) | [WPU - DOM Events](https://youtu.be/ndYweb0Yn6o) |
-| 06 | Event Listener | Memahami cara penulisan _addEventListener_ yang digunakan untuk memberikan _events_ pada element | [Event Listener](learn/DOM/006_Event_Listener) | [WPU - DOM Events](https://youtu.be/ndYweb0Yn6o) |
-| 07 | Traversal | Memahami tentang bagaimana cara mengambil element berdasarkan objek yang ada | [Traversal](learn/DOM/007_Traversal) | [WPU - DOM Traversal](https://youtu.be/SVOCSoGYdpQ) |
-| 08 | Event Bubbling | Memahami lebih dalam mengenai _events_ dan _method-method_ di dalamnya | [Event Bubbling](learn/DOM/008_Event_Bubbling) | [WPU - Event Bubbling](https://youtu.be/a_JFfPHTAf4) |
+
+| Langkah |     Topik      |                                       Target Pembelajaran                                        |                     Materi                     |                     Video Rujukan                      |
+| :-----: | :------------: | :----------------------------------------------------------------------------------------------: | :--------------------------------------------: | :----------------------------------------------------: |
+|   01    |   Pengenalan   |                             Mengenali apa itu DOM dan cara kerjanya                              |   [Introduction](learn/DOM/001_Introduction)   |  [WPU - Pengenalan DOM](https://youtu.be/aT60R1cySLM)  |
+|   02    |     Nodes      |                                 Memahami konsep _Nodes_ pada DOM                                 |        [Nodes](learn/DOM/002_DOM_Nodes)        |     [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM)     |
+|   03    |  Collections   |                              Memahami konsep _Colections_ pada DOM                               |    [Collections](learn/DOM/003_Collections)    |     [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM)     |
+|   04    |     Method     |          Memahami bagaimana cara memanipulasi DOM dengan menggunakan _method_ yang ada           |        [Method](learn/DOM/004_Methods)         | [WPU - DOM Manipulation](https://youtu.be/ff5aKnXmnx0) |
+|   05    |     Events     |   Memahami apa itu _event_ pada DOM yang berguna untuk memberikan interaksi pada element HTML    |         [Events](learn/DOM/005_Events)         |    [WPU - DOM Events](https://youtu.be/ndYweb0Yn6o)    |
+|   06    | Event Listener | Memahami cara penulisan _addEventListener_ yang digunakan untuk memberikan _events_ pada element | [Event Listener](learn/DOM/006_Event_Listener) |    [WPU - DOM Events](https://youtu.be/ndYweb0Yn6o)    |
+|   07    |   Traversal    |           Memahami tentang bagaimana cara mengambil element berdasarkan objek yang ada           |      [Traversal](learn/DOM/007_Traversal)      |  [WPU - DOM Traversal](https://youtu.be/SVOCSoGYdpQ)   |
+|   08    | Event Bubbling |              Memahami lebih dalam mengenai _events_ dan _method-method_ di dalamnya              | [Event Bubbling](learn/DOM/008_Event_Bubbling) |  [WPU - Event Bubbling](https://youtu.be/a_JFfPHTAf4)  |
 
 ### :three: Jalur Belajar ES6
 
 Jalur belajar ini bisa kalian ambil jika sudah memahami dasar-dasar JavaScript _tanpa mempelajari DOM terlebih dahulu_. Di sini kalian akan belajar sintaks dan konsep JavaScript terbaru yang tentunya lebih berguna nantinya.
-| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
-| :-----------: | :----------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: |:---------------------------------------------------------------------: |
-| 01 | Pengenalan | Pengenalan apa itu ES6 | [Introduction](learn/ES6/001_introduction) | - |
-| 02 | Variabel | Mengenali sintaks terbaru dalam membuat variabel | [Variable](learn/ES6/002_variable) | [WPU - VAR, LET & CONST](https://youtu.be/7HDgJScwIrI) |
-| 03 | Arrow Function | Mengenali sintaks terbaru dalam membuat function | [Arrow Function](learn/ES6/003_arrow_function) | [WPU - Arrow Function](https://youtu.be/C8U_3_SBk6s) |
-| 04 | Template Literals | Memahami cara menyisipkan ekspresi ke dalam sebuah _string_ | [Template Literals](learn/ES6/005_template_literals) | [WPU - Template Literals](https://youtu.be/LywZF-xcfd8) |
-| 05 | Destructuring Assignment | Memahami apa itu _Destructuring Assignment_ dalam memecah array maupun objek | [Destructuring Assignment](learn/ES6/007_destructuring_assignment) | [WPU - Destrucuting Assignment](https://youtu.be/7f11bDxZSP0) |
-| 06 | For..Of Loop | Memahamai sintaks looping yang terbaru | [For..Of](learn/ES6/007_for_of_loop) | [WPU - For..Of](https://youtu.be/LXOG9rHkYOo) |
-| 07 | Spread Operator | Memahami apa itu _Spread Operator_ untuk memanipulasi array atau objek | [Spread Operator](learn/ES6/008_spread_operator) | [WPU - Spread Operator](https://youtu.be/AT5hfOL1Ddk) |
-| 08 | Rest Parameter | Memahami penggunaannya dalam menangkap banyak parameter dari sebuah _function_ | [Rest Parameter](learn/ES6/009_function_rest_parameter) | [WPU - Rest Parameter](https://youtu.be/C0mPB-lyI1I) |
+
+| Langkah |          Topik           |                              Target Pembelajaran                               |                               Materi                               |                         Video Rujukan                         |
+| :-----: | :----------------------: | :----------------------------------------------------------------------------: | :----------------------------------------------------------------: | :-----------------------------------------------------------: |
+|   01    |        Pengenalan        |                             Pengenalan apa itu ES6                             |             [Introduction](learn/ES6/001_introduction)             |                               -                               |
+|   02    |         Variabel         |                Mengenali sintaks terbaru dalam membuat variabel                |                 [Variable](learn/ES6/002_variable)                 |    [WPU - VAR, LET & CONST](https://youtu.be/7HDgJScwIrI)     |
+|   03    |      Arrow Function      |                Mengenali sintaks terbaru dalam membuat function                |           [Arrow Function](learn/ES6/003_arrow_function)           |     [WPU - Arrow Function](https://youtu.be/C8U_3_SBk6s)      |
+|   04    |    Template Literals     |          Memahami cara menyisipkan ekspresi ke dalam sebuah _string_           |        [Template Literals](learn/ES6/005_template_literals)        |    [WPU - Template Literals](https://youtu.be/LywZF-xcfd8)    |
+|   05    | Destructuring Assignment |  Memahami apa itu _Destructuring Assignment_ dalam memecah array maupun objek  | [Destructuring Assignment](learn/ES6/007_destructuring_assignment) | [WPU - Destrucuting Assignment](https://youtu.be/7f11bDxZSP0) |
+|   06    |       For..Of Loop       |                     Memahamai sintaks looping yang terbaru                     |                [For..Of](learn/ES6/007_for_of_loop)                |         [WPU - For..Of](https://youtu.be/LXOG9rHkYOo)         |
+|   07    |     Spread Operator      |     Memahami apa itu _Spread Operator_ untuk memanipulasi array atau objek     |          [Spread Operator](learn/ES6/008_spread_operator)          |     [WPU - Spread Operator](https://youtu.be/AT5hfOL1Ddk)     |
+|   08    |      Rest Parameter      | Memahami penggunaannya dalam menangkap banyak parameter dari sebuah _function_ |      [Rest Parameter](learn/ES6/009_function_rest_parameter)       |     [WPU - Rest Parameter](https://youtu.be/C0mPB-lyI1I)      |
 
 ## ⚡ Quick Access ⚡
 

learn/DOM/002_DOM_Nodes/index.html

@@ -1,13 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-  <p id="paragraf">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script>
+      const _log = console.log;
+      const encoder = new TextEncoder();
+
+      console.log = function (...rest) {
+        window.parent.postMessage(
+          {
+            source: "iframe",
+            message: rest.map(encoder.encode)
+          },
+          "*"
+        );
+        _log.apply(console, arguments);
+      };
+    </script>
+
+    <title>DOM Nodes</title>
+  </head>
+  <body>
+    <p id="paragraf">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
       accusantium, minus, dolore nostrum provident repellat amet sed minima
       expedita, corporis dignissimos. Adipisci ratione incidunt, officia culpa
@@ -17,7 +34,7 @@
       explicabo voluptas, ab suscipit tempore totam quidem? Aliquid ipsa
       deserunt harum voluptate hic ipsum in delectus, ducimus, totam omnis
       facilis quidem id aliquam enim iure repellat.
-    </p>  
+    </p>
     <script src="nodes.js"></script>
-</body>
-</html>
+  </body>
+</html>

learn/DOM/003_Collections/index.html

@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <style>
-        .box {
-            width: 100px;
-            height: 100px;
-            background-color: black;
-            margin-bottom: 20px;
-        }
+      .box {
+        width: 100px;
+        height: 100px;
+        background-color: black;
+        margin-bottom: 20px;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="box rotasi"></div>
     <div class="box rotasi"></div>
 
     <div class="box condong"></div>
     <div class="box condong"></div>
     <script type="text/javascript" src="script.js"></script>
-</body>
+  </body>
 </html>