Skip to content

Commit 92a5488

Browse files
reacto11mechareacto11mecha
authored
UI server, memperbarui script dan update hal kecil lainnya (#171)
* feat: menambahkan package baru untuk viewer * feat: menambahkan folder server yang didalamnya terdapat fungsi viewer * fix: memperbaiki eslint yang masih lint folder node modules * fix: fix codacy issue * fix: refactor * feat: menambahkan fungsi untuk melihat 3 folder utama * fix: memperbaiki codacy dan menghapus fitur naik satu folder ke atas * fix: memperbaiki warning lgtm * fix: percobaan lain untuk menghijaukan codacy dkk * feat: menambahkan folder public untuk static asset * feat: menambahkan navigasi naik satu direktori * feat: memperbaiki gambar yang tidak muncul dan refactor kode * fix: memperbaiki table yang tak terender dengan mengganti library ke marked * fix: memperbaiki single quote * feat: menambahkan pengkondisian jika folder tersebut ada html atau tidak supaya bisa menjalankan runner * fix: mengubah dari new RegExp ke hasilnya * feat: menambahkan fungsi prevent traversal dan windows path compatibility * fix: mengganti express ke fastify * feat: menambahkan tree-to-list * fix: menghapus folder controllers * feat: menambahkan plugin baru dan util untuk scan directory * fix: autoload semua plugin yang ada di folder plugins * feat: menambahkan routing, data rearrange belum selesai * fix: memperbarui teknik memfilter data * fix: memindahkan dan memperbaiki filter data, menghapus fs yang tak terpakai * fix: memperbaiki posisi filter supaya lebih efektif * fix: memperbaiki issue codacy * fix: menambahkan fungsi penentu icon dan forEach routingData untuk membuat route * fix: semoga hilang satu codacy issue * feat: menambahkan fungsi yang menentukan view component * feat: menambahkan prism js * feat: menambahkan html viewer * feat: menambahkan (kembali) folder controllers supaya lebih rapih dalam penulisan kode * fix: codacy issue * fix: codacy, codacy, dan lgtm * fix: memperbaiki codacy untuk viewer html * feat: menambahkan preview file readme * feat: menambahkan fitur console output iframe * feat: melengkapi fungsionalitas html viewer * fix: memperbaiki style yang kurang enak dipandang * feat: menambahkan socket io sebagai executor file yang perlu node js * docs: menambahkan keterangan tambahan snippet * fix: memperbarui script yang ada * fix: menjalankan prettier dan memperbaiki kode yang tidak sesuai * fix: memperbaiki eslint * feat: menambahkan redirect permanent dari `/halaman/` menjadi `/halaman` * feat: memperbarui halaman node viewer * feat: menambahkan fungsionalitas menjalankan kode dari server dikirm data output console ke client * fix: memperbaiki dan memperbarui pasca perombakan repo * fix: memperbaiki style yang rusak dan update contributing * fix: memperbaiki masalah codacy * fix: percobaan memperbaiki codacy * fix: semoga betul si codacy * fix: memperbaiki css lint * fix: memperbaiki css lint (2) * feat: menambahkan konfigurasi tern js untuk kemudahan user atom * fix: memperbaiki codacy * fix: memperbaiki issue css codacy * fix: memperbaiki sender message * feat: menambahkan node emoji * docs: memperbaiki readme yang tidak bisa dibaca oleh marked * fix: update codeowner * fix: menambahkan om rizky * fix: memperbaiki konfigurasi mergify karena docs team sudah dihapus * docs: memperbaiki navigasi yang rusak
1 parent ba27270 commit 92a5488

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+7523
-1285
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!/node_modules/*

‎.github/CODEOWNERS

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66
# the repo. Unless a later match takes precedence,
77
# @global-owner1 and @global-owner2 will be requested for
88
# review when someone opens a pull request.
9-
* @reacto11mecha @nomadkode @dydrmr5 @dipras @AlfatArdiansa @hendraaagil @amdev142 @hudadamar21
10-
* @vipscodes @Fikriihsan03 @wanrabbae @wahyall @dhafitf
9+
* @reacto11mecha @nomadkode @wanrabbae @wahyall @dhafitf
10+
* @hasheemi @KimmyKx @rolandopranata @azqilana @rizkyikhwan

‎.mergify.yml

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,20 @@ pull_request_rules:
3131
label:
3232
add:
3333
- markdown files
34-
- request docs team untuk review
35-
- name: review docs team untuk file markdown
34+
- request javascript team docs untuk review
35+
- name: review javascript team docs untuk file markdown
3636
conditions:
3737
- label=markdown files
3838
actions:
3939
request_reviews:
40-
teams:
41-
- "@bellshade/docs-team"
40+
users:
41+
- dhafitf
42+
- nomadkode
4243

4344
- name: review javascript team untuk file markdown
4445
conditions:
4546
- label=javascript files
4647
actions:
4748
request_reviews:
4849
teams:
49-
- "@bellshade/javascript-team"
50+
- "@bellshade/javascript-team"

‎.tern-project

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"ecmaVersion": 8,
3+
"libs": ["browser"],
4+
"loadEagerly": ["server/**"],
5+
"dontLoad": ["node_modules/**"],
6+
"plugins": {
7+
"doc_comment": true,
8+
"node": {
9+
"dontLoad": "",
10+
"load": "",
11+
"modules": ""
12+
},
13+
"modules": {
14+
"dontLoad": "",
15+
"load": "",
16+
"modules": ""
17+
},
18+
"node_resolve": {},
19+
"commonjs": {}
20+
}
21+
}

‎CONTRIBUTING.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,28 @@ Pull request `merged` jika:
122122
- Mengikuti standar dan arahan dari `CONTRIBUTING.md`
123123
- Lulus test dan cek dari beberapa test yang sudah kami siapkan
124124

125+
## Snippet Tambahan
126+
127+
Jika kamu menambahkan kode yang memerlukan html dan ada `console.log` didalamnya, wajib tambahkan kode dibawah ini, tambahkan kodenya di bagian `head` dari htmlnya.
128+
129+
```html
130+
<script>
131+
const _log = console.log;
132+
const encoder = new TextEncoder();
133+
134+
console.log = function (...rest) {
135+
window.parent.postMessage(
136+
{
137+
source: "iframe",
138+
message: rest.map((d) => encoder.encode(d))
139+
},
140+
"*"
141+
);
142+
_log.apply(console, arguments);
143+
};
144+
</script>
145+
```
146+
125147
## Tambahan
126148

127149
- Jika ada kendala atau masalah dalam pull request, kamu bisa laporkan masalah pada [issue](https://github.com/bellshade/Javascript/issues)

‎README.md

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -43,45 +43,48 @@ Beberapa contoh sederhana penggunaan JavaScript:
4343
### :one: Jalur Belajar Basic
4444

4545
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.
46-
| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
47-
| :-----------: | :----------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: |:---------------------------------------------------------------------: |
48-
| 01 | Pengenalan | Memahami bagaimana JavaScript bekerja | [Hello World](learn/basic/001_hello_world) | [WPU - Pengenalan JavaScript](https://youtu.be/RUTV_5m4VeI) |
49-
| 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) |
50-
| 03 | Operator Aritmatik | Dapat melakukan operasi aritmatika sederhana | [Arithmetic](learn/basic/005_arithmetic_operation) | [WPU - Operator Aritmatika](https://youtu.be/EnXClrVdpTM) |
51-
| 04 | Pengkondisian | Memahami salah satu dari inti dari membuat pemograman yaitu melakukan pengkondisian | [Conditioning](learn/basic/006_conditioning) | [WPU - Pengkondisian](https://youtu.be/hXbDQryJAh0) |
52-
| 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) |
53-
| 06 | Fungsi | Mengenal konsep fungsi dalam teknik pemograman | [Function](learn/basic/008_function) | [WPU - Function](https://youtu.be/6-UqHXBtYkg) |
54-
| 07 | Konsep Array | Memahami konsep Array dan mencoba untuk mengimplemntasikannya dalam program | [Array](learn/basic/009_array) | [WPU - Array](https://youtu.be/CW5pfpafgDE) |
55-
| 08 | Konsep Objek | Mengenal konsep Object yang menjadi konsep paling penting di Javascript | [Object](learn/basic/011_object) | [WPU - Object](https://youtu.be/RKsapPaUgww) |
56-
| 09 | Class | Memahami penggunaan _class_ dalam pembuatan sebuah objek | [Object](learn/basic/013_classes) | [WPU - Object](https://youtu.be/RKsapPaUgww) |
46+
47+
| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
48+
| :-----: | :--------------------: | :---------------------------------------------------------------------------------: | :------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: |
49+
| 01 | Pengenalan | Memahami bagaimana JavaScript bekerja | [Hello World](learn/Basic/001_hello_world) | [WPU - Pengenalan JavaScript](https://youtu.be/RUTV_5m4VeI) |
50+
| 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) |
51+
| 03 | Operator Aritmatik | Dapat melakukan operasi aritmatika sederhana | [Arithmetic](learn/Basic/005_arithmetic_operation) | [WPU - Operator Aritmatika](https://youtu.be/EnXClrVdpTM) |
52+
| 04 | Pengkondisian | Memahami salah satu dari inti dari membuat pemograman yaitu melakukan pengkondisian | [Conditioning](learn/Basic/006_conditioning) | [WPU - Pengkondisian](https://youtu.be/hXbDQryJAh0) |
53+
| 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) |
54+
| 06 | Fungsi | Mengenal konsep fungsi dalam teknik pemograman | [Function](learn/Basic/008_function) | [WPU - Function](https://youtu.be/6-UqHXBtYkg) |
55+
| 07 | Konsep Array | Memahami konsep Array dan mencoba untuk mengimplemntasikannya dalam program | [Array](learn/Basic/009_array) | [WPU - Array](https://youtu.be/CW5pfpafgDE) |
56+
| 08 | Konsep Objek | Mengenal konsep Object yang menjadi konsep paling penting di Javascript | [Object](learn/Basic/011_object) | [WPU - Object](https://youtu.be/RKsapPaUgww) |
57+
| 09 | Class | Memahami penggunaan _class_ dalam pembuatan sebuah objek | [Object](learn/Basic/013_classes) | [WPU - Object](https://youtu.be/RKsapPaUgww) |
5758

5859
### :two: Jalur Belajar DOM
5960

6061
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.
61-
| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
62-
| :-----------: | :----------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: |:---------------------------------------------------------------------: |
63-
| 01 | Pengenalan | Mengenali apa itu DOM dan cara kerjanya | [Introduction](learn/DOM/001_Introduction) | [WPU - Pengenalan DOM](https://youtu.be/aT60R1cySLM) |
64-
| 02 | Nodes | Memahami konsep _Nodes_ pada DOM | [Nodes](learn/DOM/002_DOM_Nodes) | [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM) |
65-
| 03 | Collections | Memahami konsep _Colections_ pada DOM | [Collections](learn/DOM/003_Collections) | [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM) |
66-
| 04 | Method | Memahami bagaimana cara memanipulasi DOM dengan menggunakan _method_ yang ada | [Method](learn/DOM/004_Methods) | [WPU - DOM Manipulation](https://youtu.be/ff5aKnXmnx0) |
67-
| 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) |
68-
| 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) |
69-
| 07 | Traversal | Memahami tentang bagaimana cara mengambil element berdasarkan objek yang ada | [Traversal](learn/DOM/007_Traversal) | [WPU - DOM Traversal](https://youtu.be/SVOCSoGYdpQ) |
70-
| 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) |
62+
63+
| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
64+
| :-----: | :------------: | :----------------------------------------------------------------------------------------------: | :--------------------------------------------: | :----------------------------------------------------: |
65+
| 01 | Pengenalan | Mengenali apa itu DOM dan cara kerjanya | [Introduction](learn/DOM/001_Introduction) | [WPU - Pengenalan DOM](https://youtu.be/aT60R1cySLM) |
66+
| 02 | Nodes | Memahami konsep _Nodes_ pada DOM | [Nodes](learn/DOM/002_DOM_Nodes) | [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM) |
67+
| 03 | Collections | Memahami konsep _Colections_ pada DOM | [Collections](learn/DOM/003_Collections) | [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM) |
68+
| 04 | Method | Memahami bagaimana cara memanipulasi DOM dengan menggunakan _method_ yang ada | [Method](learn/DOM/004_Methods) | [WPU - DOM Manipulation](https://youtu.be/ff5aKnXmnx0) |
69+
| 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) |
70+
| 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) |
71+
| 07 | Traversal | Memahami tentang bagaimana cara mengambil element berdasarkan objek yang ada | [Traversal](learn/DOM/007_Traversal) | [WPU - DOM Traversal](https://youtu.be/SVOCSoGYdpQ) |
72+
| 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) |
7173

7274
### :three: Jalur Belajar ES6
7375

7476
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.
75-
| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
76-
| :-----------: | :----------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: |:---------------------------------------------------------------------: |
77-
| 01 | Pengenalan | Pengenalan apa itu ES6 | [Introduction](learn/ES6/001_introduction) | - |
78-
| 02 | Variabel | Mengenali sintaks terbaru dalam membuat variabel | [Variable](learn/ES6/002_variable) | [WPU - VAR, LET & CONST](https://youtu.be/7HDgJScwIrI) |
79-
| 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) |
80-
| 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) |
81-
| 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) |
82-
| 06 | For..Of Loop | Memahamai sintaks looping yang terbaru | [For..Of](learn/ES6/007_for_of_loop) | [WPU - For..Of](https://youtu.be/LXOG9rHkYOo) |
83-
| 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) |
84-
| 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) |
77+
78+
| Langkah | Topik | Target Pembelajaran | Materi | Video Rujukan |
79+
| :-----: | :----------------------: | :----------------------------------------------------------------------------: | :----------------------------------------------------------------: | :-----------------------------------------------------------: |
80+
| 01 | Pengenalan | Pengenalan apa itu ES6 | [Introduction](learn/ES6/001_introduction) | - |
81+
| 02 | Variabel | Mengenali sintaks terbaru dalam membuat variabel | [Variable](learn/ES6/002_variable) | [WPU - VAR, LET & CONST](https://youtu.be/7HDgJScwIrI) |
82+
| 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) |
83+
| 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) |
84+
| 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) |
85+
| 06 | For..Of Loop | Memahamai sintaks looping yang terbaru | [For..Of](learn/ES6/007_for_of_loop) | [WPU - For..Of](https://youtu.be/LXOG9rHkYOo) |
86+
| 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) |
87+
| 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) |
8588

8689
## ⚡ Quick Access ⚡
8790

‎learn/DOM/002_DOM_Nodes/index.html

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
8-
</head>
9-
<body>
10-
<p id="paragraf">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<script>
9+
const _log = console.log;
10+
const encoder = new TextEncoder();
11+
12+
console.log = function (...rest) {
13+
window.parent.postMessage(
14+
{
15+
source: "iframe",
16+
message: rest.map(encoder.encode)
17+
},
18+
"*"
19+
);
20+
_log.apply(console, arguments);
21+
};
22+
</script>
23+
24+
<title>DOM Nodes</title>
25+
</head>
26+
<body>
27+
<p id="paragraf">
1128
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
1229
accusantium, minus, dolore nostrum provident repellat amet sed minima
1330
expedita, corporis dignissimos. Adipisci ratione incidunt, officia culpa
@@ -17,7 +34,7 @@
1734
explicabo voluptas, ab suscipit tempore totam quidem? Aliquid ipsa
1835
deserunt harum voluptate hic ipsum in delectus, ducimus, totam omnis
1936
facilis quidem id aliquam enim iure repellat.
20-
</p>
37+
</p>
2138
<script src="nodes.js"></script>
22-
</body>
23-
</html>
39+
</body>
40+
</html>

‎learn/DOM/003_Collections/index.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Document</title>
88
<style>
9-
.box {
10-
width: 100px;
11-
height: 100px;
12-
background-color: black;
13-
margin-bottom: 20px;
14-
}
9+
.box {
10+
width: 100px;
11+
height: 100px;
12+
background-color: black;
13+
margin-bottom: 20px;
14+
}
1515
</style>
16-
</head>
17-
<body>
16+
</head>
17+
<body>
1818
<div class="box rotasi"></div>
1919
<div class="box rotasi"></div>
2020

2121
<div class="box condong"></div>
2222
<div class="box condong"></div>
2323
<script type="text/javascript" src="script.js"></script>
24-
</body>
24+
</body>
2525
</html>

0 commit comments

Comments
 (0)