[
{
"path": ".gitignore",
"content": ".DS_Store\n.hidden\n"
},
{
"path": "FINISH.md",
"content": "# Hacktiv8 Phase 0 is Over: That's a wrap!\n\nKami akan merangkum semua laporan kegiatan kamu dan menyimpulkan hasilnya, yang akan kita berikan ke masing-masing kamu.\n\nTermasuk juga:\n\n- Showcases\n- Blog Post Collection\n- Activity Evaluation\n- Final Activity Evaluation\n"
},
{
"path": "README-WEEK-1.md",
"content": "# Hacktiv8 Phase 0 Week 1: Membuat Website Pertama Saya\n\n\n\nSelamat datang di tahap persiapan sesungguhnya bootcamp Hacktiv8, yaitu Phase 0! Phase 0 ini merupakan pembelajaran yang bersifat matrikulasi atau kalibrasi yang lebih intens. Phase 0 juga menjadi penentu apakah kamu dapat maju ke Phase 1. Kita harap bersama agar kamu antusias untuk meningkatkan pengetahuan dasarmu!\n\n**Bagaimana Phase 0 ini akan berjalan?**\n\nDalam tahap ini, tiap pekan bisa diselesaikan dalam waktu paling cepat 20-30 jam. Pun kalau kamu sudah bisa berbagai skill yang sudah tertera, bisa saja juga ada beberapa hal esensial dan tambahan yang belum kamu tahu. Tiap akhir pekan, kamu harus mengisi form laporan kegiatan yang link-nya disertakan di bawah.\n\n\n\n**Oke, siap untuk memulai Phase 0 kita di Hacktiv8?**\n\nKami yakin bahwa kamu akan mengalami petualangan yang sangat seru! Pada waktu di antara berakhirnya Phase 0 dan sebelum dimulainya Phase 1 juga, kita akan melakukan evaluasi terhadap ilmu yang telah kamu dapatkan.\n\n**Apa saja yang akan kita lakukan, pahami, dan selesaikan dalam beberapa hari ke depan?**\n\nBerikut berbagai modul kegiatan inti yang dapat kamu lihat, baca, tonton, lakukan, dan sebagainya. Ikuti tiap checklist yang bisa kamu lakukan. Jika ada yang belum selesai, boleh saja ditunda ke hari berikutnya. Yang penting secara pribadi dalam sepekan kamu harus bisa menyelesaikan semuanya.\n\nCatatan: Untuk seluruh diskusi pembelajaran inti dari awal persiapan hingga berakhirnya bootcamp, kita akan menggunakan grup [Slack](https://slack.com/).\n\nPanduan:\n- :notebook_with_decorative_cover: **Reference** adalah bacaan sebagai referensi pembelajaran kamu. Di dalam beberapa bacaan, ada direction yang memintamu membuat sesuatu. Direction itu lebih bersifat opsional untuk membantu kamu saja.\n- :anchor: **Anchor** adalah tugas atau tantangan yang wajib kamu kerjakan dan kumpulkan.\n- 💪 **Self Training** adalah tugas atau tantangan opsional yang walaupun tidak dikumpulkan, bila kamu selesaikan dengan baik, pembelajarannya maksimal! 😎\n- :rocket: **Rocket** adalah tantangan opsional yang menguji kehebatanmu sebagai calon developer masa depan\n- :books: **Optional Reference** adalah bacaan sebagai referensi tambahan yang akan memperkaya pengetahuanmu\n\n**HACKTIV8 FoxHub, Platform Pengumpulan Tugas**\n\n- [FoxHub Guide](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/fox-hub-guide.md)\n\n**Pengumpulan Tugas dan Sistem Feedback**\n\nTugas mingguan dikumpulkan harian, dan setiap tugas akan dikoreksi setiap pagi di hari selanjutnya. Namun, untuk deadline sendiri, kami memperbolehkan tugas agar dikumpulkan di akhir minggu di hari minggu. Kami merekomendasikan untuk mengumpulkan tugas dalam bentuk harian, karena akan mempercepat tim instruktur untuk mengkoreksi dan memberikan feedback. Gunakan Platform HACKTIV8 FoxHub untuk melakukan pengumpulan tugas.\n\n## Senin - Hari Pertamamu di HACKTIV8 Phase 0\nHari pertamamu akan dimulai dengan memperkenalkan dirimu kepada teman-teman lainnya di Slack Group, dan\nmempelajari hal paling pertama dalam pembuatan sebuah web, yaitu HTML! Mungkin banyak dari antara kamu\nyang pernah mencoba HTML, namun tidak ada salahnya untuk mereview ulang, bukan? Untuk tugas yang menggunakan Codecademy, yang perlu kamu kumpulkan adalah screenshot yang menunjukkan bahwa kamu telah menyelesaikan course tersebut di akhir!\n\nMateri & Referensi :\n- :notebook_with_decorative_cover:\n[Mempelajari dasar HTML5](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/html5-basics.md)\n- :notebook_with_decorative_cover:\n[Mempelajari dasar HTML5 forms](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/html5-forms-basics.md)\n- :books:\n[Mengenal Dunia Web dan Internet](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/internet-web.md)\n\nTugas :\n- :anchor:\n[[**Exercises 1**] Codecademy Course - HTML](https://www.codecademy.com/learn/learn-html)\n- 💪\n[[**Latihan Pribadi 1**] Membuat Halaman HTML Sederhana](modules/anchor-laman-web-pertamaku.md)\n\n## Selasa - Menguasai HTML dan Mengenal CSS\nDi hari pertama kamu telah berhasil membuat website pertamamu dengan memanfaatkan beberapa tag sederhana di HTML. Hari ini, mari kita percantik tampilan websitemu dengan Cascading Style Sheet, atau disingkat menjadi CSS. Akan sangat menyenangkan pada saat kita bisa mulai membuat website kita lebih menarik!\n\nMateri & Referensi :\n- :notebook_with_decorative_cover:\n[Mempelajari dasar CSS3](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/css3-basics.md)\n\nTugas :\n- :anchor: [[**Exercises 2**] Codecademy Course - CSS (hanya sampai Unit 5 - Typography)](https://www.codecademy.com/learn/learn-css)\n- 💪 [[**Latihan Pribadi 2**] Menghias HTML dengan CSS](modules/anchor-css-selector-and-styling.md)\n- 💪 [[**Latihan Pribadi 3**] Membuat Layout dan Desain Halaman Web dengan CSS](modules/anchor-css-layouting.md)\n\n## Rabu dan Kamis - Mengendalikan Revisi Menggunakan Git\nKamu telah mampu membuat website yang cukup menarik dengan ilmu yang telah kamu pelajari. Sekarang saatnya\nperkaya website kamu dengan gambar dan tabel. Dan hari ini, kamu juga akan berkenalan dengan Git, sebuah\ntool untuk mengendalikan revisi dari kode yang telah kamu buat. Dengan menyelesaikan hari ini, berarti kamu\ntelah punya website kamu sendiri secara online!\n\nMateri & Referensi :\n\n- :notebook_with_decorative_cover:\n[Mengetahui dan menggunakan sistem untuk mengendalikan revisi, yaitu Git and GitHub](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/git-github-basics.md)\n- :notebook_with_decorative_cover:\n[Melatih penggunaan command line serta Git dan GitHub lebih banyak](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/cli-git-github-practice.md)\n\nTugas :\n\n- 💪\n[[**Latihan Pribadi 4**] Mempelajari Markdown dan Membuat README.md](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/markdown-anchor.md)\n- 💪\n[[**Latihan Pribadi 5**] Membuat Branch Baru pada Repositori](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/git-branch-anchor.md)\n\n\n## Jumat - Satu Langkah Menjadi Expert HTML dan CSS!\nMenjelang akhir minggu pertama kita, saatnya buat diri kita puas dengan mempercantik website kita dan\nmenampilkannya secara online. Kamu juga bisa perdalam lagi hal-hal terkait web design. Puas dengan tampilan websitemu? Tenang saja, masih ada lima minggu online yang akan lebih menantang!\n\nMateri & Referensi :\n- :notebook_with_decorative_cover:\n[Memahahami perencanaan, process, dan manajemen dalam pembuatan web](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/web-dev-process.md)\n- :notebook_with_decorative_cover:\n[Mengenal adaptive web design dan responsive web design (RWB)](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/web-design.md)\n\nTugas :\n- :anchor:\n[[**Exercise 3**] - Website yang dihosting dengan Github Pages](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/github-pages-rev.md)\n- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)\n\nSelamat memulai petualanganmu yang lebih nyata dari sebelumnya! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.\n\nSalam,\n\nTim HACKTIV8\n\n\n"
},
{
"path": "README-WEEK-2.md",
"content": "Material Valid for FullStack Immersive Batch 17\n\n# Hacktiv8 Phase 0 Week 2: The World of JavaScript\n\n\n\nSelamat sudah melalui kegiatan pekan pertama! Pekan kedua ini kita akan berkenalan dengan JavaScript,\ndan melatih kemampuan logika dan pengolahan data dalam programming. Di pekan ini, kamu akan bertemu dengan sangat banyak kode dan istilah yang digunakan dalam pemrograman atau khususnya pada JavaScript.\n\n\n\n## Metode Pengumpulan Tugas\n\nUntuk seluruh tugas week 2, buatlah sebuah repository baru di github dengan nama h8-p0-w2. Untuk setiap satu tugas, buatlah file .js (untuk tugas javascript), file .txt (untuk tugas pseudocode), atau file .png (untuk tugas screenshot codecademy) untuk masing-masing tugas. Contoh, untuk tugas pertama, buatlah file .js dengan nama exercise-1.js dan push ke github. Kirimkan link yang merujuk ke file .js tersebut ke dalam foxhub. **Jangan kirimkan link ke repository, tapi ke direct file di dalam repository-nya**.\n\n## Senin - Pengenalan Programming, Algoritma, dan Pseudocode\nHari pertama di Week 2! Mulailah pekan baru dengan semangat baru! Hari ini, kamu akan bertemu dengan banyak kode yang mungkin belum pernah kamu lihat sebelumnya. Bersiaplah, dan jangan lupa bertanya apabila kamu menemukan kesulitan. Selamat belajar! :smile:\n\nMateri & Referensi :\n- :notebook_with_decorative_cover:\n[Mempelajari struktur alur program dengan algoritma dan pseudocode](modules/algorithm-pseudocode.md)\n\nTugas :\n\n- :anchor:\n[[**Exercises 1**] Berlatih dengan Pseudocode](modules/challenge-main-pseudocode.md)\n\n## Selasa - Dunia JavaScript\n\nHari ini masuklah kita ke bahasa pemrograman JavaScript. Yuk kenalan dengan JavaScript dan langsung coba keseruannya!\n\nMateri & Referensi :\n\n- :wrench:\n[Repl, tools online untuk menjalankan JavaScript](https://repl.it/languages/javascript)\n- :notebook_with_decorative_cover:\n[Memahami dan menggunakan dasar pemrograman dengan JavaScript](modules/js-first-time.md)\n- :notebook_with_decorative_cover:\n[Memahami Tipe Data dan Variabel pada JavaScript](modules/js-first-time.md#data-type)\n- :notebook_with_decorative_cover:\n[Mengenal Berbagai Jenis Operasi dalam JavaScript](modules/js-first-time.md#operator)\n- :notebook_with_decorative_cover:\n[Memahami Control Flow: Conditional dan Branching](modules/js-first-time.md#conditional)\n\nTugas :\n\n- :anchor:\n[[**Exercises 2**] Codecademy JavaScript Building Blocks: Unit 1 and 2 - Intro and Control Flow only](https://www.codecademy.com/learn/learn-javascript)\n- :anchor:\n[[**Exercises 3**] Mengenal penggunaan Conditional `if-else` dalam JavaScript](modules/anchor-menggunakan-if-else.md)\n- :anchor:\n[[**Exercises 4**] Mengenal penggunaan Conditional (Switch-Case) dalam JavaScript](modules/anchor-switch-case.md)\n\n## Rabu - Mengenal Tipe data String dan Konsep Looping atau Perulangan\n\nHari ini mari kita berkenalan dengan string dan perulangan, atau sering disebut juga sebagai looping atau iteration di JavaScript.\n\nMateri & Referensi :\n- :notebook_with_decorative_cover:\n[Memahami Tipe Data String pada JavaScript](modules/js-string-reference.md)\n- :notebook_with_decorative_cover:\n[Memahami Perulangan atau Looping](modules/js-first-time.md#loopiteration)\n- :notebook_with_decorative_cover:\n[Memahami Built-in Object Math](modules/math-object-js.md)\n\nTugas :\n- :anchor: [[**Exercises 5**] Bermain dengan String di JavaScript](modules/anchor-main-string.md)\n- :anchor: [[**Exercises 6**] Berlatih Perulangan di JavaScript](modules/anchor-main-loop.md)\n- :anchor: [[**Exercises 7**] Perulangan - Play with Asterisks](modules/anchor-main-loop-asterisks.md)\n\n## Kamis - Menggunakan Konsep Functions\n\nMulai familiar dengan JavaScript? Good! Saatnya kita masuk ke pembahasan bagaimana alur dan algortima yang sangat penting untuk menyelesaikan kasus dengan programming, dan juga mengenal dengan yang namanya functions dan scope yang sangat membantu kamu untuk membuat program.\n\nMateri & Referensi :\n- :notebook_with_decorative_cover:\n[Mempelajari Function atau Method](modules/js-first-time.md#functionmethod)\n- :notebook_with_decorative_cover:\n[Mempelajari Scope](modules/js-scope.md)\n\nTugas :\n\n- :anchor:\n[[**Exercises 8**] JavaScript Building Blocks: Codecademy JavaScript Course (Unit 3 - Functions)](https://www.codecademy.com/learn/learn-javascript)\n- :anchor:\n[[**Exercises 9**] Berlatih Penggunaan Functions](modules/anchor-basic-function.md)\n\n## Jumat - Solve Problems menggunakan JavaScript\n\n- :anchor:\n[[**Exercises 10**] Bandingkan Angka](/modules/challenge-bandingkan-angka.md)\n- :anchor:\n[[**Exercises 11**] Balik Kata](/modules/challenge-balik-kata.md)\n- :anchor:\n[[**Exercises 12**] Konversi Menit](/modules/challenge-konversi-menit.md)\n- :anchor:\n[[**Exercises 13**] X dan O](/modules/challenge-x-dan-o.md)\n\n\n\n\n\n\n\n\n## Sabtu dan Minggu\n\n- [Refleksi kegiatan pekan ini](modules/reflection.md)\n- [Blogging teknikal terkait skill pekan ini](modules/blog.md)\n\nSelamat berpetualang dengan logika dan data! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.\n\nSalam,\n\nTim Hacktiv8\n\n\n"
},
{
"path": "README-WEEK-3.md",
"content": "# Hacktiv8 Phase 0 Week 3: Arrays and Logics\n\n\n\nSelamat sudah melalui kegiatan pekan kedua! Pekan ketiga ini kita akan melatih pemahaman tentang logika dan implementasinya ke berbagai kasus. Pastikan kalian telah memahami dengan baik materi di minggu sebelum nya.\n\nKarena sudah menginjak pekan ke 3, ada baiknya kamu menyelesaikan tugasnya dari hari ke hari secara rutin. Semaksimal mungkin tugas-tugas yang ada tidak ditumpuk di kemudian hari atau bahkan di akhir minggu, karena mulai pekan 3 ini setiap hari nya ada challenge coding yang menentukan kelanjutan ke phase 1 :bowtie: , dan semua challenge yang bertanda :anchor: ini wajib diselesaikan.\n\n\n\n## Senin - Live Coding\n\nInstruksi diberikan di channel kelas.\n\n## Selasa - Mengenal Tipe Data Array\n\nSebelumnya, kita telah belajar berbagai macam tipe data yang kita tampung di variabel JavaScript dan kita bermain operasi dengannya, menggunakan conditional, bahkan hingga looping. Sekarang, saatnya kita berkenalan dengan Array, tipe data yang sangat berguna untukmu dalam membuat penampungan data yang terstruktur.\n\nMateri & Referensi :\n\n- :notebook_with_decorative_cover: [Mempelajari tipe data Array](modules/js-array.md)\n- :notebook_with_decorative_cover:\n[Memahami Tipe Data String pada JavaScript](modules/js-string-reference.md)\n\nTugas :\n\n- :anchor:\n[[**Exercises 1**] JavaScript Building Blocks: Codecademy JavaScript Course (Unit 4 - Arrays)](https://www.codecademy.com/learn/learn-javascript)\n- :anchor:\n[[**Exercises 2**] Tantangan Array 1 (Mengakses Nilai dalam Array)](modules/anchor-akses-array.md)\n- :anchor:\n[[**Exercises 3**] Tantangan Array 2 (Melooping menggunakan Array)](modules/anchor-loop-array.md)\n- :anchor:\n[[**Exercises 4**] Tantangan Array 3 (Array Join, Split, Slice, Splice, Sort)](modules/anchor-mixed-array.md)\n\n## Rabu - Logic Challenges Refresh\n\nGunakan waktu sejenak untuk berkenalan dengan Node Js,\nsebuah platform yang memungkinkan kamu untuk menjalankan script JavaScript di server. Jadi, kamu bisa dengan mudah membuat kode JavaScript yang dapat berjalan di terminal kamu. Hari ini juga, kamu akan mencoba langsung mengimplementasi kodemu melalui node Js!\n\nMateri & Referensi :\n\n- :notebook_with_decorative_cover:\n[Mengenal Node JS](/modules/js-node.md)\n- :notebook_with_decorative_cover: [Membuat code JavaScript-mu dengan Baik ](modules/js-code-style.md)\n\nTugas :\n- :anchor:\n[[**Exercises 5 (Auto)**] Palindrome](/modules/challenge-palindrome.md)\n- :anchor:\n[[**Exercises 6 (Auto)**] Palindrome Angka](/modules/challenge-palindrome-angka.md)\n- :anchor:\n[[**Exercises 7 (Auto)**] Hitung Jumlah Kata](/modules/challenge-hitung-jumlah-kata.md)\n- :anchor:\n[[**Exercises 8 (Auto)**] Pasangan Angka Terbesar](/modules/challenge-pasangan-terbesar.md)\n\n## Kamis - More Logic Challenges\n\nHari baru, tantangan baru. Setelah belajar tentang array and solve berbagai problem dengan arrays, saatnya perbanyak latihan dengan soal yang terus melatih logika!\n\nTugas :\n\n- :anchor:\n[[**Exercises 9 (Auto)**] Cari Mean](/modules/challenge-cari-mean.md)\n- :anchor:\n[[**Exercises 10 (Auto)**] Perkalian Unik](/modules/challenge-perkalian-unik.md)\n- :anchor:\n[[**Exercises 11 (Auto)**] Deret Aritmatika](/modules/challenge-deret-aritmatika.md)\n- :anchor:\n[[**Exercises 12 (Auto)**] Deret Geometri](/modules/challenge-deret-geometri.md)\n\n## Jumat - More Arrays + Multidimensional Array\n\nKamu telah mencoba berbagai macam soal, menggunakan array maupun tidak. Tentunya di saat ini kamu telah bisa menilai cara mana yang lebih baik menggunakan array, dan yang tidak perlu, bukan?\n\nHari ini, kamu akan bermain dengan array dan bentuk selanjutnya, yaitu array multidimensi. Tenang saja, array multidimensi konsep nya sama persis dengan array satu dimensi!\n\n- :anchor:\n[[**Exercises 13 (Auto)**] Target Terdekat](/modules/challenge-target-terdekat.md)\n- :anchor:\n[[**Exercises 14**] Mengelompokkan Angka](modules/challenge-kelompok-angka.md)\n- :anchor:\n[[**Exercises 15**] Mengelompokkan Hewan](modules/challenge-kelompok-hewan.md)\n\nTugas :\n\n## Sabtu dan Minggu\n\n- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)\n- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)\n\nJika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.\n\nSalam,\n\nTim Hacktiv8\n\n\n"
},
{
"path": "README-WEEK-4.md",
"content": "# Hacktiv8 Phase 0 Week 4: Logics in JavaScript\n\n\n\nSelamat sudah melalui kegiatan pekan ketiga! Di pekan keempat ini, kita akan fokus untuk mengasah logika dan pemrograman kita dengan terus mengerjakan tantangan. Minggu ini mungkin akan sulit, karena sangat banyak tantangan dengan berbagai bentuk yang harus kamu selesaikan. Namun, dengan tetap semangat, maka kamu pasti bisa menyelesaikan seluruh tantangan ini!\n\n\n\n## Senin - Live Coding (Arrays, Looping, & Conditionals)\n\nTiba saatnya kita melakukan Live Coding yang bertujuan untuk menguji kemampuanmu sesuai dengan yang telah kamu pelajari dan kamu latih di pekan ini. Melalui live coding ini kami akan menilai pengertian kamu selama ini tentang JavaScript, dan tentunya kami akan memberikan feedback agar kamu bisa meningkatkan bagian mana yang masih kurang. Sesi live coding ini, tidak seperti tantangan-tantangan di hari-hari sebelumnya. **Kamu tidak bisa mengulang atau memperbaiki apa yang telah kamu kerjakan di sesi live coding.** Sesi live coding tidak dibuat untuk membuatmu gagal, namun untuk memastikan apakah kamu telah terlatih dengan soal-soal coderbyte sebelumnya. Gagal di sesi live coding tidak mutlak membuatmu gagal di Phase 0, namun akan mempengaruhi keputusan instruktur untuk bisa melanjutkanmu ke Phase 1.\n\n- :notebook_with_decorative_cover:\n[Materi Object Literal](/modules/js-object-literal.md)\n\n## Selasa - Numbers Crunching and Play with Strings\nHari baru, tantangan baru! terus tantang diri kamu untuk mengahadapi tantangan baru minggu ini dan percayalah semuanya akan terbalaskan pada waktunya :smile:\n\n- :anchor:\n[[**Exercises 1**] Angka Prima](/modules/challenge-angka-prima.md)\n- :anchor:\n[[**Exercises 2**] Faktor Persekutuan Terbesar](/modules/challenge-faktor-persekutuan-terbesar.md)\n- :anchor:\n[[**Exercises 3**] Cari Median](/modules/challenge-cari-median.md)\n- :anchor:\n[[**Exercises 4**] Cari Modus](/modules/challenge-cari-modus.md)\n- :anchor:\n[[**Exercises 5**] Ubah Huruf](/modules/challenge-ubah-huruf.md)\n\n## Rabu - Built-in Functions Mastery\nHari ketiga di pekan keempat. Keep up the good work! Banyak tantangan menunggu seminggu ke depan :cool:\n\n- :anchor:\n[[**Exercises 6**] Digit Perkalian Minimum](/modules/challenge-digit-perkalian-minimum.md)\n- :anchor:\n[[**Exercises 7**] Urutkan Abjad](/modules/challenge-urutkan-abjad.md)\n- :anchor:\n[[**Exercises 8**] Tukar Ukuran](/modules/challenge-tukar-besar-kecil.md)\n- :anchor:\n[[**Exercises 9**] Cek AB](/modules/challenge-cek-ab.md)\n\n## Kamis - Object Literal\nLanjutkan perjuanganmu di tengah banyaknya tantangan yang diberikan di pekan ke empat.\n- :anchor:\n[[**Exercises 10**] Change me](modules/challenge-object-literal.md)\n- :anchor:\n[[**Exercises 11**] Shopping Time!](modules/challenge-shopping-time.md)\n- :anchor:\n[[**Exercises 12**] Toko X](modules/challenge-toko-x.md)\n\n\n## Jumat - Mastered Array and Object\n- :anchor: [[**Exercises 13**] Deep Sum](modules/challenge-deep-sum.md)\n- :anchor: [[**Exercises 14**] Naik Angkot](modules/challenge-naik-angkot.md)\n- :anchor: [[**Exercises 15**] Highest Score](modules/challenge-highest-score.md)\n- :anchor: [[**Exercises 16**] Graduates](modules/challenge-graduates.md)\n\n## Sabtu dan Minggu\n\n- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)\n- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)\n\nSelamat berpetualang dengan logika lebih lanjut! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.\n\nSalam,\n\nTim Hacktiv8\n\n\n"
},
{
"path": "README-WEEK-5.md",
"content": "# Hacktiv8 Phase 0 Week 5: Recursive, Regex, and Object Oriented Programming in JavaScript\n\n\n\nSelamat sudah melalui kegiatan pekan kelima! Setelah tiga minggu penuh bermain dengan console dan logika, minggu ini kita akan berlatih tentang konsep Rekursif, Regex, serta tipe data Object di JavaScript.\n\n\n\n## Senin - Live Coding (Arrays, Looping, & Conditionals)\n\nTiba saatnya kita melakukan Live Coding yang bertujuan untuk menguji kemampuanmu sesuai dengan yang telah kamu pelajari dan kamu latih di pekan ini. Melalui live coding ini kami akan menilai pengertian kamu selama ini tentang JavaScript, dan tentunya kami akan memberikan feedback agar kamu bisa meningkatkan bagian mana yang masih kurang. Sesi live coding ini, tidak seperti tantangan-tantangan di hari-hari sebelumnya. **Kamu tidak bisa mengulang atau memperbaiki apa yang telah kamu kerjakan di sesi live coding.** Sesi live coding tidak dibuat untuk membuatmu gagal, namun untuk memastikan apakah kamu telah terlatih dengan soal-soal coderbyte sebelumnya. Gagal di sesi live coding tidak mutlak membuatmu gagal di Phase 0, namun akan mempengaruhi keputusan instruktur untuk bisa melanjutkanmu ke Phase 1.\n\n## Selasa - Modularizing Code using Functions & Recursive Functions\n- :notebook_with_decorative_cover:\n[Mengenal Rekursif](/modules/js-function-recursive.md)\n- :anchor: [[**Exercises 1**] Most Frequent Largest Numbers](modules/challenge-most-frequent-largest-numbers.md)\n- :anchor: [[**Exercises 2**] Password Generator](modules/challenge-password-generator.md)\n- :anchor: [[**Exercises 3**] Makan Terus Rekursif](/modules/challenge-makan-terus.md)\n- :anchor: [[**Exercises 4**] Total Digit Rekursif](/modules/challenge-total-digit.md)\n- :anchor: [[**Exercises 5**] Kali Terus Rekursif](/modules/challenge-kali-terus.md)\n\n\n## Rabu - Git Branch\n- :notebook_with_decorative_cover:\n[Cara Submit menggunakan Git Branch (Untuk Exercises Hari Rabu)](/modules/submitting-on-a-new-branch.md)\n- :anchor: [[**Exercises 6**] Damage Calculation](/modules/challenge-damage-calculation.md)\n- :anchor: [[**Exercises 7**] Melee Ranged Grouping](/modules/challenge-melee-ranged-grouping.md)\n\n\n## Kamis - Regex\n- :notebook_with_decorative_cover:\n[Mengenal Regular Expressions](/modules/regular-expressions.md)\n- :anchor:\n[[**Exercises 8**] Hapus Simbol](/modules/challenge-hapus-simbol.md)\n- :anchor:\n[[**Exercises 9**] Cari Pelaku](/modules/challenge-cari-pelaku.md)\n\n## Jumat - Simulasi Final Live Code\nLakukan yang terbaik, mulailah beradaptasi dengan suasana live code agar lebih tenang. Usahakan kerjakan dengan hasil sendiri, masih ada kesempatan untuk tanya jawab di minggu berikutnya\n\n## Sabtu dan Minggu\n\n- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)\n- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)\n\nSelamat berpetualang dengan istilah dan teknologi yang makin seru! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.\n\nSalam,\n\nTim Hacktiv8\n\n\n"
},
{
"path": "README-WEEK-6-deprecated.md",
"content": "# COMING SOON! Prepare For Live Code!\n\n"
},
{
"path": "README-WEEK-6.md",
"content": "# Hacktiv8 Phase 0 Week 6: Finals and JavaScript DOM\n\n\n\nSampailah di minggu terakhir phase 0! Senin - Rabu kamu akan fokus untuk final live coding, dan di kamis dan jumat kamu akan bermain dengan DOM dan membuat project web kamu yang paling seru!\n\n\n\n## Senin - Rabu: Final Live Coding (Offline).\nIni saat yang menentukan untuk bisa lanjut ke Phase 1. Persiapkan ilmu yang telah kamu pelajari di logic dan JavaScript! Note: Materi Week 1, dan 6 tidak diikutkan ke dalam kompetensi Final Live Coding. Berbeda dengan Live Coding sebelumnya, Final Live Coding ini wajib dilakukan Offline.\n\n## Rabu - Document Object Model (DOM)\nAkhirnya beberapa pekan tantangan yang penuh logika berakhir. Sekarang, kamu akan mempelajari mempelajari DOM, yang akan membuat website kamu menjadi interaktif dan menarik! Kamu akan ditantang dengan DOM di week 6 setelah final live coding, jadi silakan baca materi ini setelah kamu telah siap untuk mengambil final live coding di Senin pekan depan.\n\n- :notebook_with_decorative_cover:\n[Mengenal DOM](/modules/js-dom-intro.md)\n- :notebook_with_decorative_cover:\n[Membuat DOM](/modules/js-dom-creation.md)\n- :notebook_with_decorative_cover:\n[Menjelajah DOM](/modules/js-dom-transversing.md)\n\n## Kamis - Document Object Model\nMulai hari ini, kamu akan berkenalan dengan DOM, topik baru yang dapat kamu manfaatkan untuk berlatih memanipulasi halaman HTML dan tampilannya dengan JavaScript. (Yap, betul. Back to HTML!)\n\nMateri & Referensi :\n- :notebook_with_decorative_cover:\n[Mengenal DOM](/modules/js-dom-intro.md)\n- :notebook_with_decorative_cover:\n[Membuat DOM](/modules/js-dom-creation.md)\n- :notebook_with_decorative_cover:\n[Menjelajah DOM](/modules/js-dom-transversing.md)\n\nTugas :\n- 💪\n[[**Latihan Pribadi 1**] Memanipulasi Element HTML](modules/anchor-js-dom-manipulation.md)\n- 💪\n[[**Latihan Pribadi 2**] Memanipulasi dan Menjelajah DOM](modules/anchor-js-dom-transverse-manipulation.md)\n- 💪\n[[**Latihan Pribadi 3**] Membuat Validasi Form menggunakan JavaScript](modules/anchor-js-form-validation.md)\n- 💪\n[[**Latihan Pribadi 4**] Membuat Element HTML Dinamis Dengan JavaScript](modules/anchor-js-dom-creation.md)\n\n## Jumat - Final Project!\n\nTibalah di hari terakhir fase 0. Kamu akan ditantang untuk membuat final project web app apapun memanfaatkan topik DOM. Final Project ini paling lambat dikumpulkan di sabtu malam agar kamu punya waktu luang untuk berkreasi dan mempersiapkan diri ke fase 1. Final Project sebagai syarat untuk student yang telah memenuhi final live code dan nilai tugas agar bisa masuk ke fase 1.\n\n- :anchor:\n[[**Final Project**] Membuat Web App menggunakan HTML, CSS, dan JavaScript](modules/anchor-js-dom-web-app.md)\n\n\n## Sabtu dan Minggu\n\n- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)\n- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)\n\nSelamat berpetualang dengan istilah dan teknologi yang makin seru! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.\n\nSalam,\n\nTim Hacktiv8\n\n\n"
},
{
"path": "README.md",
"content": "# HACKTIV8 Phase 0 Activities\n\nPhase 0 adalah aktivitas yang mempersiapkan murid untuk mampu memahami dan masuk ke dalam Phase 1 Program\nFull-Stack JavaScript Development Course di HACKTIV8. Repositori ini digunakan sebagai acuan untuk pembelajaran dan bersifat wajib untuk dipelajari dan dikerjakan untuk berkesempatan melanjutkan ke dalam Phase 1.\n\nMateri di bagi ke dalam enam minggu, yang tiap minggu nya terdiri dari berbagai fokus materi. Kebanyakan dari\nmateri dan tantangan yang tertera pada repositori ini hanya dapat di akses oleh murid yang sedang aktif di dalam phase 0 batch program.\n\n### [Week 1: Membuat Website Pertama Saya](./README-WEEK-1.md)\n### [Week 2: Mengenal JavaScript](./README-WEEK-2.md)\n### [Week 3: Mendalami JavaScript](./README-WEEK-3.md)\n### [Week 4: Bermain Logic di JavaScript](./README-WEEK-4.md)\n### [Week 5: Bermain Logic di JavaScript](./README-WEEK-5.md)\n### [Week 6: Menguasai JavaScript ES6 dan Paradigma Programming](./README-WEEK-6.md)\n"
},
{
"path": "checklist.md",
"content": "Berikut adalah list challenges yang wajib diselesaikan karena akan diperhitungkan sebagai completion rate.\nList di bawah ini merupakan summary dari kegiatan week 2 - 4 yang bertanda :anchor:\nPedoman :\n- https://github.com/hacktiv8/phase-0-activities/blob/master/README-WEEK-2.md\n- https://github.com/hacktiv8/phase-0-activities/blob/master/README-WEEK-3.md\n- https://github.com/hacktiv8/phase-0-activities/blob/master/README-WEEK-4.md\n\n## Week 2 (13 poin)\n\n1. Membuat thinking.html / leaarning.html\n2. menyelesaikan https://www.codecademy.com/learn/javascript unit 1 dan 2\n3. Menyelesaikan codecademy https://www.codecademy.com/learn/javascript unit 3, 4, dan 5\n4. Membuat Konversi Waktu\n5. Membuat Order String\n6. Membuat function palindrome\n7. Membuat fungsi matematika dasar\n8. Membuat permainan suit lokal\n9. Menyelesaikan codecademy https://www.codecademy.com/learn/javascript unit 6, 7, dan 8\n10. Membuat function format huruf\n11. Membuat function separate number\n12. Membuat function format angka\n13. Membuat daftar kontak sederhana\n\n## Week 3 (16 poin)\n\n1. Challenge-Cek Bilangan Prima\n2. Challenge-Index Bilangan Prima\n3. Challenge-Jenis Bilangan\n4. Challenge-Bilangan Faktor\n5. Challenge-Faktor Prima\n6. Challenge-Palindrome 2\n7. Challenge-String Compression\n8. Challenge-Cek String\n9. Challenge-Remove Duplicate\n10. Membuat permainan tebak angka\n11. Challenge-Array 1\n12. Challenge-Repeated Letter\n13. Challenge-Pergeseran Huruf\n14. Challenge-Pola Angka\n15. Challenge-Cek Angka\n16. Challenge-Konversi Huruf dan Angka\n\n## Week 4 (6 poin)\n\n1. Challenge-Menu Restaurant\n2. Challenge-Recursive Range Angka\n3. Challenge-Promo Menu\n4. Challenge-Recursive is Even Number\n5. Challenge-Promo Credit Card\n6. Challenge-Recursive Angka Kuadrat\n"
},
{
"path": "modules/README-WEEK-5-old-dom.md",
"content": "## DEPRECATED.\n# Hacktiv8 Phase 0 Week 5: The World of DOM\n\n\n\nSelamat sudah melalui kegiatan pekan keempat! Dua hari pertama akan memantapkan logika kamu dalam JavaScript, dan setelah tiga minggu penuh bermain dengan console dan logika, minggu ini kita akan \"refreshing\" sejenak dan mempelajari DOM, yang akan membuat website kamu menjadi interaktif dan menarik!\n\n\n\n## Senin - DOM Introduction\nAkhirnya beberapa pekan tantangan yang penuh logika berakhir. Sekarang, kamu akan mencoba bermain dengan DOM dan pada akhirnya membuat aplikasi web yang interaktif dengan JavaScript. Anggap saja beberapa hari ini sebagai refreshing dari pekan lalu, dan hasil dari pekan ini pun akan menghasilkan aplikasi web yang menarik dan interaktif.\n\n- :notebook_with_decorative_cover: [Memahami Document Object Model](modules/js-dom-intro.md)\n- :anchor: [Seleksi dan Manipulasi DOM Sederhana](modules/anchor-js-dom-manipulation.md)\n\n- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)\n\n## Selasa - DOM Transversing\nSetelah mencoba menseleksi DOM, hari ini saatnya kita belajar bagaimana melakukan DOM transversing atau disebut juga penjelajahan DOM.\n\n- :notebook_with_decorative_cover: [Memahami DOM Transversing](modules/js-dom-transversing.md)\n- :anchor: [Penjelajahan dan Manipulasi DOM Sederhana](modules/anchor-js-dom-transverse-manipulation.md)\n\n- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)\n\n## Rabu - DOM Events\nTernyata bermain dan menjelajah DOM sangat menarik, walaupun hingga saat ini kita masih belum bisa membuat web yang interaktif. Hari ini mulai saatnya kita bisa menambah sisi interaktif dari web kita!\n\n- :notebook_with_decorative_cover: [Memahami DOM Events](modules/js-dom-events.md)\n- :anchor: [Validasi Form dengan JavaScript](modules/anchor-js-form-validation.md)\n\n- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)\n\n## Kamis - Menyusun Halaman HTML dengan JavaScript\nSebelumnya kita telah belajar menseleksi, menjelajah, dan membuat halaman kita interaktif. Tapi ternyata kita juga bisa menyusun HTML element sendiri dengan JavaScript lho! Saatnya kita menyusun web kita dengan JavaScript!\n\n- :notebook_with_decorative_cover: [Membuat DOM Secara Dinamis](modules/js-dom-creation.md)\n- :anchor: [Menyusun Layout HTML dengan JavaScript](modules/anchor-js-dom-creation.md)\n\n- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)\n\n## Jumat - Interactive App using JavaScript\nKamu telah mempelajari event dan manipulasi DOM dengan vanilla JavaScript. Sekarang saatnya kamu membuat sebuah website yang interaktif menggunakan pengetahuan yang telah kita dapatkan satu minggu kebelakang.\n\n- :notebook_with_decorative_cover: [Mengubah Style DOM Secara Dinamis](modules/js-dom-style.md)\n- :books: [Memberikan Animasi sederhana dengan CSS dan JS](modules/animation-using-css-and-js.md)\n- :anchor: [WEEKLY PROJECT - Web App / Game using DOM Manipulation](modules/anchor-js-dom-web-app.md)\n\n- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)\n\n## Sabtu dan Minggu\n\n- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)\n- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)\n\nSelamat berpetualang dengan istilah dan teknologi yang makin seru! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.\n\nSalam,\n\nTim Hacktiv8\n\n\n"
},
{
"path": "modules/algorithm-pseudocode.md",
"content": "# Learn Algorithm and Pseudocode\n\n## Objectives\n\n- ▢ Memahami struktur alur program dengan algoritma dan pseudocode\n\n## Learnings\n\n### Mengenal Algoritma\n\nBelajar pemrograman tentu saja memerlukan banyak berpikir secara logika, sehingga kita bisa memecahkan masalah atau melakukan kegiatan yang kita targetkan. Agar kita bisa menjelaskan alur logika kita, perlu digunakan algoritma.\n\nNamun apa itu algoritma? Mari kita ilustrasikan terlebih dahulu.\n\nBagaimana cara kamu menggunakan komputer sehari-hari? Mulai dari menekan tombol on/off, menunggu proses booting, memasukkan password, membuka aplikasi yang dibutuhkan, kemudian bekerja sesuai aplikasi tersebut. Atau lain lagi, bagaimana cara menggunakan smartphone? Cukup unlock dari posisi standby, lalu pilih dan buka aplikasi yang dibutuhkan, dan seterusnya.\n\nNah itulah algoritma, kumpulan proses ataupun aturan untuk melakukan atau menyelesaikan sesuatu. Sesuatu ini biasanya berupa masalah atau kegiatan yang langkah-langkahnya pasti terbatas (tidak terus-menerus).\n\nDalam menggunakan bahasa pemrograman, kita bisa menggunakan atau bahkan tidak perlu menggunakan algoritma. Tapi hampir 99% pastinya perlu algoritma. Misalnya saja kita sudah tahu algoritma dasar dari perulangan dan perkondisian.\n\nAlgoritma bisa sesederhana kita jabarkan langkah-langkahnya seperti tadi, atau kita visualisasikan dalam bentuk flowchart seperti berikut.\n\n\n\n- ▢ Tonton video ini jika perlu: [What is an algorithm and why should you care? - Intro to algorithms on Khan Academy](https://www.khanacademy.org/computing/computer-science/algorithms/intro-to-algorithms/v/what-are-algorithms)\n\n### Basic Simbol / Notasi Flowchart\n\nFlowchart merupakan diagram yang menggambarkan algoritma, atau proses-proses, yang digunakan untuk memecahkan suatu masalah. Intinya, flowchart bisa dipakai sebelum menulis kode karena syntax lebih mudah digambar. Syntax basic flowchart seperti berikut:\n\n##### Start/End\n\n\n\n##### Input/Output\n\n![Parallelogram](assets/Input_Output.png \"Input/Output\")\n\n##### Process\n\n![Rectangle](assets/Process.png \"Process\")\n\n##### Conditional (IF)\n\n![Diamond](assets/Conditional.png \"Conditional\")\n\nBanyak tools software yang dapat kamu gunakan untuk menggambar flowchart. salah satunya tools online editor [draw.io](https://www.draw.io/)\n\nBagi kalian yang nanti akan membuat sebuah sistem yang complex, menggambar flowchart bisa jadi hal pertama yang kalian lakukan sebelum coding. Kenapa ?\n\nKarena untuk membuat sebuah sistem yang kompleks kalian harus punya gambaran yang jelas dari proses atau prosedur dari awal hingga akhir sistem yang kalian buat. Kalau tidak ada flowchart kadang di tengah pengerjaan project kita lupa alur dari sistem yang kita buat. Tentu hal ini akan mempengaruhi codingan kalian.\n\n\n### Mengenal Pseudocode\n\nAtau agar lebih rapi, kita gunakan pseudocode. Psedudocode adalah konvensi terstruktur atau cara menyajikan penjelasan algoritma dengan bahasa yang deskriptif seperti kita menulis kalimat biasa sehingga mudah kita baca. Umumnya digunakan bahasa Inggris atau bahasa perantara yang mirip bahasa pemrograman. Lihatlah contoh algoritma penambahan angka sederhana dengan pseudocode berikut.\n\n**Bahasa Inggris**\n\n```\nREAD and SAVE \"first number\"\nREAD and SAVE \"second number\"\nCOMPUTE \"first number\" added by \"second number\"\nSAVE previous computation result\nSHOW the computation result\n```\n\nBahasa inggris diatas nantinya akan diubah menjadi bahasa pemrograman yang kita mau. Dibawah ini adalah contoh hasil konversi pseudocode diatas menjadi kode di bahasa lain. Saat ini kamu hanya cukup melihat hasil konversinya sekilas saja, tidak harus dipelajari, karena kita akan fokus pada pseudocode terlebih dahulu.\n\n**JavaScript**\n\n```\nvar a,b,c;\na = prompt(\"First Number?\");\nb = prompt(\"Second Number?\");\nc = Number(a) + Number(b);\nconsole.log(c);\nalert(\"Result = \" + c);\n```\n\nDengan begini, kita bisa menjelaskan proses atau alur logika tanpa bahasa pemrograman tertentu. Sehingga juga logika yang sama bisa ditransfer atau diterapkan ke bahasa pemrograman lain. Misalnya...\n\n**Python**\n\n```\na = input(\"First Number? \")\nb = input(\"Second Number? \")\nc = int(a) + int(b)\nprint(\"Result\", c)\n```\n\n**Ruby**\n\n```\nputs \"First Number?\"\na = gets.chomp\nputs \"Second Number?\"\nb = gets.chomp\nc = a.to_i + b.to_i\nputs c\n```\n\n### Lebih dalam tentang Pseudocode\n\nBerikut adalah contoh yang perlu kamu tahu saat membuat pseudocode. **Jangan Terpaku 100% dengan contoh, karena dalam pseudocode tidak terpaku pada penggunakan kata tertentu. Selama pseudocode dapat dimengerti sesama pembaca, maka sudah cukup bisa digunakan.** Kita bisa menggunakan huruf kapital untuk keyword yang ditekankan dari sebuah step. Misal: CALCULATE 5 plus 2, atau DISPLAY \"hello\".\n\n#### Storing Values\n\nBiasanya, pada saat kita belajar matematika atau fisika, kita akan bertemu dengan rumus. Paling sederhana adalah rumus luas persegi, yaitu width dikalikan height.\n\nKita sebagai manusia dengan natural dapat langsung mengkalkulasi nilai panjang dan lebar untuk mendapatkan luas. Tapi, komputer tidak semudah itu. Komputer harus menyimpan nilai panjang dan nilai lebar di dalam memori. Memori komputer, bayangkan saja seperti otak kita yang bisa menyimpan berbagai informasi. Sebetulnya, saat kita menghitung panjang dan lebar secara tidak sadar kita pun menampung nilai tersebut di kepala kita.\n\nContoh Pseudocode\n\n```\nSTORE \"width\" with any value\nSTORE \"height\" with any value\nSTORE \"area\" without any value\n\nCALCULATE \"width\" times \"height\"\nSET \"area\" value with calculation result\n\nDISPLAY \"area\"\n```\n\nBisa dilihat dari pseudocode diatas, ada beberapa step yang kita jalankan. Mari kita bahas tiap step ke bahasa yang lebih \"manusiawi\" :)\n\n1. Simpan \"width\" dengan nilai berapapun\n2. Simpan \"height\" dengan nilai berapapun\n3. Simpan \"area\" tanpa diberikan nilai. Ini akan kita isi nanti.\n4. Hitung hasil perkalian \"width\" dengan \"height\"\n5. Setelah mendapatkan hasil perhitungan, isikan hasilnya ke dalam \"area\"\n6. Tampilkan nilai dari \"area\"\n\n#### Conditional\n\nSaat komputer menjalankan program, seringkali komputer harus melakukan sebuah tindakan jika suatu kondisi terpenuhi. Mudahnya, di kehidupan sehari-hari misalnya, jika kita lapar, kita akan makan. \"Jika kita lapar\" adalah sebuah kondisi, dan \"kita akan makan\" adalah step yang hanya akan dijalankan apabila kondisi tersebut terpenuhi.\n\nContoh Pseudocode\n\n```\nIF \"hungry\"\n DO \"eat\"\nDISPLAY \"i am happy\"\n```\n\nJika kita lihat pseudocode diatas, bisa dijabarkan sebagai step berikut\n\n1. Jika lapar, maka masuk ke step 2. Jika tidak, abaikan step 2 dan langsung ke step 3.\n2. lakukan proses \"eat\"\n3. Tampilkan \"i am happy\"\n\nYang terjadi disini ada dua kemungkinan. Jika lapar, step 2 akan diabaikan. Kita bisa lihat dari pseudocode dimana \"eat\" kita buat menjorok ke dalam (ingat dengan identasi di HTML? ya betul! :D) untuk menunjukkan semua proses yang menjorok ke dalam setelah sebuah kondisi merupakan proses yang dijalankan hanya jika kondisi terpenuhi.\n\nTidak hanya sampai disana, kondisional bisa juga melakukan proses yang hanya dijalankan jika kondisi tidak terpenuhi. Misal, saat nilai ujian dibawah 70, saya harus berlajar lebih giat. Tapi jika tidak, maka saya layak memberi reward untuk diri sendiri.\n\nContoh Pseudocode\n\n```\nSTORE \"score\" to any number\n\nIF \"score\" < 70\n DO \"learn more\"\nELSE\n DO \"reward myself\"\nDO \"continue with life...\"\n```\n\nNah disini terjadi yang biasa dinamakan percabangan. Jika score dibawah 70, maka kita akan \"learn more\", dan jika tidak, maka kita harus \"reward myself\".\n\nNamun apapun kondisinya, kita pasti akan masuk ke step \"continue with life...\"\n\nPseudocode diatas bisa digambarkan ke step berikut:\n\n1. Jika \"score\" dibawah 70, masuk ke step 2a. Jika tidak, masuk ke step 2b.\n2a. Lakukan \"learn more\"\n2b. Lakukan \"reward myself\"\n3. Lakukan \"continue with life...\"\n\nSaat program berjalan, berarti hanya ada dua kemungkinan. Antara menjalankan step 1 -> 2a -> 3, atau step 1 -> 2b -> 3.\n\n#### Looping\n\nNah sekarang kita akan masuk ke bagian terakhir yang dibutuhkan hari ini dan sekaligus yang sedikit lebih sulit dibandingkan bagian sebelumnya, yaitu perulangan.\n\nKomputer seringkali dibutuhkan untuk melakukan sebuah proses yang sama berulang-ulang. Hal ini sering disebut sebagai **looping**. Tentunya, saat komputer melakukan looping, pasti ada kalanya proses tersebut akan berhenti. Sama hal nya saat kita sebagai manusia melakukan berbagai hal yang berulang, pasti ada kalanya kegiatan itu kita hentikan. Nah, looping sebetulnya melibatkan yang sudah kita pelajari sebelumnya, yaitu conditional. Looping akan terus dilakukan sampai sebuah kondisi terpenuhi. Contoh mudahnya adalah, kita akan makan hingga kenyang bukan?\n\nContoh Pseucodode\n\n```\nWHILE \"hungry\"\n DO \"eat\"\n```\n\nNah, pseudocode di atas cukup simple dan mencontohkan kita proses paling sederhana dalam looping. WHILE adalah standard keyword untuk menunjukkan kondisi \"selama kita masih lapar\", lakukan proses makan.\n\nBiasanya, saat kita membuat looping, ada sebuah proses yang dilakukan untuk mencapai kondisi tersebut. Kita coba perbaiki contoh pseudocode diatas, dengan asumsi kemampuan makan kita dalam sekali makan adalah 5 sendok nasi. Kita coba umpakan kemampuan makan ini sebagai \"hungry level\".\n\n```\nSTORE \"full level\" with 0\n\nWHILE \"full level\" < 5\n ADD \"full level\" by 1\n\nDISPLAY \"I'm full!\"\n```\n\nNah, looping kali ini sudah lebih mendekati coding sebenarnya. Saat terjadi looping, harus ada proses apapun yang akan membuat kondisi perulangan lambat laun akan terpenuhi. Pseudocode di atas menggambarkan kita mulai dari level kenyang kita dari 0, berarti kita saat ini sangat lapar. Setiap kali kita melakukan proses makan, tingkat kenyang kita akan bertambah 1. Karena kita hanya kuat makan hingga 5 kali, maka kondisinya adalah \"full level\" < 5.\n\nKita coba ilustrasikan step pseudocode diatas:\n\n1. Simpan nilai \"full level\" dengan angka 0\n2. Ulangi step 3 selama \"full level\" masih dibawah 5. Jika \"full level\" sudah 5, lanjut ke step 4.\n3. Tambah \"full level\" dengan 1, agar semakin mendekati batas perulangan. Kembali ke step 2.\n4. Tampilkan \"I'm full\", berarti saya sudah sangat kenyang!\n\nTernyata, setelah dijabarkan, looping tidak begitu sulit, bukan? Nah, sebuah komputer tentu saja dapat memiliki program yang sangat memungkinkan menggabungkan penyimpanan nilai, kondisi, dan perulangan dengan sekaligus. Disini, kita sebagai calon programmer diwajibkan untuk mampu menggabungkan berbagai konsep ke dalam satu kesatuan.\n\nKita akan coba membuat pseudocode yang menggunakan looping dan conditional sekaligus, berangkat dari kasus berikut:\n\nSeorang anak SD sedang belajar angka genap dan ganjil. Dia ditugaskan oleh ibu guru untuk menghitung angka dari 1 sampai 10 dengan menyebut angka tersebut dan untuk setiap angka ganjil, ia harus menyebut \"ODD!\" dan sebaliknya jika genap, ia harus menyebut \"EVEN!\".\n\nTunggu! Angka disebut genap jika habis dibagi dua. Tapi bagaimana saya menyebutnya di pseudocode? Mudah, caranya adalah menggunakan yang namanya mod, atau kepanjangannya modulo. Modulo, adalah sebuah proses matematika untuk mendapatkan remainder atau sisa bagi dari sebuah proses pembagian. Misal, angka 3 jika dibagi 2 sisanya adalah 1. Nah berarti kita bisa menyebutkan proses ini sebagai 3 mod 2.\n\nContoh Pseudocode\n```\nSTORE \"count\" to 1\n\nWHILE \"count\" < 11\n DISPLAY \"count\"\n CALCULATE \"count\" mod 2\n STORE \"remainder\" to the result of calculation\n IF \"remainder\" equals to 0\n DISPLAY \"EVEN!\"\n ELSE\n DISPLAY \"ODD!\"\n```\n\n### References\n\n- [What is a computer algorithm? on HowStuffWorks](http://computer.howstuffworks.com/question717.htm)\n- [Algorithm, on Wikipedia](https://en.wikipedia.org/wiki/Algorithm)\n- [Algorithms Course on Khan Academy](https://www.khanacademy.org/computing/computer-science/algorithms)\n- [Sorting Algorithm Animations](http://sorting-algorithms.com)\n- [VisuAlgo: Visualising data structures and algorithms through animation](http://visualgo.net)\n- [Notes on Algorithms, Pseudocode, and Flowcharts - Dr. Burford J. Furman](http://www.engr.sjsu.edu/bjfurman/courses/ME30/ME30pdf/Notes_on_Algorithms.pdf)\n- [Pseudocode Standard - Dr. John Dalbey](http://users.csc.calpoly.edu/~jdalbey/SWE/pdl_std.html)\n"
},
{
"path": "modules/anchor-akses-array.md",
"content": "# Mengakses Nilai Dalam Array\n\nTahukah kamu jika *string* adalah sebuah *array*? Kamu dapat mengakses karakter-karakter pada sebuah string layaknya mengakses nilai pada sebuah array. Untuk membuktikannya, kerjakanlah tantangan ini!\n\n## Objectives\n\n- Mengetahui *properties* Pada Array\n- Mengerti Cara Mengakses Nilai Dalam Array\n\n## Directions\n\nBuatlah sebuah fungsi dengan nama **balikString**. Fungsi ini akan menerima argumen sebuah string dan mengembalikan kebalikannya. \n\n### Example\n\n```javascript\n//input \"hello world!\"\n//output\n\"!dlrow olleh\"\n```\n\n### Hints\nUntuk membantumu mengerjakan tantangan ini, gunakanlah properti `length` pada sebuah array yang akan memberikan panjang dari array-nya. Ingat, indeks sebuah array pada JavaScript dimulai dari 0. **Untuk tugas ini, kamu wajib menggunakan looping dan dilarang menggunakan sintaks .reverse!**\n"
},
{
"path": "modules/anchor-basic-function.md",
"content": "# Mengenal Penggunaan Function\n\n## Objectives\n\n- Mampu memahami serta mengimplementasi penggunaan function pada JavaScript\n\n## Directions\n\n1. Lanjutkan kode berikut ini hingga dapat menampilkan nilai / output yang diminta!\n\n### Tugas 1\n\nBuatlah sebuah fungsi bernama shoutOut(), yang mengembalikan nilai berupa \"Halo Function!\", yang kemudian\nakan ditampilkan di console.\n\n```JavaScript\n/*\n BUATLAH KODE FUNCTION DISINI\n*/\n\nconsole.log(shoutOut()) // Menampilkan \"Halo Function!\" di console\n```\n\n### Tugas 2\n\nBuatlah sebuah fungsi bernama calculateMultiply(), yang mengembalikan nilai berupa hasil kali dari dua parameter yang dikirim.\n\n```JavaScript\n/*\n BUATLAH KODE FUNCTION DISINI\n*/\n\nvar num1 = 5;\nvar num2 = 6;\n\nvar hasilPerkalian = calculateMultiply(num1,num2);\nconsole.log(hasilPerkalian); // Menampilkan angka 30\n```\n\n### Tugas 3\n\nBuatlah sebuah fungsi bernama processSentence(), yang akan memproses seluruh parameter yang diinput menjadi satu kalimat berikut: \"Nama saya [Name], umur saya [Age] tahun, alamat saya di [Address], dan saya punya hobby yaitu [hobby]!\"\n\n```JavaScript\n/*\n BUATLAH KODE FUNCTION DISINI\n*/\n\nvar name = \"Agus\";\nvar age = 30;\nvar address = \"Jln. Malioboro, Yogjakarta\";\nvar hobby = \"gaming\";\n\nvar fullSentence = processSentence(name,age,address,hobby);\nconsole.log(fullSentence); // Menampilkan \"Nama saya Agus, umur saya 30 tahun, alamat saya di Jln. Malioboro, Yogjakarta, dan saya punya hobby yaitu gaming!\"\n```\n"
},
{
"path": "modules/anchor-before-recursive.md",
"content": "# Pemanasan Sebelum Tantangan Recursive\n\nTantangan ini berguna untuk mempersiapkan kamu mengerjakan tantangan rekursi. Pastikan solusimu benar agar dapat mengerjakan tantangan [selanjutnya](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/anchor-recursive.md) dengan baik.\n\n# Directions\n\n- Buatlah 2 buah function berbeda. Beri nama function sesuai dengan keinginanmu. Gunakan *looping* untuk menyelesaikan tugas ini.\n\n- Function pertama menerima 1 parameter berupa angka. Sedangkan function kedua menerima 2 parameter yang keduanya juga angka.\n\n- Tugas function pertama adalah untuk menghitung deret perkalian sederhana, dimana parameternya menentukan nilai pertama dari deret. Nilai akhir dari deret adalah angka terkecil **N**, dimana **N** > 0. Function akan mengembalikan total deret tersebut.\n\n> **cara kerja fungsi pertama**\n> parameter = 5\n> keluaran = 5 * 4 * 3 * 2 * 1 = 120\n\n- Tugas function kedua hampir sama dengan function pertama. Yang membedakannya adalah parameter kedua menentukan beda antar angka dalam deret.\n\n> **cara kerja fungsi kedua**\n> parameter1 = 12, parameter2 = 5\n> keluaran = 12 * 7 * 2 = 168\n"
},
{
"path": "modules/anchor-belajar-for.md",
"content": "# Melakukan *Looping* Menggunakan `For`\n\n## Objectives\n\n* Mengerti Cara Melakukan *Looping* Menggunakan `For`\n* Mengetahui Operator *Increment* dan *Decrement*\n\n## Directions\n\nPada tugas ini kamu diminta untuk melakukan *looping* dalam JavaScript dengan menggunakan *syntax* `for`. Untuk membuat tantangan ini lebih menarik, kamu juga diminta untuk membuat suatu *looping* yang menghitung maju dan menghitung mundur. Jangan lupa tampilkan di console juga judul 'LOOPING PERTAMA' dan 'LOOPING KEDUA'.\n\n## Hints \n\n> Operator `++` disebut dengan operator *Increment*\n> Operator `--` disebut dengan operator *Decrement*\n\n## Output\n\n```\nLOOPING PERTAMA\n1 - I love coding\n2 - I love coding\n3 - I love coding\n4 - I love coding\n5 - I love coding \n6 - I love coding\n7 - I love coding\n8 - I love coding\n9 - I love coding\n10 - I love coding\n11 - I love coding\n12 - I love coding \n13 - I love coding\n14 - I love coding\n15 - I love coding\n16 - I love coding\n17 - I love coding\n18 - I love coding\n19 - I love coding\n20 - I love coding\nLOOPING KEDUA\n20 - I will become fullstack developer\n19 - I will become fullstack developer\n18 - I will become fullstack developer\n17 - I will become fullstack developer\n16 - I will become fullstack developer\n15 - I will become fullstack developer\n14 - I will become fullstack developer\n13 - I will become fullstack developer\n12 - I will become fullstack developer\n11 - I will become fullstack developer\n10 - I will become fullstack developer\n9 - I will become fullstack developer\n8 - I will become fullstack developer\n7 - I will become fullstack developer\n6 - I will become fullstack developer\n5 - I will become fullstack developer\n4 - I will become fullstack developer\n3 - I will become fullstack developer\n2 - I will become fullstack developer\n1 - I will become fullstack developer\n```\n"
},
{
"path": "modules/anchor-belajar-operator-mtk.md",
"content": "# 2. Belajar Menggunakan Operator Matematika\n\n## Objectives\n\n* Mengerti Cara Penggunaan Operator Matematika\n* Mengerti Kegunaan Tiap-tiap Operator\n* Mengetahui Kegunaan Operator `+` selain untuk menghitung\n \n## Directions\n\nGunakan kembali kode yang sudah kamu buat [sebelumnya](./belajar-variabel.js) untuk mengerjakan tugas ini (kecuali bagian dengan `console.log()`). Pada tugas ini kamu diajak untuk mengimplementasikan operator matematika. Dibawah ini sudah diberikan potongan *source code* yang perlu kamu lengkapi. Lakukan deklarasi variabel dan operasi matematis sedemikian sehingga keluaran program-mu sama seperti **output** yang diinginkan.\n\n```javascript\n// deklarasikan variabel dan lakukan operasi mulai dari sini\n\n// kode dibawah tidak boleh diubah\nconsole.log(total);\nconsole.log(substract);\nconsole.log(multiply);\nconsole.log(division);\nconsole.log(modulus);\nconsole.log(words);\nconsole.log(wordnumber);\nconsole.log(numberword)\n```\n\n### Hints\n\n> * Deklarasikan variabel dengan lengkapi\n\n### Output\n\n> 39\n> 27\n> 198\n> 5.5\n> 3\n> \"foobar\"\n> \"foo33\"\n> \"6bar\"\n"
},
{
"path": "modules/anchor-belajar-variabel.md",
"content": "# 1. Belajar Tentang Variabel pada JavaScript\n\n## Objectives\n\n* Mengerti cara *assignment* pada variabel\n* Mengerti cara memanggil data dengan variabel\n\n## Directions\n\nTerdapat beberapa data dibawah ini yaitu:\n\n* 33 \n* 6\n* 'foo'\n* 'bar'\n* true\n* false\n\nDan juga terdapat beberapa nama variabel yang boleh kamu buat antara lain:\n\n* number1\n* number2\n* string1\n* string2\n* boolean1\n* boolean2\n\ntugas kamu adalah melakukan *assignment* pada variabel-variabel yang tersedia dengan data yang ada dan menuliskannya menggunakan `console.log()`.\n\n### Hint\n\n* JavaScript memang tidak memiliki tipe data secara eksplisit, namun solusi yang benar dari tugas ini adalah menempatkan data pada variabel dengan nama yang sesuai.\n* Deklarasikan variabel dengan lengkap\n* Keluarkan output dengan memanggil variabel, bukan data\n* Gunakan sebuah `console.log()` untuk masing-masing variabel.\n\n### Output\n\n```javascript\n33\n6\n\"foo\"\n\"bar\"\ntrue\nfalse\n```\n\n"
},
{
"path": "modules/anchor-belajar-while.md",
"content": "# Melakukan *Looping* Menggunakan `While`\n\n## Objectives\n\n* Mengerti Cara Melakukan *Looping* Menggunakan `While`\n\n## Directions\n\nPada tugas ini kamu diminta untuk melakukan looping dalam JavaScript dengan menggunakan syntax while. Untuk membuat tantangan ini lebih menarik, kamu juga diminta untuk membuat suatu looping yang menghitung maju dan menghitung mundur. Jangan lupa tampilkan di console juga judul 'LOOPING PERTAMA' dan 'LOOPING KEDUA'.\n\n## Output\n\n```\nLOOPING PERTAMA\n2 - I love coding\n4 - I love coding\n6 - I love coding\n8 - I love coding\n10 - I love coding\n12 - I love coding\n14 - I love coding\n16 - I love coding\n18 - I love coding\n20 - I love coding\nLOOPING KEDUA\n20 - I will become fullstack developer\n18 - I will become fullstack developer \n16 - I will become fullstack developer\n14 - I will become fullstack developer\n12 - I will become fullstack developer\n10 - I will become fullstack developer\n8 - I will become fullstack developer\n6 - I will become fullstack developer\n4 - I will become fullstack developer\n2 - I will become fullstack developer\n```\n"
},
{
"path": "modules/anchor-case-to-pseudocode.md",
"content": "# Mengubah Kasus Menjadi Pseudocode\n\n## Objectives\n\n- Mampu menganalisa kasus dan mengubahnya dalam bentuk pseudocode\n\n## Directions\n\n1. Ubah semua kasus di bawah ke dalam bentuk pseudocode\n\n### Tugas 1\n\nBuatlah sebuah pseudocode yang mengambil dua angka, dan menghitung serta menampilkan hasil perkalian dari kedua bilangan tersebut.\n\nhint: Gunakan kata kunci `SIMPAN`, `HITUNG`, dan `TULISKAN`.\n\n### Tugas 2\n\nBuatlah sebuah pseudocode yang mengambil sebuah kata, dan jika kata yang diambil bertuliskan \"Saya Belajar JavaScript!\", tampilkan \"Pasti Bisa!\".\n\nhint: Gunakan kata kunci `SIMPAN`, `IF`, dan `TULISKAN`.\n\n### Tugas 3\n\nBuatlah sebuah pseudocode yang mengambil sebuah angka. Tampilkan sebuah deret angka yang habis dibagi 3 dan dimulai dari angka 1. Deret angka akan berhenti sampai deret angka tersebut mencapai angka yang disimpan sebelumnya.\n\nhint: Gunakan kata kunci `SIMPAN`, `ULANGI`, dan `TAMPILKAN`.\n"
},
{
"path": "modules/anchor-css-layouting.md",
"content": "# Menghias Laman HTML dengan CSS Layouting\n\n## Objectives\n\nDengan menggunakan CSS kamu dapat membuat layout serta menghias halaman HTML yang sebelumnya sudah dibuat menjadi lebih bagus. Kali ini kamu ditantang untuk membuat layout web blog sederhana!\n\n## Directions\n\n### 1. Membuat File HTML\n\nBuatlah sebuah file HTML bernama *index.html* di sebuah folder bernama *project-css-layouting*.\nGunakan kode yang sudah disiapkan berikut:\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n
\n Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.\n
\n Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.\n
\n Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.\n
\n Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.\n
\n Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.\n
\n \n
\n \n \n \n\n```\n\n### 2. Membuat File CSS\n\nBuatlah sebuah file CSS bernama *style.css* pada folder yang sama dengan file *index.html* yang telah di hubungkan pada file html tersebut.\n\n> ``\n\n### 3. Menyiapkan Aset Gambar\n\nBuatlah sebuah folder di project tersebut dengan nama *img*, dimana kita akan meletakkan aset gambar kita disana. Aset gambar bisa kamu save as dari gambar di bawah ini:\n\n\n\n\n### 4. Membuat Layout dan Desain\n\nSesuaikan kode html yang telah terhubung dengan css di atas, buatlah halaman HTML menjadi lebih bagus dan sesuai dengan tampilan di bawah ini!\n\n\n\n### 5. Pengumpulan\n\nUpload tugas project dalam bentuk zip dari folder *project-css-styling*! **Perhatian** Hanya gunakan zip, jangan upload file isi nya satu per satu ataupun dengan rar, 7z, ataupun kompresi lainnya.\n\n> **Syntax Penting**\n> - color\n> - font-size\n> - font-family\n> - background\n> - font-weight\n> - text-align\n> - text-decoration\n> - position\n> - cursor\n"
},
{
"path": "modules/anchor-css-selector-and-styling.md",
"content": "# Menghias Laman HTML dengan CSS\n\n## Objectives\n\nDengan menggunakan CSS kamu dapat menghias halaman HTML. Pada latihan kali ini, kamu telah diberikan file CSS. Kamu diminta untuk membuat id atau class yang menjadi selector yang tepat di HTML!\n\n## Directions\n\n### 1. Membuat File HTML\n\nBuatlah sebuah file HTML bernama *index.html* di sebuah folder bernama *project-css-styling*.\nGunakan kode yang sudah disiapkan berikut:\n\n```html\n\n \n \n \n \n \n
\n
1. Selector dan Styling Sederhana
\n
Saya adalah Box Berwarna Maroon
\n
Saya adalah Box Berwarna Dark Blue
\n
Saya adalah Box Berwarna Salem
\n
\n
\n
2. Selector Lebih Dari Satu
\n
Saya adalah Box Red berukuran 100
\n
Saya juga Box Red tapi ukurannya 200
\n
Saya adalah Box Blue berukuran 200
\n
Saya juga berukuran 200 tapi warnanya Green
\n
\n
\n
3. Selector Melalui Parent
\n
\n
Desain saya diatur oleh Parent Saya
\n
Desain saya diatur oleh Parent Saya
\n
Desain saya diatur oleh Parent Saya, tapi saya punya warna khusus, yaitu Gold!
\n
\n
\n \n\n```\n\n### 2. Membuat File CSS\n\nBuatlah sebuah file CSS bernama *style.css* pada folder yang sama dengan file *index.html* yang telah di hubungkan pada file html tersebut.\n\n> ``\n\nKamu **wajib** menggunakan kode CSS dibawah ini dan tidak mengubah apapun:\n\n```css\n/* Style Default */\nbody {\n font-family: 'Slabo 27px', serif;\n}\n\nh1 {\n border-bottom: 1px solid rgba(0, 0, 0, .1);\n padding-bottom: 10px;\n}\n\n.separator {\n width: 100%;\n height: auto;\n overflow: hidden;\n}\n\n/* Style Untuk Soal 1, 2, dan 3. Gunakan Dengan Sesuai! */\n\n.box-100 {\n width: 100px;\n height: 100px;\n float: left;\n margin: 20px;\n padding: 20px;\n font-size: 15pt;\n text-align: center;\n}\n\n.box-200 {\n width: 200px;\n height: 200px;\n float: left;\n margin: 20px;\n padding: 20px;\n font-size: 15pt;\n text-align: center;\n}\n\n#maroon-box {\n color: #FFFFFF;\n background: #96281B;\n}\n\n#dark-blue-box {\n color: #FFFFFF;\n background: #4B77BE;\n}\n\n#salem-box {\n color: #FFFFFF;\n background: #1E824C;\n}\n\n.red-background {\n color: #FFFFFF;\n background: #C0392B;\n}\n\n.blue-background {\n color: #FFFFFF;\n background: #446CB3;\n}\n\n.green-background {\n color: #FFFFFF;\n background: #26A65B;\n}\n\n.box-list div {\n width: 200px;\n height: 200px;\n float: left;\n margin: 20px;\n padding: 20px;\n font-size: 15pt;\n text-align: center;\n background: #353535;\n color: #FFFFFF;\n}\n\n#gold-box {\n border-radius: 20px;\n color: #353535;\n background: #F9BF3B;\n}\n```\n\n### 3. Menambahkan Class dan Id yang sesuai di HTML!\n\nCSS telah siap digunakan. Sekarang kamu harus menambahkan `class` atau `id` pada HTML element untuk memberikan desain kepada halaman HTML kita. Hasil akhir dari HTML yang dibuat harus tampil seperti berikut:\n\n\n\n\n> **Syntax Penting**\n> - class\n> - id\n"
},
{
"path": "modules/anchor-es5-to-es6.md",
"content": "# Mengubah ES5 menjadi ES6\n\n## Objectives\n\n- Mampu memanfaatkan ES6\n- Mampu mengkonversi kode ES5 ke ES6\n\n## Directions\n\n1. Ubah semua kode JavaScript dibawah ini ke dalam ES5. (setiap kode satu file JavaScript)\n\n### Tugas 1\n\nUbahlah seluruh `var` pada kode JavaScript dibawah ini menjadi `let` atau `const`!\n\n```javascript\nvar phi = 3.14;\nvar power = 2;\nvar radius = 0;\nvar calculateArea = function (radius) {\n return phi * Math.pow(radius, power);\n}\n\nradius = 21;\nvar area21 = calculateArea(radius);\n\nradius = 7;\nvar area7 = calculateArea(radius);\n\nconsole.log('area with 21 radius: ' + area21 + ', and area with 7 radius: ' + area7);\n```\n\n### Tugas 2\n\nUbahlah anonymous functions dibawah ini menjadi ES6 Arrow Function!\n\n```javascript\n const multiply = function (num1, num2) {\n return num1 * num2;\n }\n\n const divide = function (num1, num2) {\n return num1 / num2;\n }\n\n const doubleMe = function (num) {\n return num * 2;\n }\n\n console.log(multiply(5,2));\n console.log(divide(10,2));\n```\n"
},
{
"path": "modules/anchor-es6-functional.md",
"content": "# Memanfaatkan Map, Filter, dan Reduce\n\n## Objectives\n\n- Mampu memanfaatkan Map, Filter, dan Reduce\n\n## Directions\n\n1. Selesaikan beberapa kasus dibawah ini menggunakan sintaks yang diminta!\n\n### Tugas 1\n\nBuatlah sebuah code yang mentransformasi array menggunakan `map`!\n\n```javascript\nvar transformArrToLowerCase = arr => {\n // Ubah setiap element array menjadi lowercase!\n};\n\nconsole.log(transformArrToLowerCase(['BUDI', 'MArNi', 'mukIDi'])); // ['budi', 'marni', 'mukidi']\n```\n\n### Tugas 2\n\nBuatlah sebuah code yang melakukan filter ke array menggunakan `filter`!\n\n```javascript\nvar filterArrUnder10 = arr => {\n // Filter setiap element array yang nilainya dibawah 10, sisakan yang 10 ke atas!\n};\n\nconsole.log(filterArrUnder10([1, 5, 12, 15, 20])); // [12, 15, 20]\n```\n\n### Tugas 3\n\nBuatlah sebuah code yang mendapatkan nilai terbesar menggunakan `reduce`!\n```javascript\nvar reduceFindMaximum = arr => {\n // kembalikan sebuah nilai yang mengandung angka terbesar dengan reduce!\n}\nconsole.log(reduceFindMaximum([5, 1, 7, 6, 9])); // 9\n```\n"
},
{
"path": "modules/anchor-es6-oop-start.md",
"content": "# Membuat ES6 Class Sederhana\n\n## Objectives\n\n- Mampu memanfaatkan Class pada ES6 untuk membangun object JavaScript\n\n## Directions\n\n1. Ubah kasus dibawah ini ke dalam bentuk ES6 Class.\n\n### Tugas\n\nBuatlah sebuah Class Mobil, yang memiliki atribut berikut:\n- Merek,\n- Harga,\n- Warna,\n- Bensin, dan\n- Jumlah Roda.\n\nClass tersebut juga bisa memanggil function dengan proses sebagai berikut:\n- tampilkanSpesifikasi: menampilkan melalui console.log merek, harga, warna, bensin, dan jumlah roda dengan format berikut:\n\n\"Mobil saya bermerek Hando dengan harga 300000000 rupiah, berwarna merah, bensinnya solar, dan beroda 4\".\n\n- jualMobil: menampilkan melalui console.log harga mobil yang dikurangi 20%.\n"
},
{
"path": "modules/anchor-es6-oop.md",
"content": "# Membuat ES6 Class Lanjutan\n\n## Objectives\n\n- Mampu memanfaatkan Class pada ES6 untuk membangun object JavaScript\n\n## Directions\n\n1. Ubah kasus dibawah ini ke dalam bentuk ES6 Class.\n\n### Tugas\n\nBuatlah sebuah Class Student, yang memiliki atribut berikut:\n- Name,\n- Age,\n- Date of Birth,\n- Gender\n- Student ID (bisa berupa angka atau teks), dan\n- Hobbies (bisa menampung lebih dari 1 hobi).\n\nClass tersebut juga bisa memanggil fungsi dengan proses sebagai berikut:\n- SetName: mengubah nama student dengan mengirimkan satu parameter ke dalam fungsi berupa teks\n- SetAge: mengubah umur student dengan mengirimkan satu parameter ke dalam fungsi berupa angka\n- SetDateOfBirth: mengubah tanggal lahir student dengan mengirimkan satu parameter ke dalam fungsi berupa teks\n- SetGender: mengubah gender student dengan mengirimkan satu parameter ke dalam fungsi berupa teks, dan hanya bisa menerima nilai `Male` atau `Female`\n- addHobby: menambah hobi dengan mengirimkan satu parameter ke dalam fungsi berupa teks\n- removeHobby: menghapus list hobi yang ada dengan mengirimkan satu parameter berupa teks, yang merupakan hobi apa yang akan dihapus\n- getData: menampilkan seluruh data atribut murid\n"
},
{
"path": "modules/anchor-jquery.md",
"content": "# Membuat Website yang Interaktif dengan JQuery\n\nKamu telah mempelajari event dan manipulasi DOM dengan vanilla JavaScript maupun jQuery. Sekarang saatnya kamu membuat sebuah website yang interaktif menggunakan pengetahuan yang telah kita dapatkan dua hari kebelakang. \n\n## Objectives\n\n- Memahami event-handling dengan JQuery\n- Memahami DOM Manipulation dengan JQuery\n\n## Directions\n\n- Unduh [file ini](assets/anchor-jquery.zip) untuk mulai mengembangkan website-mu.\n- Pada file `index.html`, lengkapi konten halaman sesuai dengan perintah yang diberikan dan data yang kamu miliki.\n- Kamu boleh memodifikasi file `style.css` sesuai dengan desain yang kamu inginkan.\n - Secara *default*, desain halaman akan menjadi seperti contoh dibawah.\n- Pada file `script.js`, lengkapi program JavaScript agar memiliki *behavior* yang sama seperti pada contoh dibawah.\n - **Attention!** Kamu boleh menambah tapi tidak boleh mengurangi isi file.\n- Apabila diinginkan, tambahkan konten dan *behavior* halaman website sesuai keinginanmu.\n\n\n### Contoh Hasil Akhir\n\n"
},
{
"path": "modules/anchor-js-dom-creation.md",
"content": "# Menyusun Halaman HTML Dinamis di JavaScript\n\nSetelah mengetahui tentang DOM selection dan manipulation serta DOM transversing, kita akan mencoba memanipulasi DOM kembali, tapi memanfaatkan penjelajahan DOM berdasarkan hubungan parent-child.\n\n## Objectives\n\n- Mengetahui Cara create DOM\n- Mereview Cara menggunakan DOM Event\n\n## Directions\n\n- Buatlah suatu halaman HTML yang dinamis dibuat dari HTML \"kosong\" seperti berikut:\n\n**index.html (Gunakan file index.html ini)**\n```html\n\n \n Tugas Anchor DOM!\n \n \n
\n
\n \n \n\n```\n\nDan dengan teknik `createElement`, susunlah dengan dinamis menggunakan **script.js** untuk menjadikan HTML menjadi seperti di bawah ini:\n\n**HASIL AKHIR**\n```html\n\n \n Tugas Anchor DOM!\n \n \n
![](\"img/sample-logo.png\"){kind=logo}
\n \n