Showing preview only (634K chars total). Download the full file or copy to clipboard to get everything.
Repository: hacktiv8/phase-0-activities
Branch: master
Commit: 585dc54aed02
Files: 248
Total size: 577.0 KB
Directory structure:
gitextract_d4_qmvmm/
├── .gitignore
├── FINISH.md
├── README-WEEK-1.md
├── README-WEEK-2.md
├── README-WEEK-3.md
├── README-WEEK-4.md
├── README-WEEK-5.md
├── README-WEEK-6-deprecated.md
├── README-WEEK-6.md
├── README.md
├── checklist.md
└── modules/
├── README-WEEK-5-old-dom.md
├── algorithm-pseudocode.md
├── anchor-akses-array.md
├── anchor-basic-function.md
├── anchor-before-recursive.md
├── anchor-belajar-for.md
├── anchor-belajar-operator-mtk.md
├── anchor-belajar-variabel.md
├── anchor-belajar-while.md
├── anchor-case-to-pseudocode.md
├── anchor-css-layouting.md
├── anchor-css-selector-and-styling.md
├── anchor-es5-to-es6.md
├── anchor-es6-functional.md
├── anchor-es6-oop-start.md
├── anchor-es6-oop.md
├── anchor-jquery.md
├── anchor-js-dom-creation.md
├── anchor-js-dom-manipulation.md
├── anchor-js-dom-transverse-manipulation.md
├── anchor-js-dom-web-app.md
├── anchor-js-form-validation.md
├── anchor-js-object-literal.md
├── anchor-json.md
├── anchor-laman-web-pertamaku.md
├── anchor-loop-array.md
├── anchor-main-loop-asterisks.md
├── anchor-main-loop.md
├── anchor-main-string.md
├── anchor-menggunakan-if-else-2.md
├── anchor-menggunakan-if-else.md
├── anchor-mixed-array.md
├── anchor-object-1.md
├── anchor-object-2.md
├── anchor-oop-1.md
├── anchor-pseudocode.md
├── anchor-pseudocode2.md
├── anchor-recursive.md
├── anchor-switch-case.md
├── angka-kuadrat.md
├── animation-using-css-and-js.md
├── app-design-architecture.md
├── array-1.md
├── ask-search-read-smarter.md
├── assets/
│ ├── css-anchor-styling.css
│ ├── example.css
│ ├── example.html
│ ├── example.js
│ └── style.css
├── bilangan-faktor.md
├── blockly-games.md
├── blog.md
├── bootstrap.md
├── career.md
├── cek-angka.md
├── cek-prima.md
├── cek-string.md
├── challenge-algoritma-hukum-newton.md
├── challenge-algoritma-laundry-day.md
├── challenge-algoritma-periksa-kuku.md
├── challenge-algoritma-tahun-kabisat.md
├── challenge-angka-prima.md
├── challenge-balik-kata.md
├── challenge-bandingkan-angka.md
├── challenge-cari-mean.md
├── challenge-cari-median.md
├── challenge-cari-modus.md
├── challenge-cari-pelaku.md
├── challenge-cek-ab.md
├── challenge-damage-calculation.md
├── challenge-deep-sum.md
├── challenge-deret-aritmatika.md
├── challenge-deret-geometri.md
├── challenge-digit-perkalian-minimum.md
├── challenge-faktor-persekutuan-terbesar.md
├── challenge-faktorial.md
├── challenge-graduates.md
├── challenge-hapus-simbol.md
├── challenge-highest-score.md
├── challenge-hitung-huruf.md
├── challenge-hitung-jumlah-kata.md
├── challenge-kali-terus.md
├── challenge-kelompok-angka.md
├── challenge-kelompok-hewan.md
├── challenge-konversi-menit.md
├── challenge-main-pseudocode.md
├── challenge-makan-terus.md
├── challenge-melee-ranged-grouping.md
├── challenge-most-frequent-largest-numbers.md
├── challenge-naik-angkot.md
├── challenge-object-literal.md
├── challenge-palindrome-angka.md
├── challenge-palindrome.md
├── challenge-pasangan-terbesar.md
├── challenge-password-generator.md
├── challenge-perkalian-unik.md
├── challenge-perpangkatan-dua.md
├── challenge-recursive-addition.md
├── challenge-shopping-time.md
├── challenge-tambah-dash.md
├── challenge-target-terdekat.md
├── challenge-toko-x.md
├── challenge-total-digit.md
├── challenge-tukar-besar-kecil.md
├── challenge-ubah-huruf.md
├── challenge-ubah-kapital.md
├── challenge-urutkan-abjad.md
├── challenge-x-dan-o.md
├── cli-git-github-practice.md
├── code-combat.md
├── code-documentation.md
├── codecademy.md
├── coderbyte-introduction.md
├── codewars.md
├── collaboration.md
├── color.md
├── contact-form.md
├── contact-list.md
├── core-values.md
├── css3-advanced.md
├── css3-basics.md
├── css3-rules.md
├── database.md
├── dev-ecosystem-community.md
├── editor.md
├── faktor-prima.md
├── format-angka.md
├── format-huruf.md
├── fox-hub-guide.md
├── functional-basics.md
├── gallery-slide.md
├── ganjil-genap-dll.md
├── geser-huruf.md
├── git-branch-anchor.md
├── git-github-basics.md
├── github-pages-rev.md
├── github-pages.md
├── h8-challenge-checker.md
├── hinting-linting.md
├── html-css-code-style.md
├── html5-basics.md
├── html5-boilerplate.md
├── html5-elements.md
├── html5-forms-basics.md
├── index-prima.md
├── internet-web.md
├── introduce-yourself.md
├── is-even.md
├── jenis-bilangan.md
├── jquery-bootstrap.md
├── jquery.md
├── js-application.md
├── js-array.md
├── js-basics.md
├── js-code-style.md
├── js-data.md
├── js-dom-creation.md
├── js-dom-devtools.md
├── js-dom-events.md
├── js-dom-intro.md
├── js-dom-style.md
├── js-dom-transversing.md
├── js-es6-arrow-function.md
├── js-es6-scope.md
├── js-es6.md
├── js-events.md
├── js-first-time.md
├── js-function-method.md
├── js-function-recursive.md
├── js-logic.md
├── js-node.md
├── js-object-json.md
├── js-object-literal.md
├── js-scope.md
├── js-string-reference.md
├── js-style-guide.md
├── js-transpilation.md
├── js-world.md
├── key-competencies.md
├── konversi-huruf-angka.md
├── konversi-waktu.md
├── markdown-anchor.md
├── markdown.md
├── math-basics.md
├── math-object-js.md
├── menghias-laman-html.md
├── menghias-laman-html2.md
├── menghias-laman-html3.md
├── modular-design.md
├── news-article.md
├── number-guess.md
├── number-system.md
├── oop-basics.md
├── oop-design.md
├── open-source.md
├── order-string.md
├── pair-programming.md
├── palindrome-2.md
├── palindrome.md
├── pascal-triangle-sum.md
├── phase-0-setup-guide.md
├── pola-angka.md
├── programming-paradigm.md
├── promo-cc.md
├── promo-menu.md
├── rainbow-text.md
├── range-angka.md
├── refactoring.md
├── reflection.md
├── regular-expressions.md
├── remove-duplication.md
├── repeated-letter.md
├── restaurant.md
├── rock-paper-scissors.md
├── rocket-loop-conditional.md
├── separate-number.md
├── software-culture-teamwork.md
├── story-with-images.md
├── string-compression.md
├── submitting-on-a-new-branch.md
├── sum-array.md
├── svg.md
├── tes.txt
├── testing-performance.md
├── text-style-event.md
├── thinking.md
├── tooling.md
├── web-assets-compression.md
├── web-creation.md
├── web-design.md
├── web-dev-process.md
├── web-evaluation.md
├── web-interactive.md
├── web-literacy.md
├── web-speed.md
├── website.md
└── wireframing.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
.hidden
================================================
FILE: FINISH.md
================================================
# Hacktiv8 Phase 0 is Over: That's a wrap!
Kami akan merangkum semua laporan kegiatan kamu dan menyimpulkan hasilnya, yang akan kita berikan ke masing-masing kamu.
Termasuk juga:
- Showcases
- Blog Post Collection
- Activity Evaluation
- Final Activity Evaluation
================================================
FILE: README-WEEK-1.md
================================================
# Hacktiv8 Phase 0 Week 1: Membuat Website Pertama Saya
Selamat 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!
**Bagaimana Phase 0 ini akan berjalan?**
Dalam 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.
**Oke, siap untuk memulai Phase 0 kita di Hacktiv8?**
Kami 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.
**Apa saja yang akan kita lakukan, pahami, dan selesaikan dalam beberapa hari ke depan?**
Berikut 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.
Catatan: Untuk seluruh diskusi pembelajaran inti dari awal persiapan hingga berakhirnya bootcamp, kita akan menggunakan grup [Slack](https://slack.com/).
Panduan:
- :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.
- :anchor: **Anchor** adalah tugas atau tantangan yang wajib kamu kerjakan dan kumpulkan.
- 💪 **Self Training** adalah tugas atau tantangan opsional yang walaupun tidak dikumpulkan, bila kamu selesaikan dengan baik, pembelajarannya maksimal! 😎
- :rocket: **Rocket** adalah tantangan opsional yang menguji kehebatanmu sebagai calon developer masa depan
- :books: **Optional Reference** adalah bacaan sebagai referensi tambahan yang akan memperkaya pengetahuanmu
**HACKTIV8 FoxHub, Platform Pengumpulan Tugas**
- [FoxHub Guide](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/fox-hub-guide.md)
**Pengumpulan Tugas dan Sistem Feedback**
Tugas 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.
## Senin - Hari Pertamamu di HACKTIV8 Phase 0
Hari pertamamu akan dimulai dengan memperkenalkan dirimu kepada teman-teman lainnya di Slack Group, dan
mempelajari hal paling pertama dalam pembuatan sebuah web, yaitu HTML! Mungkin banyak dari antara kamu
yang 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!
Materi & Referensi :
- :notebook_with_decorative_cover:
[Mempelajari dasar HTML5](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/html5-basics.md)
- :notebook_with_decorative_cover:
[Mempelajari dasar HTML5 forms](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/html5-forms-basics.md)
- :books:
[Mengenal Dunia Web dan Internet](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/internet-web.md)
Tugas :
- :anchor:
[[**Exercises 1**] Codecademy Course - HTML](https://www.codecademy.com/learn/learn-html)
- 💪
[[**Latihan Pribadi 1**] Membuat Halaman HTML Sederhana](modules/anchor-laman-web-pertamaku.md)
## Selasa - Menguasai HTML dan Mengenal CSS
Di 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!
Materi & Referensi :
- :notebook_with_decorative_cover:
[Mempelajari dasar CSS3](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/css3-basics.md)
Tugas :
- :anchor: [[**Exercises 2**] Codecademy Course - CSS (hanya sampai Unit 5 - Typography)](https://www.codecademy.com/learn/learn-css)
- 💪 [[**Latihan Pribadi 2**] Menghias HTML dengan CSS](modules/anchor-css-selector-and-styling.md)
- 💪 [[**Latihan Pribadi 3**] Membuat Layout dan Desain Halaman Web dengan CSS](modules/anchor-css-layouting.md)
## Rabu dan Kamis - Mengendalikan Revisi Menggunakan Git
Kamu telah mampu membuat website yang cukup menarik dengan ilmu yang telah kamu pelajari. Sekarang saatnya
perkaya website kamu dengan gambar dan tabel. Dan hari ini, kamu juga akan berkenalan dengan Git, sebuah
tool untuk mengendalikan revisi dari kode yang telah kamu buat. Dengan menyelesaikan hari ini, berarti kamu
telah punya website kamu sendiri secara online!
Materi & Referensi :
- :notebook_with_decorative_cover:
[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)
- :notebook_with_decorative_cover:
[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)
Tugas :
- 💪
[[**Latihan Pribadi 4**] Mempelajari Markdown dan Membuat README.md](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/markdown-anchor.md)
- 💪
[[**Latihan Pribadi 5**] Membuat Branch Baru pada Repositori](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/git-branch-anchor.md)
## Jumat - Satu Langkah Menjadi Expert HTML dan CSS!
Menjelang akhir minggu pertama kita, saatnya buat diri kita puas dengan mempercantik website kita dan
menampilkannya 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!
Materi & Referensi :
- :notebook_with_decorative_cover:
[Memahahami perencanaan, process, dan manajemen dalam pembuatan web](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/web-dev-process.md)
- :notebook_with_decorative_cover:
[Mengenal adaptive web design dan responsive web design (RWB)](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/web-design.md)
Tugas :
- :anchor:
[[**Exercise 3**] - Website yang dihosting dengan Github Pages](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/github-pages-rev.md)
- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)
Selamat memulai petualanganmu yang lebih nyata dari sebelumnya! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim HACKTIV8
================================================
FILE: README-WEEK-2.md
================================================
Material Valid for FullStack Immersive Batch 17
# Hacktiv8 Phase 0 Week 2: The World of JavaScript
Selamat sudah melalui kegiatan pekan pertama! Pekan kedua ini kita akan berkenalan dengan JavaScript,
dan 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.
## Metode Pengumpulan Tugas
Untuk 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**.
## Senin - Pengenalan Programming, Algoritma, dan Pseudocode
Hari 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:
Materi & Referensi :
- :notebook_with_decorative_cover:
[Mempelajari struktur alur program dengan algoritma dan pseudocode](modules/algorithm-pseudocode.md)
Tugas :
- :anchor:
[[**Exercises 1**] Berlatih dengan Pseudocode](modules/challenge-main-pseudocode.md)
## Selasa - Dunia JavaScript
Hari ini masuklah kita ke bahasa pemrograman JavaScript. Yuk kenalan dengan JavaScript dan langsung coba keseruannya!
Materi & Referensi :
- :wrench:
[Repl, tools online untuk menjalankan JavaScript](https://repl.it/languages/javascript)
- :notebook_with_decorative_cover:
[Memahami dan menggunakan dasar pemrograman dengan JavaScript](modules/js-first-time.md)
- :notebook_with_decorative_cover:
[Memahami Tipe Data dan Variabel pada JavaScript](modules/js-first-time.md#data-type)
- :notebook_with_decorative_cover:
[Mengenal Berbagai Jenis Operasi dalam JavaScript](modules/js-first-time.md#operator)
- :notebook_with_decorative_cover:
[Memahami Control Flow: Conditional dan Branching](modules/js-first-time.md#conditional)
Tugas :
- :anchor:
[[**Exercises 2**] Codecademy JavaScript Building Blocks: Unit 1 and 2 - Intro and Control Flow only](https://www.codecademy.com/learn/learn-javascript)
- :anchor:
[[**Exercises 3**] Mengenal penggunaan Conditional `if-else` dalam JavaScript](modules/anchor-menggunakan-if-else.md)
- :anchor:
[[**Exercises 4**] Mengenal penggunaan Conditional (Switch-Case) dalam JavaScript](modules/anchor-switch-case.md)
## Rabu - Mengenal Tipe data String dan Konsep Looping atau Perulangan
Hari ini mari kita berkenalan dengan string dan perulangan, atau sering disebut juga sebagai looping atau iteration di JavaScript.
Materi & Referensi :
- :notebook_with_decorative_cover:
[Memahami Tipe Data String pada JavaScript](modules/js-string-reference.md)
- :notebook_with_decorative_cover:
[Memahami Perulangan atau Looping](modules/js-first-time.md#loopiteration)
- :notebook_with_decorative_cover:
[Memahami Built-in Object Math](modules/math-object-js.md)
Tugas :
- :anchor: [[**Exercises 5**] Bermain dengan String di JavaScript](modules/anchor-main-string.md)
- :anchor: [[**Exercises 6**] Berlatih Perulangan di JavaScript](modules/anchor-main-loop.md)
- :anchor: [[**Exercises 7**] Perulangan - Play with Asterisks](modules/anchor-main-loop-asterisks.md)
## Kamis - Menggunakan Konsep Functions
Mulai 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.
Materi & Referensi :
- :notebook_with_decorative_cover:
[Mempelajari Function atau Method](modules/js-first-time.md#functionmethod)
- :notebook_with_decorative_cover:
[Mempelajari Scope](modules/js-scope.md)
Tugas :
- :anchor:
[[**Exercises 8**] JavaScript Building Blocks: Codecademy JavaScript Course (Unit 3 - Functions)](https://www.codecademy.com/learn/learn-javascript)
- :anchor:
[[**Exercises 9**] Berlatih Penggunaan Functions](modules/anchor-basic-function.md)
## Jumat - Solve Problems menggunakan JavaScript
- :anchor:
[[**Exercises 10**] Bandingkan Angka](/modules/challenge-bandingkan-angka.md)
- :anchor:
[[**Exercises 11**] Balik Kata](/modules/challenge-balik-kata.md)
- :anchor:
[[**Exercises 12**] Konversi Menit](/modules/challenge-konversi-menit.md)
- :anchor:
[[**Exercises 13**] X dan O](/modules/challenge-x-dan-o.md)
<!-- ## Kamis - mengenal Array dan Memperdalam String
Sebelumnya, 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.
Materi & Referensi :
- :notebook_with_decorative_cover: [Mempelajari tipe data Array](modules/js-array.md)
- :notebook_with_decorative_cover:
[Memahami Tipe Data String pada JavaScript](modules/js-string-reference.md)
Tugas : -->
<!-- - :anchor: [[**Exercises 12**] Tantangan Array 1 (Mengakses Nilai dalam Array)](modules/anchor-akses-array.md)
- :anchor: [[**Exercises 13**] Tantangan Array 2 (Melooping menggunakan Array)](modules/anchor-loop-array.md)
- :anchor: [[**Exercises 14**] Tantangan Array 3 (Array Join, Split, Slice, Splice, Sort)](modules/anchor-mixed-array.md) -->
<!-- ## Jumat - Your First JavaScript App!
Tibalah di akhir minggu. Kamu telah mengenal berbagai macam sintaks JavaScript dari hari pertama hingga hari ini. Sekarang saatnya tunjukkan kemampuan yang telah kamu dapatkan dengan membuat sebuah aplikasi sederhana yang akan ditampilkan di console. JSBin tetap menjadi teman terbaikmu hari ini.
- :anchor: [[**Exercises 16**] WEEKLY PROJECT - Simple JavaScript App](modules/js-application.md) -->
<!-- - :anchor:
[[**Exercises 15**] JavaScript Building Blocks: Codecademy JavaScript Course (Hanya sampai Unit 5 - Functions and Scope)](https://www.codecademy.com/learn/learn-javascript) -->
## Sabtu dan Minggu
- [Refleksi kegiatan pekan ini](modules/reflection.md)
- [Blogging teknikal terkait skill pekan ini](modules/blog.md)
Selamat berpetualang dengan logika dan data! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim Hacktiv8
================================================
FILE: README-WEEK-3.md
================================================
# Hacktiv8 Phase 0 Week 3: Arrays and Logics
Selamat 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.
Karena 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.
## Senin - Live Coding
Instruksi diberikan di channel kelas.
## Selasa - Mengenal Tipe Data Array
Sebelumnya, 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.
Materi & Referensi :
- :notebook_with_decorative_cover: [Mempelajari tipe data Array](modules/js-array.md)
- :notebook_with_decorative_cover:
[Memahami Tipe Data String pada JavaScript](modules/js-string-reference.md)
Tugas :
- :anchor:
[[**Exercises 1**] JavaScript Building Blocks: Codecademy JavaScript Course (Unit 4 - Arrays)](https://www.codecademy.com/learn/learn-javascript)
- :anchor:
[[**Exercises 2**] Tantangan Array 1 (Mengakses Nilai dalam Array)](modules/anchor-akses-array.md)
- :anchor:
[[**Exercises 3**] Tantangan Array 2 (Melooping menggunakan Array)](modules/anchor-loop-array.md)
- :anchor:
[[**Exercises 4**] Tantangan Array 3 (Array Join, Split, Slice, Splice, Sort)](modules/anchor-mixed-array.md)
## Rabu - Logic Challenges Refresh
Gunakan waktu sejenak untuk berkenalan dengan Node Js,
sebuah 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!
Materi & Referensi :
- :notebook_with_decorative_cover:
[Mengenal Node JS](/modules/js-node.md)
- :notebook_with_decorative_cover: [Membuat code JavaScript-mu dengan Baik ](modules/js-code-style.md)
Tugas :
- :anchor:
[[**Exercises 5 (Auto)**] Palindrome](/modules/challenge-palindrome.md)
- :anchor:
[[**Exercises 6 (Auto)**] Palindrome Angka](/modules/challenge-palindrome-angka.md)
- :anchor:
[[**Exercises 7 (Auto)**] Hitung Jumlah Kata](/modules/challenge-hitung-jumlah-kata.md)
- :anchor:
[[**Exercises 8 (Auto)**] Pasangan Angka Terbesar](/modules/challenge-pasangan-terbesar.md)
## Kamis - More Logic Challenges
Hari baru, tantangan baru. Setelah belajar tentang array and solve berbagai problem dengan arrays, saatnya perbanyak latihan dengan soal yang terus melatih logika!
Tugas :
- :anchor:
[[**Exercises 9 (Auto)**] Cari Mean](/modules/challenge-cari-mean.md)
- :anchor:
[[**Exercises 10 (Auto)**] Perkalian Unik](/modules/challenge-perkalian-unik.md)
- :anchor:
[[**Exercises 11 (Auto)**] Deret Aritmatika](/modules/challenge-deret-aritmatika.md)
- :anchor:
[[**Exercises 12 (Auto)**] Deret Geometri](/modules/challenge-deret-geometri.md)
## Jumat - More Arrays + Multidimensional Array
Kamu 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?
Hari ini, kamu akan bermain dengan array dan bentuk selanjutnya, yaitu array multidimensi. Tenang saja, array multidimensi konsep nya sama persis dengan array satu dimensi!
- :anchor:
[[**Exercises 13 (Auto)**] Target Terdekat](/modules/challenge-target-terdekat.md)
- :anchor:
[[**Exercises 14**] Mengelompokkan Angka](modules/challenge-kelompok-angka.md)
- :anchor:
[[**Exercises 15**] Mengelompokkan Hewan](modules/challenge-kelompok-hewan.md)
Tugas :
## Sabtu dan Minggu
- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)
- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)
Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim Hacktiv8
================================================
FILE: README-WEEK-4.md
================================================
# Hacktiv8 Phase 0 Week 4: Logics in JavaScript
Selamat 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!
## Senin - Live Coding (Arrays, Looping, & Conditionals)
Tiba 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.
- :notebook_with_decorative_cover:
[Materi Object Literal](/modules/js-object-literal.md)
## Selasa - Numbers Crunching and Play with Strings
Hari baru, tantangan baru! terus tantang diri kamu untuk mengahadapi tantangan baru minggu ini dan percayalah semuanya akan terbalaskan pada waktunya :smile:
- :anchor:
[[**Exercises 1**] Angka Prima](/modules/challenge-angka-prima.md)
- :anchor:
[[**Exercises 2**] Faktor Persekutuan Terbesar](/modules/challenge-faktor-persekutuan-terbesar.md)
- :anchor:
[[**Exercises 3**] Cari Median](/modules/challenge-cari-median.md)
- :anchor:
[[**Exercises 4**] Cari Modus](/modules/challenge-cari-modus.md)
- :anchor:
[[**Exercises 5**] Ubah Huruf](/modules/challenge-ubah-huruf.md)
## Rabu - Built-in Functions Mastery
Hari ketiga di pekan keempat. Keep up the good work! Banyak tantangan menunggu seminggu ke depan :cool:
- :anchor:
[[**Exercises 6**] Digit Perkalian Minimum](/modules/challenge-digit-perkalian-minimum.md)
- :anchor:
[[**Exercises 7**] Urutkan Abjad](/modules/challenge-urutkan-abjad.md)
- :anchor:
[[**Exercises 8**] Tukar Ukuran](/modules/challenge-tukar-besar-kecil.md)
- :anchor:
[[**Exercises 9**] Cek AB](/modules/challenge-cek-ab.md)
## Kamis - Object Literal
Lanjutkan perjuanganmu di tengah banyaknya tantangan yang diberikan di pekan ke empat.
- :anchor:
[[**Exercises 10**] Change me](modules/challenge-object-literal.md)
- :anchor:
[[**Exercises 11**] Shopping Time!](modules/challenge-shopping-time.md)
- :anchor:
[[**Exercises 12**] Toko X](modules/challenge-toko-x.md)
## Jumat - Mastered Array and Object
- :anchor: [[**Exercises 13**] Deep Sum](modules/challenge-deep-sum.md)
- :anchor: [[**Exercises 14**] Naik Angkot](modules/challenge-naik-angkot.md)
- :anchor: [[**Exercises 15**] Highest Score](modules/challenge-highest-score.md)
- :anchor: [[**Exercises 16**] Graduates](modules/challenge-graduates.md)
## Sabtu dan Minggu
- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)
- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)
Selamat berpetualang dengan logika lebih lanjut! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim Hacktiv8
================================================
FILE: README-WEEK-5.md
================================================
# Hacktiv8 Phase 0 Week 5: Recursive, Regex, and Object Oriented Programming in JavaScript
Selamat 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.
## Senin - Live Coding (Arrays, Looping, & Conditionals)
Tiba 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.
## Selasa - Modularizing Code using Functions & Recursive Functions
- :notebook_with_decorative_cover:
[Mengenal Rekursif](/modules/js-function-recursive.md)
- :anchor: [[**Exercises 1**] Most Frequent Largest Numbers](modules/challenge-most-frequent-largest-numbers.md)
- :anchor: [[**Exercises 2**] Password Generator](modules/challenge-password-generator.md)
- :anchor: [[**Exercises 3**] Makan Terus Rekursif](/modules/challenge-makan-terus.md)
- :anchor: [[**Exercises 4**] Total Digit Rekursif](/modules/challenge-total-digit.md)
- :anchor: [[**Exercises 5**] Kali Terus Rekursif](/modules/challenge-kali-terus.md)
## Rabu - Git Branch
- :notebook_with_decorative_cover:
[Cara Submit menggunakan Git Branch (Untuk Exercises Hari Rabu)](/modules/submitting-on-a-new-branch.md)
- :anchor: [[**Exercises 6**] Damage Calculation](/modules/challenge-damage-calculation.md)
- :anchor: [[**Exercises 7**] Melee Ranged Grouping](/modules/challenge-melee-ranged-grouping.md)
## Kamis - Regex
- :notebook_with_decorative_cover:
[Mengenal Regular Expressions](/modules/regular-expressions.md)
- :anchor:
[[**Exercises 8**] Hapus Simbol](/modules/challenge-hapus-simbol.md)
- :anchor:
[[**Exercises 9**] Cari Pelaku](/modules/challenge-cari-pelaku.md)
## Jumat - Simulasi Final Live Code
Lakukan 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
## Sabtu dan Minggu
- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)
- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)
Selamat berpetualang dengan istilah dan teknologi yang makin seru! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim Hacktiv8
================================================
FILE: README-WEEK-6-deprecated.md
================================================
# COMING SOON! Prepare For Live Code!
<!-- # Hacktiv8 Phase 0 Week 6: ES6 dan Paradigma Programming
Sampailah di minggu terakhir phase 0 ! Sangat diharapkan apabila kamu sudah paham dan menyelesaikan tugas di minggu sebelumnya dengan baik. Di minggu terakhir ini, kamu akan berkenalan dengan JavaScript ES6 :bowtie:
- :pushpin:
[Form Pengumpulan Tugas Week 6 Batch 14](https://airtable.com/shr1ErRhqEXFm0rG6)
## Senin - Selasa: Final Live Coding (Offline).
Ini 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.
Artinya kamu harus datang ke Hacktiv8 untuk mengikuti nya. Pilih hari yang kamu bisa antara hari Senin atau Selasa. Dihari itu ada 2 Sesi yang bisa kamu pilih Jam nya.
Sesi Pagi : 10.00 - 12.00
Sesi Siang : 14.00 - 16.00
Informasikan kepada instruktur kamu bisa hari apa dan ikut Sesi siang atau pagi.
## Rabu - EcmaScript 6
Mulai hari ini, kamu akan mengenal banyak sintaks baru terutama ES6. Kami juga memberikan referensi melalui devdocs.io, sebuah web yang merupakan kurasi referensi sintaks yang sangat lengkap. Kami tidak memberikan ini di minggu-minggu sebelumnya, dengan tujuan supaya bisa fokus dengan materi yang diberikan, karena kami mengerti JavaScript sangat luas, namun ada beberapa hal fundamental yang ingin kami perkenalkan sebelum akhirnya masuk ke yang lebih advanced.
- :wrench:
[Devdocs.io, referensi lengkap sintaks JavaScript](http://devdocs.io/javascript/)
- :notebook_with_decorative_cover:
[Mengenal EcmaScript 6](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/js-es6.md)
- :notebook_with_decorative_cover:
[Mengenal Scope di JavaScript](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/js-scope.md)
- :notebook_with_decorative_cover:
[Memanfaatkan Scope di JavaScript ES6](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/js-es6-scope.md)
- :notebook_with_decorative_cover:
[Memanfaatkan Arrow Function di ES6](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/js-es6-arrow-function.md)
- :anchor:
[[**Exercises 1**] Mengubah Sintaks ES5 ke ES6](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/anchor-es5-to-es6.md)
## Kamis - Paradigma Functional Programming
- :notebook_with_decorative_cover:
[Mengenal Functional Programming pada JavaScript ES6](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/functional-basics.md)
- :anchor:
[[**Exercises 2**] Menggunakan Map, Filter, dan Reduce di JavaScript untuk menyelesaikan kasus sederhana](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/anchor-es6-functional.md)
## Sabtu dan Minggu
- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)
- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)
Selamat berpetualang dengan istilah dan teknologi yang makin seru! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim Hacktiv8
 -->
================================================
FILE: README-WEEK-6.md
================================================
# Hacktiv8 Phase 0 Week 6: Finals and JavaScript DOM
Sampailah 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!
## Senin - Rabu: Final Live Coding (Offline).
Ini 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.
## Rabu - Document Object Model (DOM)
Akhirnya 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.
- :notebook_with_decorative_cover:
[Mengenal DOM](/modules/js-dom-intro.md)
- :notebook_with_decorative_cover:
[Membuat DOM](/modules/js-dom-creation.md)
- :notebook_with_decorative_cover:
[Menjelajah DOM](/modules/js-dom-transversing.md)
## Kamis - Document Object Model
Mulai 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!)
Materi & Referensi :
- :notebook_with_decorative_cover:
[Mengenal DOM](/modules/js-dom-intro.md)
- :notebook_with_decorative_cover:
[Membuat DOM](/modules/js-dom-creation.md)
- :notebook_with_decorative_cover:
[Menjelajah DOM](/modules/js-dom-transversing.md)
Tugas :
- 💪
[[**Latihan Pribadi 1**] Memanipulasi Element HTML](modules/anchor-js-dom-manipulation.md)
- 💪
[[**Latihan Pribadi 2**] Memanipulasi dan Menjelajah DOM](modules/anchor-js-dom-transverse-manipulation.md)
- 💪
[[**Latihan Pribadi 3**] Membuat Validasi Form menggunakan JavaScript](modules/anchor-js-form-validation.md)
- 💪
[[**Latihan Pribadi 4**] Membuat Element HTML Dinamis Dengan JavaScript](modules/anchor-js-dom-creation.md)
## Jumat - Final Project!
Tibalah 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.
- :anchor:
[[**Final Project**] Membuat Web App menggunakan HTML, CSS, dan JavaScript](modules/anchor-js-dom-web-app.md)
## Sabtu dan Minggu
- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)
- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)
Selamat berpetualang dengan istilah dan teknologi yang makin seru! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim Hacktiv8
================================================
FILE: README.md
================================================
# HACKTIV8 Phase 0 Activities
Phase 0 adalah aktivitas yang mempersiapkan murid untuk mampu memahami dan masuk ke dalam Phase 1 Program
Full-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.
Materi di bagi ke dalam enam minggu, yang tiap minggu nya terdiri dari berbagai fokus materi. Kebanyakan dari
materi dan tantangan yang tertera pada repositori ini hanya dapat di akses oleh murid yang sedang aktif di dalam phase 0 batch program.
### [Week 1: Membuat Website Pertama Saya](./README-WEEK-1.md)
### [Week 2: Mengenal JavaScript](./README-WEEK-2.md)
### [Week 3: Mendalami JavaScript](./README-WEEK-3.md)
### [Week 4: Bermain Logic di JavaScript](./README-WEEK-4.md)
### [Week 5: Bermain Logic di JavaScript](./README-WEEK-5.md)
### [Week 6: Menguasai JavaScript ES6 dan Paradigma Programming](./README-WEEK-6.md)
================================================
FILE: checklist.md
================================================
Berikut adalah list challenges yang wajib diselesaikan karena akan diperhitungkan sebagai completion rate.
List di bawah ini merupakan summary dari kegiatan week 2 - 4 yang bertanda :anchor:
Pedoman :
- https://github.com/hacktiv8/phase-0-activities/blob/master/README-WEEK-2.md
- https://github.com/hacktiv8/phase-0-activities/blob/master/README-WEEK-3.md
- https://github.com/hacktiv8/phase-0-activities/blob/master/README-WEEK-4.md
## Week 2 (13 poin)
1. Membuat thinking.html / leaarning.html
2. menyelesaikan https://www.codecademy.com/learn/javascript unit 1 dan 2
3. Menyelesaikan codecademy https://www.codecademy.com/learn/javascript unit 3, 4, dan 5
4. Membuat Konversi Waktu
5. Membuat Order String
6. Membuat function palindrome
7. Membuat fungsi matematika dasar
8. Membuat permainan suit lokal
9. Menyelesaikan codecademy https://www.codecademy.com/learn/javascript unit 6, 7, dan 8
10. Membuat function format huruf
11. Membuat function separate number
12. Membuat function format angka
13. Membuat daftar kontak sederhana
## Week 3 (16 poin)
1. Challenge-Cek Bilangan Prima
2. Challenge-Index Bilangan Prima
3. Challenge-Jenis Bilangan
4. Challenge-Bilangan Faktor
5. Challenge-Faktor Prima
6. Challenge-Palindrome 2
7. Challenge-String Compression
8. Challenge-Cek String
9. Challenge-Remove Duplicate
10. Membuat permainan tebak angka
11. Challenge-Array 1
12. Challenge-Repeated Letter
13. Challenge-Pergeseran Huruf
14. Challenge-Pola Angka
15. Challenge-Cek Angka
16. Challenge-Konversi Huruf dan Angka
## Week 4 (6 poin)
1. Challenge-Menu Restaurant
2. Challenge-Recursive Range Angka
3. Challenge-Promo Menu
4. Challenge-Recursive is Even Number
5. Challenge-Promo Credit Card
6. Challenge-Recursive Angka Kuadrat
================================================
FILE: modules/README-WEEK-5-old-dom.md
================================================
## DEPRECATED.
# Hacktiv8 Phase 0 Week 5: The World of DOM
Selamat 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!
## Senin - DOM Introduction
Akhirnya 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.
- :notebook_with_decorative_cover: [Memahami Document Object Model](modules/js-dom-intro.md)
- :anchor: [Seleksi dan Manipulasi DOM Sederhana](modules/anchor-js-dom-manipulation.md)
- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)
## Selasa - DOM Transversing
Setelah mencoba menseleksi DOM, hari ini saatnya kita belajar bagaimana melakukan DOM transversing atau disebut juga penjelajahan DOM.
- :notebook_with_decorative_cover: [Memahami DOM Transversing](modules/js-dom-transversing.md)
- :anchor: [Penjelajahan dan Manipulasi DOM Sederhana](modules/anchor-js-dom-transverse-manipulation.md)
- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)
## Rabu - DOM Events
Ternyata 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!
- :notebook_with_decorative_cover: [Memahami DOM Events](modules/js-dom-events.md)
- :anchor: [Validasi Form dengan JavaScript](modules/anchor-js-form-validation.md)
- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)
## Kamis - Menyusun Halaman HTML dengan JavaScript
Sebelumnya 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!
- :notebook_with_decorative_cover: [Membuat DOM Secara Dinamis](modules/js-dom-creation.md)
- :anchor: [Menyusun Layout HTML dengan JavaScript](modules/anchor-js-dom-creation.md)
- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)
## Jumat - Interactive App using JavaScript
Kamu 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.
- :notebook_with_decorative_cover: [Mengubah Style DOM Secara Dinamis](modules/js-dom-style.md)
- :books: [Memberikan Animasi sederhana dengan CSS dan JS](modules/animation-using-css-and-js.md)
- :anchor: [WEEKLY PROJECT - Web App / Game using DOM Manipulation](modules/anchor-js-dom-web-app.md)
- :pushpin: [Form Pengumpulan Tugas Week 5](https://airtable.com/shrZrcEN6oV9Gb25d)
## Sabtu dan Minggu
- [Refleksi kegiatan pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/reflection.md)
- [Blogging teknikal terkait skill pekan ini](https://github.com/hacktiv8/phase-0-activities/blob/master/modules/blog.md)
Selamat berpetualang dengan istilah dan teknologi yang makin seru! Jika ada hal yang perlu ditanyakan, langsung saja berdiskusi di grup ya.
Salam,
Tim Hacktiv8
================================================
FILE: modules/algorithm-pseudocode.md
================================================
# Learn Algorithm and Pseudocode
## Objectives
- ▢ Memahami struktur alur program dengan algoritma dan pseudocode
## Learnings
### Mengenal Algoritma
Belajar 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.
Namun apa itu algoritma? Mari kita ilustrasikan terlebih dahulu.
Bagaimana 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.
Nah 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).
Dalam 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.
Algoritma bisa sesederhana kita jabarkan langkah-langkahnya seperti tadi, atau kita visualisasikan dalam bentuk flowchart seperti berikut.
- ▢ 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)
### Basic Simbol / Notasi Flowchart
Flowchart 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:
##### Start/End
<!-- Insert image of start/end symbol here -->
##### Input/Output
<!-- Insert parallelogram image here -->
##### Process
<!-- Insert rectangle image here -->
##### Conditional (IF)
<!-- Insert diamond image here -->
Banyak tools software yang dapat kamu gunakan untuk menggambar flowchart. salah satunya tools online editor [draw.io](https://www.draw.io/)
Bagi kalian yang nanti akan membuat sebuah sistem yang complex, menggambar flowchart bisa jadi hal pertama yang kalian lakukan sebelum coding. Kenapa ?
Karena 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.
### Mengenal Pseudocode
Atau 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.
**Bahasa Inggris**
```
READ and SAVE "first number"
READ and SAVE "second number"
COMPUTE "first number" added by "second number"
SAVE previous computation result
SHOW the computation result
```
Bahasa 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.
**JavaScript**
```
var a,b,c;
a = prompt("First Number?");
b = prompt("Second Number?");
c = Number(a) + Number(b);
console.log(c);
alert("Result = " + c);
```
Dengan 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...
**Python**
```
a = input("First Number? ")
b = input("Second Number? ")
c = int(a) + int(b)
print("Result", c)
```
**Ruby**
```
puts "First Number?"
a = gets.chomp
puts "Second Number?"
b = gets.chomp
c = a.to_i + b.to_i
puts c
```
### Lebih dalam tentang Pseudocode
Berikut 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".
#### Storing Values
Biasanya, pada saat kita belajar matematika atau fisika, kita akan bertemu dengan rumus. Paling sederhana adalah rumus luas persegi, yaitu width dikalikan height.
Kita 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.
Contoh Pseudocode
```
STORE "width" with any value
STORE "height" with any value
STORE "area" without any value
CALCULATE "width" times "height"
SET "area" value with calculation result
DISPLAY "area"
```
Bisa dilihat dari pseudocode diatas, ada beberapa step yang kita jalankan. Mari kita bahas tiap step ke bahasa yang lebih "manusiawi" :)
1. Simpan "width" dengan nilai berapapun
2. Simpan "height" dengan nilai berapapun
3. Simpan "area" tanpa diberikan nilai. Ini akan kita isi nanti.
4. Hitung hasil perkalian "width" dengan "height"
5. Setelah mendapatkan hasil perhitungan, isikan hasilnya ke dalam "area"
6. Tampilkan nilai dari "area"
#### Conditional
Saat 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.
Contoh Pseudocode
```
IF "hungry"
DO "eat"
DISPLAY "i am happy"
```
Jika kita lihat pseudocode diatas, bisa dijabarkan sebagai step berikut
1. Jika lapar, maka masuk ke step 2. Jika tidak, abaikan step 2 dan langsung ke step 3.
2. lakukan proses "eat"
3. Tampilkan "i am happy"
Yang 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.
Tidak 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.
Contoh Pseudocode
```
STORE "score" to any number
IF "score" < 70
DO "learn more"
ELSE
DO "reward myself"
DO "continue with life..."
```
Nah disini terjadi yang biasa dinamakan percabangan. Jika score dibawah 70, maka kita akan "learn more", dan jika tidak, maka kita harus "reward myself".
Namun apapun kondisinya, kita pasti akan masuk ke step "continue with life..."
Pseudocode diatas bisa digambarkan ke step berikut:
1. Jika "score" dibawah 70, masuk ke step 2a. Jika tidak, masuk ke step 2b.
2a. Lakukan "learn more"
2b. Lakukan "reward myself"
3. Lakukan "continue with life..."
Saat program berjalan, berarti hanya ada dua kemungkinan. Antara menjalankan step 1 -> 2a -> 3, atau step 1 -> 2b -> 3.
#### Looping
Nah sekarang kita akan masuk ke bagian terakhir yang dibutuhkan hari ini dan sekaligus yang sedikit lebih sulit dibandingkan bagian sebelumnya, yaitu perulangan.
Komputer 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?
Contoh Pseucodode
```
WHILE "hungry"
DO "eat"
```
Nah, 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.
Biasanya, 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".
```
STORE "full level" with 0
WHILE "full level" < 5
ADD "full level" by 1
DISPLAY "I'm full!"
```
Nah, 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.
Kita coba ilustrasikan step pseudocode diatas:
1. Simpan nilai "full level" dengan angka 0
2. Ulangi step 3 selama "full level" masih dibawah 5. Jika "full level" sudah 5, lanjut ke step 4.
3. Tambah "full level" dengan 1, agar semakin mendekati batas perulangan. Kembali ke step 2.
4. Tampilkan "I'm full", berarti saya sudah sangat kenyang!
Ternyata, 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.
Kita akan coba membuat pseudocode yang menggunakan looping dan conditional sekaligus, berangkat dari kasus berikut:
Seorang 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!".
Tunggu! 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.
Contoh Pseudocode
```
STORE "count" to 1
WHILE "count" < 11
DISPLAY "count"
CALCULATE "count" mod 2
STORE "remainder" to the result of calculation
IF "remainder" equals to 0
DISPLAY "EVEN!"
ELSE
DISPLAY "ODD!"
```
### References
- [What is a computer algorithm? on HowStuffWorks](http://computer.howstuffworks.com/question717.htm)
- [Algorithm, on Wikipedia](https://en.wikipedia.org/wiki/Algorithm)
- [Algorithms Course on Khan Academy](https://www.khanacademy.org/computing/computer-science/algorithms)
- [Sorting Algorithm Animations](http://sorting-algorithms.com)
- [VisuAlgo: Visualising data structures and algorithms through animation](http://visualgo.net)
- [Notes on Algorithms, Pseudocode, and Flowcharts - Dr. Burford J. Furman](http://www.engr.sjsu.edu/bjfurman/courses/ME30/ME30pdf/Notes_on_Algorithms.pdf)
- [Pseudocode Standard - Dr. John Dalbey](http://users.csc.calpoly.edu/~jdalbey/SWE/pdl_std.html)
================================================
FILE: modules/anchor-akses-array.md
================================================
# Mengakses Nilai Dalam Array
Tahukah 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!
## Objectives
- Mengetahui *properties* Pada Array
- Mengerti Cara Mengakses Nilai Dalam Array
## Directions
Buatlah sebuah fungsi dengan nama **balikString**. Fungsi ini akan menerima argumen sebuah string dan mengembalikan kebalikannya.
### Example
```javascript
//input "hello world!"
//output
"!dlrow olleh"
```
### Hints
Untuk 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!**
================================================
FILE: modules/anchor-basic-function.md
================================================
# Mengenal Penggunaan Function
## Objectives
- Mampu memahami serta mengimplementasi penggunaan function pada JavaScript
## Directions
1. Lanjutkan kode berikut ini hingga dapat menampilkan nilai / output yang diminta!
### Tugas 1
Buatlah sebuah fungsi bernama shoutOut(), yang mengembalikan nilai berupa "Halo Function!", yang kemudian
akan ditampilkan di console.
```JavaScript
/*
BUATLAH KODE FUNCTION DISINI
*/
console.log(shoutOut()) // Menampilkan "Halo Function!" di console
```
### Tugas 2
Buatlah sebuah fungsi bernama calculateMultiply(), yang mengembalikan nilai berupa hasil kali dari dua parameter yang dikirim.
```JavaScript
/*
BUATLAH KODE FUNCTION DISINI
*/
var num1 = 5;
var num2 = 6;
var hasilPerkalian = calculateMultiply(num1,num2);
console.log(hasilPerkalian); // Menampilkan angka 30
```
### Tugas 3
Buatlah 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]!"
```JavaScript
/*
BUATLAH KODE FUNCTION DISINI
*/
var name = "Agus";
var age = 30;
var address = "Jln. Malioboro, Yogjakarta";
var hobby = "gaming";
var fullSentence = processSentence(name,age,address,hobby);
console.log(fullSentence); // Menampilkan "Nama saya Agus, umur saya 30 tahun, alamat saya di Jln. Malioboro, Yogjakarta, dan saya punya hobby yaitu gaming!"
```
================================================
FILE: modules/anchor-before-recursive.md
================================================
# Pemanasan Sebelum Tantangan Recursive
Tantangan 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.
# Directions
- Buatlah 2 buah function berbeda. Beri nama function sesuai dengan keinginanmu. Gunakan *looping* untuk menyelesaikan tugas ini.
- Function pertama menerima 1 parameter berupa angka. Sedangkan function kedua menerima 2 parameter yang keduanya juga angka.
- 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.
> **cara kerja fungsi pertama**
> parameter = 5
> keluaran = 5 * 4 * 3 * 2 * 1 = 120
- Tugas function kedua hampir sama dengan function pertama. Yang membedakannya adalah parameter kedua menentukan beda antar angka dalam deret.
> **cara kerja fungsi kedua**
> parameter1 = 12, parameter2 = 5
> keluaran = 12 * 7 * 2 = 168
================================================
FILE: modules/anchor-belajar-for.md
================================================
# Melakukan *Looping* Menggunakan `For`
## Objectives
* Mengerti Cara Melakukan *Looping* Menggunakan `For`
* Mengetahui Operator *Increment* dan *Decrement*
## Directions
Pada 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'.
## Hints
> Operator `++` disebut dengan operator *Increment*
> Operator `--` disebut dengan operator *Decrement*
## Output
```
LOOPING PERTAMA
1 - I love coding
2 - I love coding
3 - I love coding
4 - I love coding
5 - I love coding
6 - I love coding
7 - I love coding
8 - I love coding
9 - I love coding
10 - I love coding
11 - I love coding
12 - I love coding
13 - I love coding
14 - I love coding
15 - I love coding
16 - I love coding
17 - I love coding
18 - I love coding
19 - I love coding
20 - I love coding
LOOPING KEDUA
20 - I will become fullstack developer
19 - I will become fullstack developer
18 - I will become fullstack developer
17 - I will become fullstack developer
16 - I will become fullstack developer
15 - I will become fullstack developer
14 - I will become fullstack developer
13 - I will become fullstack developer
12 - I will become fullstack developer
11 - I will become fullstack developer
10 - I will become fullstack developer
9 - I will become fullstack developer
8 - I will become fullstack developer
7 - I will become fullstack developer
6 - I will become fullstack developer
5 - I will become fullstack developer
4 - I will become fullstack developer
3 - I will become fullstack developer
2 - I will become fullstack developer
1 - I will become fullstack developer
```
================================================
FILE: modules/anchor-belajar-operator-mtk.md
================================================
# 2. Belajar Menggunakan Operator Matematika
## Objectives
* Mengerti Cara Penggunaan Operator Matematika
* Mengerti Kegunaan Tiap-tiap Operator
* Mengetahui Kegunaan Operator `+` selain untuk menghitung
## Directions
Gunakan 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.
```javascript
// deklarasikan variabel dan lakukan operasi mulai dari sini
// kode dibawah tidak boleh diubah
console.log(total);
console.log(substract);
console.log(multiply);
console.log(division);
console.log(modulus);
console.log(words);
console.log(wordnumber);
console.log(numberword)
```
### Hints
> * Deklarasikan variabel dengan lengkapi
### Output
> 39
> 27
> 198
> 5.5
> 3
> "foobar"
> "foo33"
> "6bar"
================================================
FILE: modules/anchor-belajar-variabel.md
================================================
# 1. Belajar Tentang Variabel pada JavaScript
## Objectives
* Mengerti cara *assignment* pada variabel
* Mengerti cara memanggil data dengan variabel
## Directions
Terdapat beberapa data dibawah ini yaitu:
* 33
* 6
* 'foo'
* 'bar'
* true
* false
Dan juga terdapat beberapa nama variabel yang boleh kamu buat antara lain:
* number1
* number2
* string1
* string2
* boolean1
* boolean2
tugas kamu adalah melakukan *assignment* pada variabel-variabel yang tersedia dengan data yang ada dan menuliskannya menggunakan `console.log()`.
### Hint
* JavaScript memang tidak memiliki tipe data secara eksplisit, namun solusi yang benar dari tugas ini adalah menempatkan data pada variabel dengan nama yang sesuai.
* Deklarasikan variabel dengan lengkap
* Keluarkan output dengan memanggil variabel, bukan data
* Gunakan sebuah `console.log()` untuk masing-masing variabel.
### Output
```javascript
33
6
"foo"
"bar"
true
false
```
================================================
FILE: modules/anchor-belajar-while.md
================================================
# Melakukan *Looping* Menggunakan `While`
## Objectives
* Mengerti Cara Melakukan *Looping* Menggunakan `While`
## Directions
Pada 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'.
## Output
```
LOOPING PERTAMA
2 - I love coding
4 - I love coding
6 - I love coding
8 - I love coding
10 - I love coding
12 - I love coding
14 - I love coding
16 - I love coding
18 - I love coding
20 - I love coding
LOOPING KEDUA
20 - I will become fullstack developer
18 - I will become fullstack developer
16 - I will become fullstack developer
14 - I will become fullstack developer
12 - I will become fullstack developer
10 - I will become fullstack developer
8 - I will become fullstack developer
6 - I will become fullstack developer
4 - I will become fullstack developer
2 - I will become fullstack developer
```
================================================
FILE: modules/anchor-case-to-pseudocode.md
================================================
# Mengubah Kasus Menjadi Pseudocode
## Objectives
- Mampu menganalisa kasus dan mengubahnya dalam bentuk pseudocode
## Directions
1. Ubah semua kasus di bawah ke dalam bentuk pseudocode
### Tugas 1
Buatlah sebuah pseudocode yang mengambil dua angka, dan menghitung serta menampilkan hasil perkalian dari kedua bilangan tersebut.
hint: Gunakan kata kunci `SIMPAN`, `HITUNG`, dan `TULISKAN`.
### Tugas 2
Buatlah sebuah pseudocode yang mengambil sebuah kata, dan jika kata yang diambil bertuliskan "Saya Belajar JavaScript!", tampilkan "Pasti Bisa!".
hint: Gunakan kata kunci `SIMPAN`, `IF`, dan `TULISKAN`.
### Tugas 3
Buatlah 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.
hint: Gunakan kata kunci `SIMPAN`, `ULANGI`, dan `TAMPILKAN`.
================================================
FILE: modules/anchor-css-layouting.md
================================================
# Menghias Laman HTML dengan CSS Layouting
## Objectives
Dengan 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!
## Directions
### 1. Membuat File HTML
Buatlah sebuah file HTML bernama *index.html* di sebuah folder bernama *project-css-layouting*.
Gunakan kode yang sudah disiapkan berikut:
```html
<html>
<head>
<link href="style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
</head>
<body>
<header>
<img id="logo" src="img/sample-logo.png" width="200px" />
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</nav>
</header>
<section>
<h1>Featured Posts</h1>
<div id="article-list">
<article>
<a href=""><h3>Lorem Post 1</h3></a>
<p>
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.
</p>
</article>
<article>
<a href=""><h3>Lorem Post 2</h3></a>
<p>
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.
</p>
</article>
<article>
<a href=""><h3>Lorem Post 3</h3></a>
<p>
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.
</p>
</article>
<article>
<a href=""><h3>Lorem Post 4</h3></a>
<p>
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.
</p>
</article>
<article>
<a href=""><h3>Lorem Post 5</h3></a>
<p>
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.
</p>
</article>
</div>
</section>
<footer>
<h5>copyright © 2016 by HACKFOX</h5>
</footer>
</body>
</html>
```
### 2. Membuat File CSS
Buatlah sebuah file CSS bernama *style.css* pada folder yang sama dengan file *index.html* yang telah di hubungkan pada file html tersebut.
> `<link href="style.css" rel="stylesheet" type="text/css">`
### 3. Menyiapkan Aset Gambar
Buatlah 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:
### 4. Membuat Layout dan Desain
Sesuaikan kode html yang telah terhubung dengan css di atas, buatlah halaman HTML menjadi lebih bagus dan sesuai dengan tampilan di bawah ini!
### 5. Pengumpulan
Upload 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.
> **Syntax Penting**
> - color
> - font-size
> - font-family
> - background
> - font-weight
> - text-align
> - text-decoration
> - position
> - cursor
================================================
FILE: modules/anchor-css-selector-and-styling.md
================================================
# Menghias Laman HTML dengan CSS
## Objectives
Dengan 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!
## Directions
### 1. Membuat File HTML
Buatlah sebuah file HTML bernama *index.html* di sebuah folder bernama *project-css-styling*.
Gunakan kode yang sudah disiapkan berikut:
```html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="separator">
<h1>1. Selector dan Styling Sederhana</h1>
<div>Saya adalah Box Berwarna Maroon</div>
<div>Saya adalah Box Berwarna Dark Blue</div>
<div>Saya adalah Box Berwarna Salem</div>
</div>
<div class="separator">
<h1>2. Selector Lebih Dari Satu</h1>
<div>Saya adalah Box Red berukuran 100</div>
<div>Saya juga Box Red tapi ukurannya 200</div>
<div>Saya adalah Box Blue berukuran 200</div>
<div>Saya juga berukuran 200 tapi warnanya Green</div>
</div>
<div class="separator">
<h1>3. Selector Melalui Parent</h1>
<div>
<div>Desain saya diatur oleh Parent Saya</div>
<div>Desain saya diatur oleh Parent Saya</div>
<div>Desain saya diatur oleh Parent Saya, tapi saya punya warna khusus, yaitu Gold!</div>
</div>
</div>
</body>
</html>
```
### 2. Membuat File CSS
Buatlah sebuah file CSS bernama *style.css* pada folder yang sama dengan file *index.html* yang telah di hubungkan pada file html tersebut.
> `<link href="style.css" rel="stylesheet" type="text/css">`
Kamu **wajib** menggunakan kode CSS dibawah ini dan tidak mengubah apapun:
```css
/* Style Default */
body {
font-family: 'Slabo 27px', serif;
}
h1 {
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding-bottom: 10px;
}
.separator {
width: 100%;
height: auto;
overflow: hidden;
}
/* Style Untuk Soal 1, 2, dan 3. Gunakan Dengan Sesuai! */
.box-100 {
width: 100px;
height: 100px;
float: left;
margin: 20px;
padding: 20px;
font-size: 15pt;
text-align: center;
}
.box-200 {
width: 200px;
height: 200px;
float: left;
margin: 20px;
padding: 20px;
font-size: 15pt;
text-align: center;
}
#maroon-box {
color: #FFFFFF;
background: #96281B;
}
#dark-blue-box {
color: #FFFFFF;
background: #4B77BE;
}
#salem-box {
color: #FFFFFF;
background: #1E824C;
}
.red-background {
color: #FFFFFF;
background: #C0392B;
}
.blue-background {
color: #FFFFFF;
background: #446CB3;
}
.green-background {
color: #FFFFFF;
background: #26A65B;
}
.box-list div {
width: 200px;
height: 200px;
float: left;
margin: 20px;
padding: 20px;
font-size: 15pt;
text-align: center;
background: #353535;
color: #FFFFFF;
}
#gold-box {
border-radius: 20px;
color: #353535;
background: #F9BF3B;
}
```
### 3. Menambahkan Class dan Id yang sesuai di HTML!
CSS 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:
<!-- ### 4. Pengumpulan
Upload 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.
-->
> **Syntax Penting**
> - class
> - id
================================================
FILE: modules/anchor-es5-to-es6.md
================================================
# Mengubah ES5 menjadi ES6
## Objectives
- Mampu memanfaatkan ES6
- Mampu mengkonversi kode ES5 ke ES6
## Directions
1. Ubah semua kode JavaScript dibawah ini ke dalam ES5. (setiap kode satu file JavaScript)
### Tugas 1
Ubahlah seluruh `var` pada kode JavaScript dibawah ini menjadi `let` atau `const`!
```javascript
var phi = 3.14;
var power = 2;
var radius = 0;
var calculateArea = function (radius) {
return phi * Math.pow(radius, power);
}
radius = 21;
var area21 = calculateArea(radius);
radius = 7;
var area7 = calculateArea(radius);
console.log('area with 21 radius: ' + area21 + ', and area with 7 radius: ' + area7);
```
### Tugas 2
Ubahlah anonymous functions dibawah ini menjadi ES6 Arrow Function!
```javascript
const multiply = function (num1, num2) {
return num1 * num2;
}
const divide = function (num1, num2) {
return num1 / num2;
}
const doubleMe = function (num) {
return num * 2;
}
console.log(multiply(5,2));
console.log(divide(10,2));
```
================================================
FILE: modules/anchor-es6-functional.md
================================================
# Memanfaatkan Map, Filter, dan Reduce
## Objectives
- Mampu memanfaatkan Map, Filter, dan Reduce
## Directions
1. Selesaikan beberapa kasus dibawah ini menggunakan sintaks yang diminta!
### Tugas 1
Buatlah sebuah code yang mentransformasi array menggunakan `map`!
```javascript
var transformArrToLowerCase = arr => {
// Ubah setiap element array menjadi lowercase!
};
console.log(transformArrToLowerCase(['BUDI', 'MArNi', 'mukIDi'])); // ['budi', 'marni', 'mukidi']
```
### Tugas 2
Buatlah sebuah code yang melakukan filter ke array menggunakan `filter`!
```javascript
var filterArrUnder10 = arr => {
// Filter setiap element array yang nilainya dibawah 10, sisakan yang 10 ke atas!
};
console.log(filterArrUnder10([1, 5, 12, 15, 20])); // [12, 15, 20]
```
### Tugas 3
Buatlah sebuah code yang mendapatkan nilai terbesar menggunakan `reduce`!
```javascript
var reduceFindMaximum = arr => {
// kembalikan sebuah nilai yang mengandung angka terbesar dengan reduce!
}
console.log(reduceFindMaximum([5, 1, 7, 6, 9])); // 9
```
================================================
FILE: modules/anchor-es6-oop-start.md
================================================
# Membuat ES6 Class Sederhana
## Objectives
- Mampu memanfaatkan Class pada ES6 untuk membangun object JavaScript
## Directions
1. Ubah kasus dibawah ini ke dalam bentuk ES6 Class.
### Tugas
Buatlah sebuah Class Mobil, yang memiliki atribut berikut:
- Merek,
- Harga,
- Warna,
- Bensin, dan
- Jumlah Roda.
Class tersebut juga bisa memanggil function dengan proses sebagai berikut:
- tampilkanSpesifikasi: menampilkan melalui console.log merek, harga, warna, bensin, dan jumlah roda dengan format berikut:
"Mobil saya bermerek Hando dengan harga 300000000 rupiah, berwarna merah, bensinnya solar, dan beroda 4".
- jualMobil: menampilkan melalui console.log harga mobil yang dikurangi 20%.
================================================
FILE: modules/anchor-es6-oop.md
================================================
# Membuat ES6 Class Lanjutan
## Objectives
- Mampu memanfaatkan Class pada ES6 untuk membangun object JavaScript
## Directions
1. Ubah kasus dibawah ini ke dalam bentuk ES6 Class.
### Tugas
Buatlah sebuah Class Student, yang memiliki atribut berikut:
- Name,
- Age,
- Date of Birth,
- Gender
- Student ID (bisa berupa angka atau teks), dan
- Hobbies (bisa menampung lebih dari 1 hobi).
Class tersebut juga bisa memanggil fungsi dengan proses sebagai berikut:
- SetName: mengubah nama student dengan mengirimkan satu parameter ke dalam fungsi berupa teks
- SetAge: mengubah umur student dengan mengirimkan satu parameter ke dalam fungsi berupa angka
- SetDateOfBirth: mengubah tanggal lahir student dengan mengirimkan satu parameter ke dalam fungsi berupa teks
- SetGender: mengubah gender student dengan mengirimkan satu parameter ke dalam fungsi berupa teks, dan hanya bisa menerima nilai `Male` atau `Female`
- addHobby: menambah hobi dengan mengirimkan satu parameter ke dalam fungsi berupa teks
- removeHobby: menghapus list hobi yang ada dengan mengirimkan satu parameter berupa teks, yang merupakan hobi apa yang akan dihapus
- getData: menampilkan seluruh data atribut murid
================================================
FILE: modules/anchor-jquery.md
================================================
# Membuat Website yang Interaktif dengan JQuery
Kamu 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.
## Objectives
- Memahami event-handling dengan JQuery
- Memahami DOM Manipulation dengan JQuery
## Directions
- Unduh [file ini](assets/anchor-jquery.zip) untuk mulai mengembangkan website-mu.
- Pada file `index.html`, lengkapi konten halaman sesuai dengan perintah yang diberikan dan data yang kamu miliki.
- Kamu boleh memodifikasi file `style.css` sesuai dengan desain yang kamu inginkan.
- Secara *default*, desain halaman akan menjadi seperti contoh dibawah.
- Pada file `script.js`, lengkapi program JavaScript agar memiliki *behavior* yang sama seperti pada contoh dibawah.
- **Attention!** Kamu boleh menambah tapi tidak boleh mengurangi isi file.
- Apabila diinginkan, tambahkan konten dan *behavior* halaman website sesuai keinginanmu.
### Contoh Hasil Akhir
================================================
FILE: modules/anchor-js-dom-creation.md
================================================
# Menyusun Halaman HTML Dinamis di JavaScript
Setelah mengetahui tentang DOM selection dan manipulation serta DOM transversing, kita akan mencoba memanipulasi DOM kembali, tapi memanfaatkan penjelajahan DOM berdasarkan hubungan parent-child.
## Objectives
- Mengetahui Cara create DOM
- Mereview Cara menggunakan DOM Event
## Directions
- Buatlah suatu halaman HTML yang dinamis dibuat dari HTML "kosong" seperti berikut:
**index.html (Gunakan file index.html ini)**
```html
<html>
<head>
<title>Tugas Anchor DOM!</title>
</head>
<body>
<div id="main">
</div>
<script src="script.js"></script>
</body>
</html>
```
Dan dengan teknik `createElement`, susunlah dengan dinamis menggunakan **script.js** untuk menjadikan HTML menjadi seperti di bawah ini:
**HASIL AKHIR**
```html
<html>
<head>
<title>Tugas Anchor DOM!</title>
</head>
<body>
<div id="main">
<div id="content">
<div class="content-post">
<h1>Judul Post</h1>
<span>Published on 12 May 2016</span>
<p>
Lorem Ipsum Dolor Sit Amet
</p>
<button class="share-post-btn">Share this Post</button>
</div>
<div class="content-post">
<h1>Judul Post 2</h1>
<span>Published on 13 May 2016</span>
<p>
Lorem Ipsum Dolor Sit Amet
</p>
<button class="share-post-btn">Share this Post</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
Note: `<button class="share-post-btn">` apabila di click, harus meng-alert 'You have shared this post'!
- Buatlah sebuah **script.js** yang berada relatif di sebelah index.html. Dengan memanfaatkan (dan tidak terbatas pada) `createElement()`, `createAttribute()`, `setAttribute()`, `createTextNode()`, `addEventListener()`, `alert()`, dan `appendChild()`, buat perubahan berikut di file **script.js** untuk memanipulasi halaman HTML dan membuat layout seperti contoh hasil akhir di atas!
================================================
FILE: modules/anchor-js-dom-manipulation.md
================================================
#Manipulasi DOM Sederhana dengan JavaScript
Setelah mengetahui tentang DOM selection dan manipulation, kita akan coba berlatih tentang ini.
## Objectives
- Mengerti Tentang DOM
- Mengetahui Cara Menseleksi DOM
- Mengetahui Cara Memanipulasi DOM
## Directions
- Buatlah suatu halaman HTML seperti berikut:
**index.html**
```html
<html>
<head>
<title>Tugas Anchor DOM!</title>
</head>
<body>
<div id="container">
<h1 id="fill-me"></h1>
<p class="change-all-of-me"></p>
<p class="change-all-of-me"></p>
<p class="change-all-of-me"></p>
<p class="change-all-of-me"></p>
<h2>Change the Inside of H2!</h2>
</div>
<script src="script.js"></script>
</body>
</html>
```
- Buatlah sebuah **script.js** yang berada relatif di sebelah index.html. Dengan memanfaatkan `getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`, `innerHTML()`, dan teknik looping, buat perubahan berikut di file **script.js** untuk memanipulasi halaman HTML kita:
- `<h1 id="fill-me"></h1>` menjadi `<h1 id="fill-me">HALO!</h1>`
- `<p className="change-all-of-me"></p>` menjadi `<p className="change-all-of-me">HALO JUGA!</p>`
- `<h2>Change the Inside of H2!</h2>` menjadi `<h2>Apa Kabar!</h2>`
================================================
FILE: modules/anchor-js-dom-transverse-manipulation.md
================================================
# Manipulasi DOM Sederhana dengan DOM Transversing di JavaScript
Setelah mengetahui tentang DOM selection dan manipulation serta DOM transversing, kita akan mencoba memanipulasi DOM kembali, tapi memanfaatkan penjelajahan DOM berdasarkan hubungan parent-child.
## Objectives
- Mengetahui Cara Menjelajah DOM
- Mengetahui Cara Memanipulasi DOM yang Dijelajahi
## Directions
- Buatlah suatu halaman HTML seperti berikut:
**index.html**
```html
<html>
<head>
<title>Tugas Anchor DOM!</title>
</head>
<body>
<div id="eldest-parent">
<div>
Saya Adalah Keturunan Pertama
</div>
<div>
<div>
<div>Saya adalah Generasi Termuda, yang paling Tua</div>
<div id="a-child"></div>
<div>Saya adalah Generasi Termuda, yang Paling Muda</div>
</div>
</div>
<div>
Saya adalah Generasi yang Cukup Tua
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
- Buatlah sebuah **script.js** yang berada relatif di sebelah index.html. Dengan memanfaatkan `children`, `parentNode`, `nextElementSibling`, `previousElementSibling`, dan `innerHTML()`, buat perubahan berikut di file **script.js** untuk memanipulasi halaman HTML kita dan mengubah nilai berikut dengan mengakses `<div>` yang sesuai:
- `<div>Saya Adalah Keturunan Pertama</div>` menjadi `<div>Diakses Melalui Eldest Parent</div>`
- `<div>Saya adalah Generasi Termuda, yang paling Tua</div>` menjadi `<div>Diakses Melalui a Child</div>`
- `<div>Saya adalah Generasi Termuda, yang Paling Muda</div>` menjadi `<div>Diakses Melalui a Child</div>`
- `<div>Saya adalah Generasi yang Cukup Tua</div>` menjadi `<div>Diakses Melalui a Child</div>`
================================================
FILE: modules/anchor-js-dom-web-app.md
================================================
#Berkreasi Membuat Web App dengan Memanfaatkan DOM
Setelah satu pekan kita menguasai DOM menggunakan JavaScript, saatnya kita berkreasi membuat aplikasi web yang interaktif!
## Objectives
- Menguasai DOM pada JavaScript
## Directions
- Buatlah web app dengan ide dan kreativitas kamu, bisa berupa game, todo-list app, quiz, dan lain-lain dengan memanfaatkan DOM.
- Penggunaan sintaks tidak dibatasi! Sepenuhnya akan menjadi kreativitasmu!
- Setelah selesai, **taruh project ini di Github dan jadikan Github Pages baru** supaya semua orang bisa melihat aplikasi atau game yang kamu buat!
**TIPS**
Apabila kamu mau kode-mu lebih rapih dan terfokus ke komponen masing-masing, kamu bisa memisahkan script js nya seperti berikut:
**index.html**
```html
<html>
<head>
<title>Bisa Kamu Ubah Sendiri</title>
</head>
<body>
<script src="script-main.js"></script>
<script src="script-menu.js"></script>
<script src="script-characters.js"></script>
...
</body>
</html>
```
Ini merupakan tugas akhir dari Week 5. Mudah, bukan? Tapi disini kamu diberikan keleluasaan untuk berkreasi, karena ini bisa juga menjadi portfolio kamu!
================================================
FILE: modules/anchor-js-form-validation.md
================================================
# Form Validation Sederhana dengan JavaScript
Setelah mengetahui tentang DOM kamu dapat menggunakan pengetahuan itu untuk melakukan banyak hal dalam web development, contohnya adalah Form Validation. Form validation dilakukan untuk memastikan input dari user sudah benar sebelum dikirimkan ke server. Untuk melatih pemahaman kamu tentang DOM, kerjakan tantangan ini dengan baik. Untuk saat ini kamu tidak perlu memikirkan cara mengirimkan data ke server.
## Objectives
- Mengerti Tentang DOM
- Mengetahui Cara Mengambil Data DOM
- Mengetahui Cara Menggunakan `document.getElementById()` dan event `onsubmit`
## Directions
- Buatlah suatu halaman HTML yang berisikan elemen input form `text`, `password`, dan `email` yang berfungsi seperti halaman registrasi sederhana. Lihat gambar di bawah sebagai contoh.
- Kamu boleh membuat style sesuai yang kamu inginkan. Namun jumlah element dan susunan harus sama dengan contoh.
- Buatlah sebuah fungsi JavaScript. Fungsi dipanggil dengan menambahkan event listener `submit` pada `<form>`. Function ini berfungsi untuk meng-handle input user dengan peraturan sebagai berikut:
- Semua elemen tidak boleh kosong
- Password dan Confirm Password harus sama
- Email dan Email Confirm harus sama
- Pastikan form tidak men-submit data ketika validasi gagal. Untuk melakukan ini, apabila validasi gagal, gunakan `return false` di dalam fungsi yang kamu buat.
```HTML
<form action="#" id="main-form">
...
</form>
```
- Kamu boleh menambahkan aturan tambahan saat validasi. Misal, jumlah karakter username minimal 6 atau password harus terdiri dari huruf dan angka.
- Untuk melihat demo dari aplikasi yang selesai dibuat, perhatikan animasi di bawah ini.
### Tips
- Ketika membuat form, jangan lupa untuk menuliskan atribut `value` tanpa perlu menentukan nilainya.
- Untuk mendapatkan value dari DOM input panggil property `value` dan anggap `document.getElementById()` mengembalikan object.
================================================
FILE: modules/anchor-js-object-literal.md
================================================
# Menggunakan Object Literal
## Objectives
1. Mengerti Cara Membuat Object dengan Object literal
## Directions
Merujuk ke soal [Menyusun Class ES6 Lanjutan](/modules/anchor-es6-oop.md), buatlah object dengan object literal dengan bentuk yang serupa dengan object yang dibuat oleh class yang kita buat di tugas tersebut!
================================================
FILE: modules/anchor-json.md
================================================
# Menggunakan JSON
Setelah mengetahui cara membuat object menggunakan `function()`, kamu juga perlu mengetahui mengenai JSON. Format JSON akan sangat sering kamu temui saat mengembangkan aplikasi menggunakan JavaScript. Untuk melatih pemahamanmu tentang JSON, kerjakanlah tantangan ini dengan baik.
## Objectives
- Mengetahui Cara Membuat Object dengan JSON
- Memahami Konsep Object pada JavaScript
## Directions
- Buatlah 3 buah Object secara JSON dengan struktur seperti ini:
```javascript
var Human1 = {
nama: '',
hari: '',
kehadiran: '',
alasan: ''
}
```
- Isikan ketiga Object tersebut dengan data pada tabel di bawah:
Nama | Hari | Kehadiran | Alasan
---|---|---|---
Tono | Senin | Masuk |
Tono | Rabu | Masuk |
Tono | Jumat | Absen | Dinas Luar
- Masukan ketiga Object tersebut pada sebuah array
- Buatlah sebuah iterasi yang sebanyak jumlah item di dalam array yang berisi ketiga Object.
- Akses setiap Object seperti ketika mengakses sebuah nilai sebuah array.
- Akses property `nama` , `hari` dan `kehadiran` di dalam object
```javascript
//contoh
Array[index].objectProperty;
```
- Dari dalam iterasi, tampilkan informasi seperti berikut:
```
Nama: Tono
Hari: senin
Kehadiran: masuk
Nama: Tono
Hari: rabu
Kehadiran: masuk
Nama: Tono
Hari: jumat
Kehadiran: absen
Alasan: dinas luar
```
- Hitung jumlah hari kerja, jumlah hari masuk, dan jumlah hari absen. Tampilkan informasinya seperti berikut:
```
Total hari kerja minggu ini: 3 hari
Total Masuk: 2 hari
Total Tidak Masuk: 1 hari
```
================================================
FILE: modules/anchor-laman-web-pertamaku.md
================================================
# Laman Web Pertamaku
## Objectives
Setelah mempelajari dasar-dasar HTML, kamu ditantang untuk membuat sebuah laman html sendiri menggunakan *tags* yang telah kamu pelajari. Laman pertama ini akan digunakan untuk tugas-tugas selanjutnya, pastikan kamu mengerjakannya dengan baik.
## Directions
### 1. Membuat File HTML - Index Page
Buatlah sebuah file HTML baru dengan nama **index** dengan format **html**.
- [Kenapa harus index.html ?](https://www.quora.com/Why-is-the-default-html-file-called-index-html)
Buatlah *index.html* tersebut dengan tampilan seperti gambar di bawah ini:
Berikan sebuah link untuk masuk ke halaman Form Sign Up! (diarahkan ke *form.html*)
### 2. Membuat File HTML ke 2 - Form Page
Buatlah file HTML kedua yang berisikan form dengan tampilan seperti gambar di bawah ini:
Apabila form di submit, browser harus diarahkan untuk membuka *welcome.html*.
### 3. Membuat File HTML ke 3 - Welcome Page
Buatlah file HTML ketiga bernama *welcome.html* dengan tampilan seperti gambar di bawah ini:
### 4. Hasil Akhir
Apabila seluruh tautan/link telah berfungsi dengan baik, harusnya web telah bekerja seperti berikut,
jika dibuka dari *index.html*.
================================================
FILE: modules/anchor-loop-array.md
================================================
# Melakukan Looping Data Array
Sering kali data yang diterima dari database adalah array yang multidimensi (array di dalam array). Sebagai developer, tugas kita adalah mengolah data tersebut agar dapat menampilkan informasi yang diinginkan.
## Objectives
- Mengenal Array Multidimensi
- Mengerti Cara Mengakses Nilai Array Multidimensi
## Directions
Buatlah sebuah fungsi dengan nama `dataHandling` dengan sebuah parameter untuk menerima argumen. Argumen yang akan diterima adalah sebuah array yang berisi beberapa array sejumlah **n**. Contoh input dapat dilihat dibawah:
```javascript
//contoh input
var input = [
["0001", "Roman Alamsyah", "Bandar Lampung", "21/05/1989", "Membaca"],
["0002", "Dika Sembiring", "Medan", "10/10/1992", "Bermain Gitar"],
["0003", "Winona", "Ambon", "25/12/1965", "Memasak"],
["0004", "Bintang Senjaya", "Martapura", "6/4/1970", "Berkebun"]
]
```
Tugas kamu adalah mengimplementasikan fungsi `dataHandling` agar dapat menampilkan data-data pada dari argumen seperti di bawah ini:
```
Nomor ID: 0001
Nama Lengkap: Roman Alamsyah
TTL: Bandar Lampung 21/05/1989
Hobi: Membaca
Nomor ID: 0002
Nama Lengkap: Dika Sembiring
TTL: Medan 10/10/1992
Hobi: Bermain Gitar
Nomor ID: 0003
Nama Lengkap: Winona
TTL: Ambon 25/12/1965
Hobi: Memasak
Nomor ID: 0004
Nama Lengkap: Bintang Senjaya
TTL: Martapura 6/4/1970
Hobi: Berkebun
```
================================================
FILE: modules/anchor-main-loop-asterisks.md
================================================
# Looping
Soal looping - asterisk ini memiliki 3 nomor.
## 1. Menyusun Barisan Bintang
### Problem
Pada tugas ini kamu diminta untuk melakukan looping dalam JavaScript untuk menampilkan di console barisan asterisks (bintang). Setiap baris memiliki 1 simbol '*'.
### Skeleton Code
```javascript
var rows1; // input the number of rows
// do loops to display asterisks in the console.
```
### Output
jika rows1 = 5
```
*
*
*
*
*
```
## 2. Menyusun Barisan Bintang Dengan Nested Looping
### Problem
Pada tugas ini kamu diminta untuk melakukan looping dalam JavaScript untuk menampilkan di console barisan asterisks (bintang). Setiap baris memiliki jumlah simbol '*' sesuai dengan jumlah baris. Manfaatkan **nested loop** atau loop di dalam loop untuk menyelesaikan kasus ini.
### Skeleton Code
```javascript
var rows2; // input the number of rows
// do loops to display asterisks in the console.
```
### Output
jika rows2 = 5
```
*****
*****
*****
*****
*****
```
## 3. Menyusun Barisan Tangga Bintang Dengan Nested Looping
### Problem
Pada tugas ini kamu diminta untuk melakukan looping dalam JavaScript untuk menampilkan di console barisan asterisks (bintang) dalam bentuk tangga. Setiap baris memiliki jumlah simbol '*' sesuai dengan nomor baris. Baris pertama, hanya ada satu bintang. Baris kedua, dua bintang, baris ketiga tiga bintang, dan seterusnya. Manfaatkan **nested loop** atau loop di dalam loop untuk menyelesaikan kasus ini.
### Skeleton Code
```javascript
var rows3; // input the number of rows
// do loops to display asterisks in the console.
```
### Output
jika rows3 = 5
```
*
**
***
****
*****
```
================================================
FILE: modules/anchor-main-loop.md
================================================
# Looping
Soal looping ini memiliki 3 nomor.
## 1. Melakukan *Looping* Menggunakan `While`
### Problem
Pada 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'.
### Output
```
LOOPING PERTAMA
2 - I love coding
4 - I love coding
6 - I love coding
8 - I love coding
10 - I love coding
12 - I love coding
14 - I love coding
16 - I love coding
18 - I love coding
20 - I love coding
LOOPING KEDUA
20 - I will become fullstack developer
18 - I will become fullstack developer
16 - I will become fullstack developer
14 - I will become fullstack developer
12 - I will become fullstack developer
10 - I will become fullstack developer
8 - I will become fullstack developer
6 - I will become fullstack developer
4 - I will become fullstack developer
2 - I will become fullstack developer
```
## 2. Melakukan *Looping* Menggunakan `For`
### Problem
Pada 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'.
### Hints
> Operator `++` disebut dengan operator *Increment*
> Operator `--` disebut dengan operator *Decrement*
### Output
```
LOOPING PERTAMA
1 - I love coding
2 - I love coding
3 - I love coding
4 - I love coding
5 - I love coding
6 - I love coding
7 - I love coding
8 - I love coding
9 - I love coding
10 - I love coding
11 - I love coding
12 - I love coding
13 - I love coding
14 - I love coding
15 - I love coding
16 - I love coding
17 - I love coding
18 - I love coding
19 - I love coding
20 - I love coding
LOOPING KEDUA
20 - I will become fullstack developer
19 - I will become fullstack developer
18 - I will become fullstack developer
17 - I will become fullstack developer
16 - I will become fullstack developer
15 - I will become fullstack developer
14 - I will become fullstack developer
13 - I will become fullstack developer
12 - I will become fullstack developer
11 - I will become fullstack developer
10 - I will become fullstack developer
9 - I will become fullstack developer
8 - I will become fullstack developer
7 - I will become fullstack developer
6 - I will become fullstack developer
5 - I will become fullstack developer
4 - I will become fullstack developer
3 - I will become fullstack developer
2 - I will become fullstack developer
1 - I will become fullstack developer
```
## 3. Angka Ganjil dan Genap
Hint: kamu akan menggunakan kondisional juga di kasus ini.
### Problem
1. Buatlah sebuah perulangan 1 - 100 dengan pertambahan *counter* sebanyak 1
2. Di dalam perulangan, periksa setiap angka *counter*:
- Apabila angka *counter* adalah angka genap, tuliskan **GENAP**
- Apabila angka *counter* adalah angka ganjil, tuliskan **GANJIL**
3. Buatlah 3 perulangan baru dari 1 - 100, dengan pertambahan *counter* sebesar 2, 5, dan 9.
4. Pada 3 perulangan baru ini periksa setiap angka *counter*:
- Apabila bukan kelipatan yang ditentukan tidak perlu menuliskan apa-apa
- Apabila angka *counter* adalah kelipatan 3 dengan pertambahan 2, kelipatan 6 dengan pertambahan 5, dan kelipatan 10 dengan pertambahan 9, tuliskan:
- `"3 kelipatan 3"` dan seterusnya.
### output
```javascript
//contoh - ganjil genap
//counter sekarang = 1,
//output
"GANJIL"
//counter sekarang = 2,
//output
"GENAP"
// dan seterusnya :)
//contoh - untuk pertambahan counter 2
//counter sekarang = 1,
//output
""
//counter sekarang = 3,
//output
"3 KELIPATAN 3"
// dan seterusnya :)
//contoh - untuk pertambahan counter 5
//counter sekarang = 1,
//output
""
//counter sekarang = 6,
//output
"6 KELIPATAN 6"
// dan seterusnya :)
//contoh - untuk pertambahan counter 9
//counter sekarang = 1,
//output
""
//counter sekarang = 10,
//output
"10 KELIPATAN 10"
// dan seterusnya :)
```
================================================
FILE: modules/anchor-main-string.md
================================================
# String
Soal latihan string ini memiliki 4 nomor. Simpan di 1 file yang sama!
## 1. Let's Form a Sentence
### Problem
Pada tugas ini kamu diminta untuk melakukan penambahan string menggunakan simbol +. Disediakan variable word. Tambahkan nilai word satu per satu dengan nilai variable lain untuk membentuk sebuah kalimat. Jangan lupa menambahkan spasi di setiap kata, dan tampilkan di console hasil penggabungannya! **Kamu tidak perlu membuat variable baru!**
### Skeleton Code
```javascript
var word = 'JavaScript';
var second = 'is';
var third = 'awesome';
var fourth = 'and';
var fifth = 'I';
var sixth = 'love';
var seventh = 'it!';
```
### Output
```
JavaScript is awesome and I love it!
```
## 2. Index Accessing - 1 by 1
### Problem
Pada tugas ini kamu diminta untuk "memecah" sebuah kalimat dan menampilkan setiap kata didalamnya. Untuk soal nomor ini, gunakan akses satu per satu karakter dari string untuk mengambil setiap huruf dalam kata. Terasa manual? Tidak apa-apa, kita coba ini dulu untuk saat ini.
### Hints
Saat kamu mendapatkan tiap huruf, untuk membentuk setiap kata kamu tinggal menggunakan simbol + untuk membentuk kata tersebut!
### Skeleton Code
```javascript
var word = 'wow JavaScript is so cool';
var exampleFirstWord = word[0] + word[1] + word[2];
var secondWord; // do your own!
var thirdWord; // do your own!
var fourthWord; // do your own!
var fifthWord; // do your own!
console.log('First Word: ' + exampleFirstWord);
console.log('Second Word: ' + secondWord);
console.log('Third Word: ' + thirdWord);
console.log('Fourth Word: ' + fourthWord);
console.log('Fifth Word: ' + fifthWord);
```
### Output
```
First Word: wow
Second Word: JavaScript
Third Word: is
Fourth Word: so
Fifth Word: cool
```
## 3. Breaking Sentence (Again) using Substring
### Problem
Mirip seperti soal nomor 2, namun kali ini gunakan substring untuk mengambil potongan dari tiap kata!
### Skeleton Code
```javascript
var word3 = 'wow JavaScript is so cool';
var exampleFirstWord3 = word.substring(0, 3);
var secondWord3; // do your own!
var thirdWord3; // do your own!
var fourthWord3; // do your own!
var fifthWord3; // do your own!
console.log('First Word: ' + exampleFirstWord);
console.log('Second Word: ' + secondWord);
console.log('Third Word: ' + thirdWord);
console.log('Fourth Word: ' + fourthWord);
console.log('Fifth Word: ' + fifthWord);
```
### Output
```
First Word: wow
Second Word: JavaScript
Third Word: is
Fourth Word: so
Fifth Word: cool
```
## 4. Breaking Sentence (yet Again) and Count Each Length
### Problem
Mirip seperti soal nomor 3, tapi tampilkan juga panjang kata masing-masingnya!
### Skeleton Code
Buatlah variable-variable baru untuk menyimpan panjang string, dan ubah console dibawah untuk menampilkan nya.
```javascript
var word4 = 'wow JavaScript is so cool';
var exampleFirstWord4 = word.substring(0, 3);
var secondWord4; // do your own!
var thirdWord4; // do your own!
var fourthWord4; // do your own!
var fifthWord4; // do your own!
var firstWordLength = exampleFirstWord4.length;
// create new variables around here
console.log('First Word: ' + exampleFirstWord + ', with length: ' + firstWordLength);
console.log('Second Word: ' + secondWord);
console.log('Third Word: ' + thirdWord);
console.log('Fourth Word: ' + fourthWord);
console.log('Fifth Word: ' + fifthWord);
```
### Output
```
First Word: wow, with length: 3
Second Word: JavaScript, with length: 10
Third Word: is, with length: 2
Fourth Word: so, with length: 2
Fifth Word: cool, with length: 4
```
================================================
FILE: modules/anchor-menggunakan-if-else-2.md
================================================
# 4. Menggunakan If Else 2
## Objectives
* Mengerti Cara Menggunakan *Nested* `If-Else`
* Mengerti Logika *Nested* `If-Else`
* Mengerti Cara Menggunakan Operator Evaluasi `>`, `<`, `<=`, `>=`
## Directions
Game kamu semakin terkenal dan semakin banyak yang memainkan. Sayangnya semakin banyak anak kecil dan orang tua yang bermain, membuat pemain muda menjadi tidak nyaman. Oleh karena itu kamu harus mengimplementasikan mekanisme untuk mengecek variabel `umur`. Selain itu, diperlukan perubahan alur logika agar permainan menjadi lebih nyaman. Perhatikan *flowchart diagram* di bawah untuk alur program yang baru dan implementasikan ke dalam kode!
### Hints
> * Variabel tetap di-input secara manual.
> * Tambahkan variabel `umur`
================================================
FILE: modules/anchor-menggunakan-if-else.md
================================================
# Menggunakan If Else
## Objectives
* Mengerti Cara Menggunakan `If-Else`
* Mengerti Logika `If-Else`
* Mengerti Cara Menggunakan Operator Evaluasi `===`, `!==`
## Directions
Kamu diminta untuk memprogram suatu game sederhana, Proxytia namanya. Untuk memulai game itu diperlukan 2 variabel (untuk sekarang), yaitu `nama` dan `peran`. Variabel `peran` harus memiliki isi data, bila kosong pemain akan diberikan peringatan berupa "Pilih Peranmu untuk memulai game". Terdapat 3 `peran` berbeda yaitu **Ksatria**, **Tabib**, dan **Penyihir**. Tugas Anda adalah untuk membuat program yang mengecek isi variabel `peran` serta mengeluarkan respon sesuai isi variabel tersebut.
### Hints
* Variabel tetap di-input secara manual.
* Variabel `nama` dan `peran` dapat diisi apa saja.
* Nama tidak perlu dicek sama persis seperti contoh input/output
* Buat `If-Else` berbeda masing-masing untuk mengecek `peran`
### Input
```javascript
//Contoh input
var nama = 'Mikael';
var peran = '';
```
Silakan ganti nilai nama dan peran untuk mengetes kondisi!
### Output
```javascript
// Output untuk Input nama = '' dan peran = ''
"Nama harus diisi!"
//Output untuk Input nama = 'Mikael' dan peran = ''
"Halo Mikael, Pilih peranmu untuk memulai game!"
//Output untuk Input nama = 'Nina' dan peran 'Ksatria'
"Selamat datang di Dunia Proxytia, Nina"
"Halo Ksatria Nina, kamu dapat menyerang dengan senjatamu!"
//Output untuk Input nama = 'Danu' dan peran 'Tabib'
"Selamat datang di Dunia Proxytia, Danu"
"Halo Tabib Danu, kamu akan membantu temanmu yang terluka."
//Output untuk Input nama = 'Zero' dan peran 'Penyihir'
"Selamat datang di Dunia Proxytia, Zero"
"Halo Penyihir Zero, ciptakan keajaiban yang membantu kemenanganmu!"
```
================================================
FILE: modules/anchor-mixed-array.md
================================================
# Menggunakan Built-in Function pada Array
Array pada JavaScript memiliki sekumpulan *built-in function* yang digunakan untuk mempermudah developer untuk mengolah data di dalamnya. Beberapa fungsi yang sering digunakan antara lain `join`, `split`, `slice`, `splice`, dan `sort`. Kerjakanlah tantangan ini untuk memperkuat pengertian kamu tentang *built-in function* tersebut.
## Objectives
- Mengerti Kegunaan dari *Built-in Function* yang dimiliki Array
- Mampu Menggunakan *Built-in Function* yang dimiliki Array
## Directions
```javascript
//contoh output
["0001", "Roman Alamsyah", "Bandar Lampung", "21/05/1989", "Membaca"]
```
- Buatlah sebuah _function_ dengan nama `dataHandling2` yang akan menerima input array seperti di atas.
- Gunakan fungsi `splice` untuk memodifikasi variabel tersebut agar menjadi seperti array dibawah. Lalu `console.log` array yang baru seperti di bawah.
```javascript
["0001", "Roman Alamsyah Elsharawy", "Provinsi Bandar Lampung", "21/05/1989", "Pria", "SMA Internasional Metro"]
```
- Berdasarkan elemen yang berisikan tanggal/bulan/tahun (elemen ke-4), ambil angka bulan dan `console.log` nama bulan sesuai dengan angka tersebut.
- Gunakan `split` untuk memisahkan antara tanggal, bulan, dan tahun.
- Format tanggal pada data adalah **dd-mm-YYYY**
- Misal angka bulan 01, tuliskan "Januari"
- Gunakan `switch case` untuk menuliskan bulan di atas.
- Pada array hasil `split` dari tanggal/bulan/tahun, lakukan *sorting* secara *descending* dan `console.log` array yang sudah di-sort.
- Masih pada array hasil `split` dari elemen tanggal/bulan/tahun, gabungkan semua elemen menggunakan `join` dan pisahkan dengan karakter strip (-) lalu `console.log` hasilnya.
- Nama (elemen ke-2), harus dibatasi sebanyak 15 karakter saja. Gunakan `slice` untuk menghapus kelebihan karakter dan `console.log` nama yang sudah di-slice, sebelum di-slice pastikan Nama (elemen ke-2) sudah dalam bentuk `String` agar bisa di-slice.
### Test-case
Untuk memastikan program kamu sudah bekerja dengan benar, gunakan *test-case* dibawah.
```javascript
var input = ["0001", "Roman Alamsyah ", "Bandar Lampung", "21/05/1989", "Membaca"];
dataHandling2(input);
/**
* keluaran yang diharapkan (pada console)
*
* ["0001", "Roman Alamsyah Elsharawy", "Provinsi Bandar Lampung", "21/05/1989", "Pria", "SMA Internasional Metro"]
* Mei
* ["1989", "21", "05"]
* 21-05-1989
* Roman Alamsyah
*/
```
================================================
FILE: modules/anchor-object-1.md
================================================
# Menggunakan Object dalam JavaScript 1
JavaScript mendukung konsep pemrograman berorientasi objek. Untuk melatih pemahaman kamu tentang Object pada JavaScript, kerjakanlah tantangan ini dengan baik :smile:
## Objectives
1. Mengerti Cara Membuat Object dengan Syntax `function()`
2. Mengerti Cara Mengakses Property dalam Object
3. Mengerti Cara *Assignment* Property dalam Object
4. Mengerti Tentang Method di dalam Object
## Directions
- Buatlah sebuah object **Mobil** seperti contoh di bawah ini
```javascript
var Mobil = function() {
}
```
- **Mobil** menerima parameter `pabrikan`, `model`, dan `warna`.
- Simpan parameter-parameter tersebut pada *property* dengan nama yang sama
- hint: `this`
- Buatlah sebuah method di dalam **Mobil** dengan nama `maju()`. Method ini menuliskan seperti yang dicontohkan dibawah.
- hint: gunakan property dari object
```javascript
var mobilku = new Mobil('Tesla', 'Ludicrous', 'Merah');
mobilku.maju();
//output: Mobil Tesla Ludicrous Merah , bergerak maju!
```
- Di akhir kodemu, uji coba dengan meletakkan potongan kode berikut
```javascript
var mobil1 = new Mobil('Honda', 'Accord', 'Hitam');
var mobil2 = new Mobil('Honda', 'Civic', 'Silver');
console.log('Mobil 1 adalah ' + mobil1.pabrikan + ' ' + mobil1.model + ' ' + mobil1.warna);
mobil1.maju();
mobil1.warna = 'Silver';
mobil1.maju();
console.log('Mobil 2 adalah ' + mobil2.pabrikan + ' ' + mobil2.model + ' ' + mobil2.warna);
mobil2.maju();
```
- Apabila keluaran dari program-mu seperti di bawah ini, selamat! kamu sudah menyelesaikan tantangan ini dengan baik :smile:
```
Mobil 1 adalah Honda Accord Hitam
Mobil Honda Accord Hitam , bergerak maju!
Mobil Honda Accord Silver , bergerak maju!
Mobil 2 adalah Honda Civic Silver
Mobil Honda Civic Silver , bergerak maju!
```
### Important Keywords
- Property: variabel di dalam Object
- Method: function di dalam Object
================================================
FILE: modules/anchor-object-2.md
================================================
# Menggunakan Object dalam JavaScript 2
Terkadang suatu method dari object tidak menerima parameter berupa data biasa, object juga dapat dijadikan argumen untuk method (atau function biasa). Pada tantangan ini kamu akan membuat suatu object untuk semacam permainan peran (role play game) sederhana. Object akan memiliki method yang menerima object.
## Objectives
1. Memahami Cara Membuat Object dengan Syntax `function()`
2. Memahami Cara Mengakses Property dalam Object
3. Memahami Cara *Assignment* Property dalam
4. Memahami Cara Membuat Method untuk Object
5. Mengetahui Passing Argument Berupa Object
## Directions
- Buatlah sebuah object **Teman** seperti contoh di bawah ini
```javascript
var Teman = function() {
}
```
- **Teman** menerima parameter `nama`, `kabar`, dan `pekerjaan`.
- Simpan parameter-parameter tersebut pada *property* dengan nama yang sama
- Buatlah method `sapa()`, method ini menerima parameter string nama dan akan menuliskan
> Halo `<parameter>` , apa kabar?
- Buatlah method `balasSapa()`, method ini menerima parameter string nama dan akan menuliskan
> Halo `<parameter>` , kabarku `<property kabar>`
- Buatlah method `tanyaPekerjaan()`, method ini tidak menerima parameter dan akan menuliskan
> Apa pekerjaanmu saat ini?
- Buatlah method `balasPekerjaan()`, method ini tidak menerima parameter dan akan menuliskan
> Pekerjaanku saat ini adalah `<property pekerjaan>`
- Terakhir, buatlah method `berpisah()`, method ini menerima parameter berupa Object Teman dan akan menuliskan
> Senang bertemu denganmu `<parameterObject.nama>` , semoga kamu sukses sebagai `<parameterObject.pekerjaan>`
- Untuk menguji kebenaran implementasi object-mu, gunakan **test case** di bawah dengan cara menambahkannya diakhir program. Apabila keluaran program-mu seperti **output**, selamat! kamu sudah menyelesaikan tantangan ini dengan baik! :smile:
### Test Case
```javascript
var budi = new Teman('Budi', 'baik', 'developer');
var tono = new Teman('Tono', 'baik', 'chef');
budi.sapa(tono.nama);
tono.balasSapa(budi.nama);
budi.tanyaPekerjaan();
tono.balasPekerjaan();
budi.berpisah(tono);
```
### Output
```
Halo Tono, apa kabar?
Halo Budi, kabarku baik
Apa pekerjaanmu saat ini?
Pekerjaanku saat ini adalah chef
Senang bertemu denganmu Tono, semoga kamu sukses sebagai chef
```
================================================
FILE: modules/anchor-oop-1.md
================================================
# Menggunakan OOP dalam JavaScript 1
JavaScript mendukung konsep pemrograman berorientasi objek. Untuk melatih pemahaman kamu tentang Object pada JavaScript, kerjakanlah tantangan ini dengan baik :smile:
## Objectives
1. Mengerti Cara Membuat Class dengan Syntax `Class`
2. Mengerti Cara Membuat Object, sebuah instance dari Class dengan Syntax `new`
3. Mengerti Cara Mengakses Property dalam Object
4. Mengerti Cara *Assignment* Property dalam Object
5. Mengerti Tentang Method di dalam Object
## Directions
- Buatlah sebuah class **Mobil** seperti contoh di bawah ini
```javascript
class Mobil {
}
```
- **Mobil** menerima parameter `merek`, `model`, dan `warna`.
- Simpan parameter-parameter tersebut pada *property* dengan nama yang sama
- hint: `this`
- Buatlah sebuah method di dalam **Mobil** dengan nama `maju()`. Method ini menuliskan seperti yang dicontohkan dibawah.
- hint: gunakan property dari object
```javascript
var mobilku = new Mobil('Tesla', 'Ludicrous', 'Merah');
mobilku.maju();
//output: Mobil Tesla Ludicrous Merah , bergerak maju!
```
- Di akhir kodemu, uji coba dengan meletakkan potongan kode berikut
```javascript
var mobil1 = new Mobil('Honda', 'Accord', 'Hitam');
var mobil2 = new Mobil('Honda', 'Civic', 'Silver');
console.log('Mobil 1 adalah ' + mobil1.pabrikan + ' ' + mobil1.model + ' ' + mobil1.warna);
mobil1.maju();
mobil1.warna = 'Silver';
mobil1.maju();
console.log('Mobil 2 adalah ' + mobil2.pabrikan + ' ' + mobil2.model + ' ' + mobil2.warna);
mobil2.maju();
```
- Apabila keluaran dari program-mu seperti di bawah ini, selamat! kamu sudah menyelesaikan tantangan ini dengan baik :smile:
```
Mobil 1 adalah Honda Accord Hitam
Mobil Honda Accord Hitam , bergerak maju!
Mobil Honda Accord Silver , bergerak maju!
Mobil 2 adalah Honda Civic Silver
Mobil Honda Civic Silver , bergerak maju!
```
### Important Keywords
- Property: variabel di dalam Object
- Method: function di dalam Object
================================================
FILE: modules/anchor-pseudocode.md
================================================
# Mengubah Psedocode Menjadi Kode JavaScript
## Objectives
- Mampu mengartikan pseudocode ke dalam program
## Directions
1. Ubah semua pseudocode di bawah ke dalam JavaScript (setiap pseudocode satu file JavaScript)
2. Kebenaran solusi bukan keluaran, tapi kode yang sesuai dengan pseudocode
### Tugas 1
```
SIMPAN 'nama'
SIMPAN 'angka pembilang'
SIMPAN 'angka penyebut'
HITUNG 'hasil bagi' dari 'angka pembilang' dibagi 'angka penyebut'
TULISKAN "Halo 'nama', 'angka pembilang' dibagi 'angka penyebut' adalah sama dengan 'hasil bagi'
```
### Tugas 2
```
SIMPAN 'alas' dari segitiga
SIMPAN 'tinggi' dari segitiga
HITUNG 'luas segitiga' dari 'alas' dikali 'tinggi' dibagi 2
TULISKAN "Luas Segitiga: 'luas segitiga'"
```
### Tugas 3
```
MASUKKAN sebuah tahun pada `tahun`
IF `tahun` habis dibagi 4 THEN:
IF `tahun` tidak habis dibagi 100 THEN:
TULISKAN "`tahun` adalah tahun kabisat"
ELSE:
IF `tahun` habis dibagi 400 THEN:
TULISKAN "`tahun` adalah tahun kabisat"
ELSE:
TULISKAN "`tahun` adalah bukan tahun kabisat"
ENDIF
ENDIF
ELSE:
TULISKAN "`tahun` adalah bukan tahun kabisat"
ENDIF
```
================================================
FILE: modules/anchor-pseudocode2.md
================================================
# Mengubah Pseudocode Menjadi Kode JavaScript 2
## Objectives
- Mampu mengartikan pseudocode ke dalam program
## Directions
1. Ubah semua pseudocode di bawah ke dalam JavaScript (setiap pseudocode satu file JavaScript)
2. Kebenaran solusi bukan keluaran, tapi kode yang sesuai dengan pseudocode
### Tugas 1
```
TENTUKAN `total` sama dengan 0
FOR setiap pertambahan 1 `index` dari 1 sampai dengan 100:
IF `index` adalah ganjil:
TAMBAHKAN `total` dengan `index`
ELSE IF `index` adalah genap:
KURANGI `total` dengan `index`
ENDIF
ENDFOR
TULISKAN "TOTAL: `total`"
```
### Tugas 2
```
SIMPAN karakter kosong pada `pagar`
FOR setiap pertambahan 1 pada `index1` dari 1 sampai 10:
FOR setiap pertambahan 1 pada `index2` dari 0 sampai 10:
TAMBAHKAN `pagar` dengan karakter "#"
ENDFOR
TULISKAN `pagar`
SIMPAN karakter kosong pada `pagar`
ENDFOR
```
### Tugas 3
```
SIMPAN karakter kosong pada `bintang`
FOR setiap pertambahan 1 pada `index1` dari 1 sampai 10:
FOR setiap pertambahan 1 pada `index2` dari 0 sampai `index1`:
TAMBAHKAN `bintang` dengan karakter "*"
ENDFOR
TULISKAN `bintang`
SIMPAN karakter kosong pada `bintang`
ENDFOR
```
================================================
FILE: modules/anchor-recursive.md
================================================
# Tantangan Recursive
Salah satu cara menyelesaikan masalah yang membutuhkan perulangan tanpa melakukan *looping* secara eksplisit adalah dengan menggunakan rekursi. Mungkin kamu belum membutuhkan rekursi, tapi mengerti konsep dan cara menggunakannya akan mempermudahmu dalam mempelajari pemrograman.
## Objectives
1. Mengetahui Cara Melakukan Recursive
2. Mengetahui Perbedaan antara Looping Biasa dan Recursive
## Direction
1. Gampang saja, ubah kodemu dari tantangan [sebelumnya](anchor-before-recursive.md) yang menggunakan *looping* menjadi kode yang menggunakan cara rekursi. Selamat mengerjakan! :smile:
### Tips
1. Saat membuat rekursi, tentukan kasus dasarnya terlebih dahulu. Kasus dasar bisa juga disebut dengan akhir dari perulangan. Contohnya, akhir dari perulangan saat membaca setiap elemen pada array adalah index/elemen paling akhir. Maka saat fungsi rekursi dipanggil dengan argumen index/elemen paling akhir, fungsi rekursi harus mengembalikan sebuah nilai bukan memanggil fungsinya sendiri lagi.
================================================
FILE: modules/anchor-switch-case.md
================================================
# Menggunakan Switch-Case
## Objectives
* Mengerti Cara Menggunakan `Switch-Case`
* Mengerti Logika `Switch-Case`
## Directions
Kamu akan diberikan sebuah tanggal dalam tiga variabel, yaitu hari, bulan, dan tahun. Disini kamu diminta untuk membuat format tanggal. Misal tanggal yang diberikan adalah hari 1, bulan 5, dan tahun 1945. Maka, output yang harus kamu proses adalah menjadi 1 Mei 1945.
Gunakan switch case untuk kasus ini!
Contoh:
var hari = 21;
var bulan = 1;
var tahun = 1945;
Maka hasil yang akan tampil di console adalah:
'21 Januari 1945';
## Skeleton Code / Code yang dicontohkan yang perlu diikuti dan dimodifikasi
```javascript
var tanggal; // assign nilai variabel tanggal disini! (dengan angka antara 1 - 31)
var bulan; // assign nilai variabel bulan disini! (dengan angka antara 1 - 12)
var tahun; // assign nilai variabel tahun disini! (dengan angka antara 1900 - 2200)
```
================================================
FILE: modules/angka-kuadrat.md
================================================
# Challenge !! Angka Pangkat
Baca dan pahami tentang Js recursion : https://www.sitepoint.com/recursion-functional-javascript/
## Tugas
1. Bukalah sebuah tools online untuk menuliskan code JavaScript
2. Buat sebuah function bernama pangkat. Pastikan untuk menggunakan metode recursion! <br>
Function tsb akan menerima dua buah parameter number, kemudian tampilkan hasil dari bilangan pertama pangkat bilangan kedua.<br>
Contohnya : input angka 8 dan 4, maka hasilnya adalah 4096.
3. Kirim hasil code kamu dengan gist, dengan nama file : pangkat.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge.
================================================
FILE: modules/animation-using-css-and-js.md
================================================
# Animation Using CSS and JS
## Objectives
Tahukah kamu, bahwa kita bisa membuat animasi sederhana dengan CSS dan HTML? Ada sebuah sintaks CSS yang dinamakan `pseudo-class` dan juga `transition` yang bisa kamu manfaatkan untuk membuat efek "delay" pada saat sebuah element HTML mengalami perubahan style di CSS. Lalu, dengan memanfaatkan JS, kita bisa mengubah style CSS tersebut dengan dinamis!
**DOM**
- ▢ Memahami CSS Pseudo-class Selector
- ▢ Memahami CSS transition
- ▢ Memahami JS SetTimeout function
## Learnings
### 1. CSS Pseudo-class Selector
Seringkali saat kita melihat website-website, banyak efek yang terlihat pada saat kita meng-hover (meletakkan mouse pointer diatas) sebuah element. Pasti setelah mempelajari JS DOM event, ini bisa di solve dengan addEventListener dan menambahkan action type berupa mouseenter atau mouseover. Namun, dengan CSS pun sekarang kita bisa melakukannya!
**contoh-pseudoclass.html**
```html
<html>
<head>
<link href="contoh-pseudoclass-style.css" ref="stylesheet" />
</head>
<body>
<div id="saya-bisa-di-hover">Hover Saya!</div>
</body>
</html>
```
**contoh-pseudoclass-style.css**
```css
#saya-bisa-di-hover {
height: 100px;
width: 100px;
background: black;
}
#saya-bisa-di-hover:hover {
background: green;
}
```
Contoh di atas akan menunjukkan saat div hover saya di hover, warna nya akan berubah dari hitam menjadi hijau, dengan menambahkan css style baru dan memberikan `:hover`. Gambarannya dari apa yang terjadi disini adalah kita punya dua style css: #saya-bisa-di-hover dan #saya-bisa-di-hover:hover. Ini adalah dua style berbeda, dimana menunjukkan style mana yang akan digunakan saat element HTML memiliki state/status tertentu. Secara default, kotak akan menggunakan style #saya-bisa-di-hover. Namun, saat di hover (mengalami perubahan state/status), style akan terupdate menggunakan :hover.
### 2. CSS Transition
Dari contoh sebelumnya, kita bisa membuat efek berubah style pada kotak saat di hover. Namun tidak hannya sampai sana, kita juga bisa membuat animasi perubahan warna tersebut menggunakan css. Caranya adalah menambahkan sintaks `transition: [x]s` dengan x adalah berapa lama transisi/delay diberikan. Contoh penggunaan transisi, kita gunakan contoh sebelumnya.
**contoh-transition.html**
```html
<html>
<head>
<link href="contoh-transition-style.css" ref="stylesheet" />
</head>
<body>
<div id="saya-bisa-di-hover-dengan-animasi">Hover Saya!</div>
</body>
</html>
```
**contoh-transition-style.css**
```css
#saya-bisa-di-hover-dengan-animasi {
height: 100px;
width: 100px;
background: black;
transition: 0.5s;
}
#saya-bisa-di-hover-dengan-animasi:hover {
background: green;
transition: 0.5s;
}
```
### 3. Contoh Penggunaan setTimeout di JavaScript
Terkadang kita membutuhkan sebuah instruksi code yang ingin dijalankan setelah waktu tertentu. Disini, kita dapat menggunakan fungsi `setTimeout()` di JavaScript.
Function `setTimeout()` mengambil dua parameter, dimana parameter pertama merupakan fungsi yang akan dijalankan pada saat waktu telah mencapai yang ditentukan, dan parameter kedua merupakan berapa lama fungsi di dalam setTimeout tersebut akan dijalankan.
Contoh Penggunaan `setTimeout()`
```javascript
setTimeout(function() {
alert('HALO!');
}, 2000);
// Potongan kode ini akan meng-alert HALO di HTML kita setelah 2 detik berlalu.
```
### 4. Menggabungkan Transition dan setTimeout di JavaScript
Terakhir, untuk mencoba menggabungkan yang telah kita pelajari sebelumnya, kita akan lihat contoh di bawah ini:
**contoh-gabungan.html**
```html
<html>
<head>
<title>Contoh Gabungan Simple</title>
</head>
<body>
<div id="black-box" style="transition: 0.5s; width: 100px; height: 100px; background: black;"></div>
<button id="box-jump">Loncat!</button>
<script src="contoh-gabungan-style.js"></script>
</body>
</html>
```
**contoh-gabungan-style.js**
```js
var blackBox = document.getElementById('black-box');
var jumpBox = document.getElementById('box-jump');
jumpBox.addEventListener('click', function() {
blackBox.style.background = 'green';
blackBox.style.width = '400px';
setTimeout(function() {
blackBox.style.background = 'black';
blackBox.style.width = '100px';
}, 500);
});
```
================================================
FILE: modules/app-design-architecture.md
================================================
# Get to Know Application Design and Architecture
## Objectives
Dalam mebuat aplikasi yang makin besar dan baik, kita perlu memperhatikan struktur desain/rancangan yang kita gunakan. Hal ini akan berpengaruh terhadap kualitas code, maintainability dari aplikasi, keamanan, kecepatan/performa, kemudahan penggunaan, dan lain-lain.
## Learnings
### Mengetahui Design Pattern
Pola desain (design pattern) adalah cara dan solusi yang dapat digunakan berulang kali untuk mengatasi berbagai masalah pada pembuatan software. Pola ini merupakan gabungan dari berbagai pemikiran yang ada sebelumnya dan masih baru, untuk mengeksplorasi kemampuan bahasa pemrograman dan platform. Design pattern yang paling populer adalah MVC pattern, yang perkembangannya bisa sesuai kebutuhan seperti MVP dan MVVC.
**MVC**
MVC (Model-View-Controller)
adalah design pattern secara arsitektur yang memisahkan code sesuai dengan kebutuhan atau fungsinya (seringkali disebut _separation of concerns_). Dengan ini, terjadi pemisahan atau isolasi terhadap:
- data aplikasi atau bisnis (Model)
- tampilan antarmuka pengguna (View)
- komponen logic dan input pengguna (Controller)
Masing-masing dari bagian ini mengandung HTML, CSS, dan JavaScript; namun secara tujuan berbeda tergantung dari klasifikasinya. Berikut ilustrasi diagram hubungan antara bagian tersebut.
### Mengetahui Application Architecture
Kita akan bahas ini lain kali. Namun sekarang cukup tahu terlebih dahulu saja, bahwa dalam membuat aplikasi, terdapat berbagai teknik percanganan atau arsitektur. Seperti...
- Modularization
- Web API
- Service Oriented Architecture (SOA)
- Real Time Protocol with Socket.io
- dan berbagai lainnya sesuai kebutuhan
## References
- [Model-View-Controller (MVC) Explained Through Ordering Drinks At The Bar, by Kevin Kononenko](https://medium.freecodecamp.com/model-view-controller-mvc-explained-through-ordering-drinks-at-the-bar-efcba6255053)
- [Learning JavaScript Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book)
- [Applications architecture - Wikipedia](https://en.wikipedia.org/wiki/Applications_architecture)
- [What is Software Architecture? - Microsoft Developer Network](https://msdn.microsoft.com/en-us/library/ee658098.aspx)
- [Service-oriented architecture - Wikipedia](https://en.wikipedia.org/wiki/Service-oriented_architecture)
- [Microservices - Martin Fowler](http://martinfowler.com/articles/microservices.html)
- [Web Application Architectures - University of New Mexico - Coursera](https://www.coursera.org/course/webapplications)
- [Front-End Web UI Frameworks and Tools - The Hong Kong University of Science and Technology - Coursera](https://www.coursera.org/learn/web-frameworks)
- [Web Application Development with JavaScript and MongoDB - University of London, Goldsmiths, University of London - Coursera](https://www.coursera.org/learn/web-application-development)
- [BuiltWith: Technology Lookup, Website Analysis and Technology Trends](http://builtwith.com)
================================================
FILE: modules/array-1.md
================================================
# Challenge !! Array 1
## Tugas
1. Bukalah sebuah tools online untuk menuliskan code JavaScript
2. Buat sebuah function bernama array1. <br>
Function tsb akan menerima sebuah parameter array, kemudian cek apakah jumlah semua angka (selain angka maksimal) di dalam array tersebut lebih kecil atau sama dari angka maksimalnya. Apabila ya, akan mengembalikan true.
Contohnya : array 1,2,3,4,5,15 menghasilkan true karena 1+2+3+4+5 <= 15
3. Kirim hasil code kamu dengan gist, dengan nama file : array1.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge.
================================================
FILE: modules/ask-search-read-smarter.md
================================================
# Ask, Search, and Read Smarter
## Objectives
Sebagai developer sejati, yang akan sering dilakukan selain belajar dan berlatih tentu saja adalah bertanya. Cara bertanya yang baik, efektif, maupun efisien akan membantu kita mencapai tujuan yang kita inginkan.
Selain bertanya pada orang lain, tentu modern ini kita sering bertanya melalui mesin pencari (terutama Google) melalui searching. Searching pun, ada teknik yang direkomendasikan, tidak sekadar asal ketik lalu search.
Saat mendapatkan bahan pembelajaran maupun jawaban, tentu mayoritas bentuknya merupakan tulisan. _Speed reading_ merupakan teknik umum yang harus kamu kuasai agar dapat lebih bagus dalam memahami isi tulisan.
## Learnings
Kenali dan/atau ikuti berbagai saran dan tips yang ada di:
- [How To Ask Questions The Smart Way](http://c2.com/cgi/wiki?HowToAskQuestionsTheSmartWay)
- [How to search on Google - Google Support](https://support.google.com/websearch/answer/134479)
- [20 Tips To Use Google Search Efficiently](http://www.lifehack.org/articles/technology/20-tips-use-google-search-efficiently.html)
- [How to Search on Google: 31 Advanced Google Search Tips](http://blog.hubspot.com/blog/tabid/6307/bid/1264/12-Quick-Tips-To-Search-Google-Like-An-Expert.aspx)
- [How to Read Faster, on wikiHow](http://www.wikihow.com/Read-Faster)
- [7 Keys to Reading Faster, on Think Simple Now](http://thinksimplenow.com/productivity/7-keys-to-reading-faster)
- [Speed Reading: Learning to Read More Efficiently, on MindTools](https://www.mindtools.com/speedrd.html)
- [Scientific Speed Reading: How to Read 300% Faster in 20 Minutes, by Tim Ferriss](http://fourhourworkweek.com/2009/07/30/speed-reading-and-accelerated-learning)
## References
- [How To Ask Questions The Smart Way](http://www.catb.org/~esr/faqs/smart-questions.html)
- [Don't Ask Us Questions. We'll Just Ignore You](https://blog.codinghorror.com/dont-ask-us-questions-well-just-ignore-you/)
- [How to Use Google Search More Effectively (Infographic)](http://mashable.com/2011/11/24/google-search-infographic)
================================================
FILE: modules/assets/css-anchor-styling.css
================================================
/* Style Default */
body {
font-family: 'Slabo 27px', serif;
}
h1 {
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding-bottom: 10px;
}
.separator {
width: 100%;
height: auto;
overflow: hidden;
}
/* Style Untuk Soal 1, 2, dan 3. Gunakan Dengan Sesuai! */
.box-100 {
width: 100px;
height: 100px;
float: left;
margin: 20px;
padding: 20px;
font-size: 15pt;
text-align: center;
}
.box-200 {
width: 200px;
height: 200px;
float: left;
margin: 20px;
padding: 20px;
font-size: 15pt;
text-align: center;
}
#maroon-box {
color: #FFFFFF;
background: #96281B;
}
#dark-blue-box {
color: #FFFFFF;
background: #4B77BE;
}
#salem-box {
color: #FFFFFF;
background: #1E824C;
}
.red-background {
color: #FFFFFF;
background: #C0392B;
}
.blue-background {
color: #FFFFFF;
background: #446CB3;
}
.green-background {
color: #FFFFFF;
background: #26A65B;
}
.box-list div {
width: 200px;
height: 200px;
float: left;
margin: 20px;
padding: 20px;
font-size: 15pt;
text-align: center;
background: #353535;
color: #FFFFFF;
}
#gold-box {
border-radius: 20px;
color: #353535;
background: #F9BF3B;
}
================================================
FILE: modules/assets/example.css
================================================
================================================
FILE: modules/assets/example.html
================================================
================================================
FILE: modules/assets/example.js
================================================
================================================
FILE: modules/assets/style.css
================================================
/*day 3*/
* {
box-sizing: border-box;
}
body {
background-color: darkorange;
margin: 0;
padding: 0;
}
h1, h2 {
color: crimson;
text-transform: uppercase;
}
h1 {
font-size: 40px;
letter-spacing: 10px;
}
h2 {
font-size: 30px;
font-style: italic;
}
h3 {
text-align: center;
text-transform: capitalize;
color: firebrick;
font-size: 25px;
}
p {
font-weight: bold;
font-size: 20px;
}
.header {
background-color: yellow;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
/*day 3*/
padding-top: 2%;
padding-bottom: 2%;
width: 100%;
border: 10px dashed black;
/*day 3*/
}
.body {
background-color: white;
font-family: serif;
/*day 3*/
margin: 5%;
padding: 5%;
border: 2px solid;
/*day 3*/
}
.comment {
background-color: antiquewhite;
color: firebrick;
font-family: Courier New, Courier, monospace;
text-transform: capitalize;
/*day 3*/
padding: 5%;
float: right;
border-left: 10px solid black;
border-top-left-radius: 10%;
border-bottom-left-radius: 10%;
/*day 3*/
}
================================================
FILE: modules/bilangan-faktor.md
================================================
# Challenge !! Bilangan Faktor
## Objectives
Faktor suatu bilangan adalah suatu bilangan yang merupakan kelipatan dari bilangan tersebut. Contohnya faktor bilangan dari angka 18 adalah 1, 2, 3, 6, 9, dan 18
## Tugas
1. Bukalah sebuah tools online untuk menuliskan code JavaScript
2. Buatlah sebuah function dengan nama bilanganFaktor yang menerima input integer, kemudian olah integer tersebut agar mengembalikan bilangan faktor.
3. Setelah selesai, kirim hasil code kamu dengan gist, dengan nama file : bilanganFaktor.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge.
## Input
bilangan apa saja
## Output
Ketika function dipanggil dengan parameter 18, akan menghasilkan data sbb :
1, 2, 3, 6, 9, 18
================================================
FILE: modules/blockly-games.md
================================================
# Play Some Blockly Games
## Objectives
Blockly Games merupakan sekumpulan permainan edukatif yang mengajarkan programming. Tujuan aslinya dibuat untuk anak-anak. Namun kita bisa memanfaatkannya untuk melatih kemampuan logika. Sekaligus juga melihat alternatif lain belajar pemrograman. Anggaplah ini sebagai _having fun_ bagimu di samping materi serius yang lain.
## Directions
- ▢ Kunjungi <https://blockly-games.appspot.com>, lalu mainkan berbagai level berikut sesukamu:
- Puzzle
- Maze
- Bird
- Turtle
- Movie
- Pond
## References
- [Blockly on Google for Education](https://developers.google.com/blockly)
- [Scratch](https://scratch.mit.edu)
================================================
FILE: modules/blog.md
================================================
# Do Your Own Blogging
## Objectives
Agar dapat melatih kemampuan menulis, kita dianjurkan untuk melakukan pencatatan pribadi atau blogging. Baik blog dengan cara biasa (website pribadi dengan GitHub Pages, [Medium](https://medium.com), [Wordpress](https://wordpress.com), [Blogspot](http://blogspot.com)) maupun microblog di social media (Twitter, Facebook, Tumblr). Kontennya bebas, terkait pembelajaran yang akan atau sudah kamu lalui. Misalnya untuk awal pekan adalah menceritakan mengapa ingin menjadi web developer, apa yang sudah kamu ketahui tentang Web, serta pengalaman menggunakan Git dan GitHub. Untuk itu juga kami sangat menganjurkan untuk menggunakan website kamu di GitHub untuk blogging!
Setiap blog post bertujuan untuk:
- Menelusuri lebih lanjut topik yang kamu suka dan perhatikan.
- Mengajarkan orang lain tentang topik yang kamu pilih.
- Menjadikan portfolio kamu yang menarik dan banggakan.
- Menceritakan pengalaman dan kemampuan kamu, untuk berbagai orang dan bahkan employer di masa depan. Boleh bersifat non-technical maupun technical.
- Meningkatkan keahlian kamu dalam pengembangan HTML, CSS, dan JavaScript.
## Directions
### 1. Buat blog kamu menggunakan Web yang telah dibuat di tugas sebelumnya
### 2. Buat blog post
- ▢ Rangkumlah bahan topik yang sudah dipelajari. Mengenai mengapa menggunakan, bagaimana cara pakainya, dan apa saja hal-hal tersebut. Tunjukkan contoh code dan screenshot jika ada.
- ▢ Tulislah blog post yang menceritakan hal apa saja yang sudah kamu pahami dan pelajari.
- ▢ Sertakan berbagai sumber/URL yang sudah kamu dapat dan temukan.
**Catatan:** Jika sudah ada template, copy template yang sudah kamu buat, rename sesuai tanggal dan judul yang direncanakan. Misalnya `2016-12-30_hacktiv8-experience-week-1.html` atau `beginning-hacktiv8-adventure.html`.
### 3. Submit blog post
- ▢ Save dan publish blog post tersebut.
- ▢ Link blog post kamu ke index website kamu.
- ▢ Share hasil kamu di Slack. Bahkan boleh juga di Facebook, Twitter, dan lainnya.
- ▢ Jika ada, bagilah informasi atau artikel bermanfaat lainnya juga.
**Catatan:** Jika meng-update website pribadi, selalu ingat untuk commit dan push file blog post tersebut ke GitHub.
## References
- [How to Start a Blog, a fun tutorial by First Site Guide](http://firstsiteguide.com/start-blog)
- [How daily vlogging has made me more productive and a better entrepreneur](https://meda.io/blog/startup/2016/05/20/how-daily-vlogging-has-made-me-more-productive-and-a-better-entrepreneur.html)
================================================
FILE: modules/bootstrap.md
================================================
# Trying Bootstrap
## Objectives
Pada tantangan ini tidak terdapat tujuan spesifik, tujuannya hanya untuk memberi kesempatan bagi kamu untuk mencoba-coba dan bereksplorasi tanpa bimbingan spesifik.
- ▢ Memahami kegunaan framework.
- ▢ Memasang framework Bootstrap pada project.
- ▢ Menggunakan komponen Bootstrap yang sudah siap pakai.
- ▢ Berlatih membaca dokumentasi dari sebuah tool, library, framework, atau aplikasi.
## Directions
### 1. Download Bootstrap
[Cek website Bootstrap](http://getbootstrap.com) terlebih dahulu. Lalu [download Bootstrap](http://getbootstrap.com/getting-started/#download), [versi terbaru](https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip). Akan di-download sebuah zip yang kemudian perlu kamu ekstrak ke dalam folder yang sama dengan file HTML kita (`try-bootstrap.html` misalnya).
### 2. Melihat struktur bundle framework
Akan terdapat folder dengan struktur berikut:
```
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
└── fonts/
```
### 3. Memasang Bootstrap ke dalam project kita
Pindahkan file `bootstrap.min.css` dan `bootstrap-theme.min.css` ke bagian root dari project kita
### 4. Menggunakan Boostrap pada halaman
Panggil kedua file tersebut dengan tag `<link rel="stylesheet>`
### 5. Mencoba berbagai macam contoh
Cobalah untuk [mengambil berbagai contoh/examples yang tersedia](http://getbootstrap.com/getting-started/#examples) pada dokumentasi tersebut. Misalnya "Narrow Jumbotron" atau "Cover".
### 6. Bereksperimen
Ubahlah konten dan style template tersebut sesuka hati. Misalnya dengan tujuan memperkenalkan diri Anda. [Silakan baca dokumentasi CSS-nya](http://getbootstrap.com/css) untuk lebih tahu apa saja yang dapat kita gunakan.
Selamat! Kamu dapat berhasil membuat website dengan singkat namun dengan layout yang bagus. Terima kasih Bootstrap!
================================================
FILE: modules/career.md
================================================
# Prepare Your Career to be a True Developer
## Objectives
- ▢ Mengenal berbagai wawasan yang ada di dalam dunia developer profesional sungguhan
- ▢ Mengetahui berbagai kiat mendapatkan pekerjaan sebagai developer, dan hal relevan lainnya
## Learnings
**Being a Developer and Engineer**
- [Developers Best Practices on TutorialsPoint](http://www.tutorialspoint.com/developers_best_practices)
- [The Career Changer’s Guide to Becoming a Software Developer, by Natasha Postolovski on Codementor](https://www.codementor.io/learn-programming/career-changing-tips-become-software-developer)
- [Learn to Code: 13 Tips that Could Save You Years of Effort by Eric Elliott](https://medium.com/javascript-scene/learn-to-code-13-tips-that-could-save-you-years-of-effort-92ce799a3e1f)
- [The Myth of the Full-stack Developer, by Andy Shora](http://andyshora.com/full-stack-developers.html)
- [Being A Developer After 40 by Adrian Kosmaczewski](https://medium.freecodecamp.com/being-a-developer-after-40-3c5dd112210c)
- [Mastering Programming by Kent Beck](https://www.facebook.com/notes/kent-beck/mastering-programming/1184427814923414)
- [Being a JavaScript Developer is no Candy Land, by Dor Tzur on The Full Stack](http://thefullstack.xyz/candy-land-javascript-developer)
- [The Rise of the Full Stack JavaScript Developer, by Dor Tzur on The Full Stack](http://thefullstack.xyz/full-stack-javascript-developer)
- [Finding Time to Become a Better Developer, by Bill Sourour](https://medium.freecodecamp.com/finding-time-to-become-a-better-developer-eebc154881b2)
- [9 truths that computer programmers know that most people don’t, by Macleod Sawyer](https://blog.macleodsawyer.com/9-truths-that-computer-programmers-know-that-most-people-don-t-773086ab1779)
- [Are You an Engineer or Just an Engineering Graduate? by Robert Bagatsing on GineersNow](http://www.gineersnow.com/details/are-you-an-engineer-or-just-an-engineering-graduate)
**Jobs and Hiring**
- [How to Get Your First Developer Job (even if You Don’t have a CS Degree), on Codementor](https://www.codementor.io/learn-programming/landing-programming-job-without-computer-science-degree)
- [How to Impress in a Junior Developer Job Interview, by Natasha Postolovski on Codementor](https://www.codementor.io/learn-programming/junior-developer-interview-tips-to-success)
- [How to Get a Developer Job in Less Than a Year, by Alexander Kallaway](https://medium.freecodecamp.com/how-to-get-a-developer-job-in-less-than-a-year-c27bbfe71645)
- [Here's how the people you know can help you land your dream job, by Eugene Kim](https://www.weforum.org/agenda/2016/06/want-to-land-your-dream-job-this-is-linkedins-advice)
- [These foolproof tips from LinkedIn will help you land your dream job, by Eugene Kim on Business Insider](http://www.businessinsider.co.id/linkedin-tips-for-landing-a-job-2016-6)
- [The 2016 LinkedIn Job Search Guide](http://www.slideshare.net/linkedin/the-2016-linkedin-job-search-guide) (SlideShare)
- [5 Revealing Interview Questions That Assess Employee Fit, by Jeff Boss on Entreprenur](https://www.entrepreneur.com/article/248899)
- [7 Interview Questions That Determine Emotional Intelligence, by Carolyn Sun on Entrepreneur.com](https://www.entrepreneur.com/article/248524)
- [9 LinkedIn Profile Tips for New Developers on Codementor](https://www.codementor.io/learn-programming/9-linkedin-profile-tips-for-junior-developers)
- [5 Questions That Reveal Whether a Job Candidate Is Startup Material, by Anna Johannson on Entrepreneur](https://www.entrepreneur.com/article/248714)
- [13 Questions to Screen Potential Hires for Culture Fit, by Young Entrepreneur Council on Inc.com](http://www.inc.com/young-entrepreneur-council/13-questions-to-screen-potential-hires-for-culture-fit.html)
## References
- [What’s Right For You: Bootcamp or Self-Learning? on Codementor](https://www.codementor.io/learn-programming/whats-right-bootcamp-self-learning)
**Warning: Advanced Readings**
- [Being a Full Stack Developer, by George Fekete on SitePoint](https://www.sitepoint.com/full-stack-developer)
- [What should a fullstack developer know in 2016? on Quora](https://www.quora.com/What-should-a-fullstack-developer-know-in-2016-1)
- [9 Essential Web Development Interview Questions, on Toptal](https://www.toptal.com/web/interview-questions)
- [Full-stack Developer Interview Questions and Answers, by Andrey Naumenko](https://github.com/indy256/Full-stack-Developer-Interview-Questions-and-Answers)
- [How to clear Full Stack Web Developer Interview, by tekkkies](https://www.tekkkies.com/full-stack-web-developer-interview)
**Danger: More Advanced Readings**
- [Surviving the IT talent crisis, by Harvard Business Review Analytic Services (PDF)](https://enterprisersproject.com/sites/default/files/it_talent_crisis_proven_advice_from_cios_and_hr_leaders.pdf)
- [Hello, Startup: A Programmer's Guide to Building Products, Technologies, and Teams - Book by Yevgeniy Brikman](http://www.hello-startup.net)
================================================
FILE: modules/cek-angka.md
================================================
# Challenge !! Cek Angka
## Tugas
1. Bukalah sebuah tools online untuk menuliskan code JavaScript
2. Buat sebuah function bernama cekAngka. <br>
Function tsb akan menerima dua buah parameter number, kemudian cek apabila di parameter pertama ada angka yang berurutan 3x, memiliki angka yang sama berurutan 2x di parameter kedua.<br>
Contohnya : input "1212111223" dan "1211445", menghasilkan true karena di parameter pertama ada "111" dan di parameter kedua didapatkan "11"
3. Kirim hasil code kamu dengan gist, dengan nama file : cekAngka.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge.
================================================
FILE: modules/cek-prima.md
================================================
# Challenge !! Cek Bilangan Prima
## Tugas
1. Bukalah sebuah tools online untuk menuliskan code JavaScript
2. Buat sebuah function bernama cekBilanganPrima. <br>
Function tsb akan menerima sebuah parameter number, kemudian cek apabila parameter tersebut adalah bilangan prima, maka menghasilkan boolean true. Apabila sebaliknya, akan menghasilkan false
3. Kirim hasil code kamu dengan gist, dengan nama file : cekBilanganPrima.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge.
================================================
FILE: modules/cek-string.md
================================================
# Challenge !! Cek String
## Tugas
1. Bukalah sebuah tools online untuk menuliskan code JavaScript
2. Buat sebuah function bernama cekString. <br>
Function tsb akan menerima dua buah parameter string, kemudian cek apakah string ke 2 dapat dibuat dari string ke 1.
Contohnya : cekString("abcdefghijklmno", "matahari") hasilnya false
cekString("aaawossrld", "world") hasilnya true
cekString("aaawossrld", "worldd") hasilnya false, karena huruf d ada 2 di parameter kedua
3. Kirim hasil code kamu dengan gist, dengan nama file : cekString.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge.
================================================
FILE: modules/challenge-algoritma-hukum-newton.md
================================================
# Algoritma /Pseudocode Challenge - Hukum II Newton
## Problem
Bunyi hukum II Newton adalah:
```
Percepatan sebuah benda akan sebanding dengan gaya yang diberikan pada benda dan berbanding terbalik dengan massa benda. Arah percepatan benda sama dengan arah gaya total yang diberikan pada benda.
```
Secara matematis hukum II Newton dirumuskan sebagai berikut:
ΣF = m x a
ΣF = resultan gaya (Newton)
m = massa benda (kg)
a = percepatan benda (m/s2)
Berdasarkan keterangan di atas, buatlah sebuah algoritma / pseudocode untuk menghitung resultan gaya pada sebuah mobil yang memiliki massa benda 600 kg dan ketika didorong oleh tiga orang percepatannya adalah 2 m/s2
//your algorithm / pseudocode here
================================================
FILE: modules/challenge-algoritma-laundry-day.md
================================================
# Algoritma /Pseudocode Challenge - Laundry Day
## Problem
Foxie akan mencuci pakaiannya menggunakan mesin cuci. Pakaian yang akan dicuci oleh Foxie sebanyak 20 dan akan dimasukkan ke mesin cuci.
Mesin cuci akan dinyalakan jika semua pakaian Foxie sudah masuk ke mesin cuci.
Bantulah Foxie untuk menghitung jumlah pakaian yang akan dimasukkan ke mesin cuci menggunakan algoritma / pseudocode perulangan.
//your algorithm / pseudocode here
================================================
FILE: modules/challenge-algoritma-periksa-kuku.md
================================================
# Algoritma /Pseudocode Challenge - Periksa Kuku
## Problem
Seorang guru akan memeriksa kuku siswa-siswinya yang sebanyak 40 orang dengan cara berkeliling kelas. Jika guru menemukan siswa/siswi yang memiliki kuku yang panjang maka guru akan menghukum siswa/siswi tersebut, jika tidak guru akan memuji siswa/siswi tersebut.
Buatlah algoritma/pseudocode untuk permasalahan diatas.
//your algorithm / pseudocode here
================================================
FILE: modules/challenge-algoritma-tahun-kabisat.md
================================================
# Algoritma /Pseudocode Challenge - Tahun Kabisat
## Problem
Apa yang kamu ketahui tentang tanggal 29 Februari? Kamu pasti tahu jika suatu tahun memiliki tanggal 29 Februari berarti tahun tersebut merupakan tahun kabisat.
Dalam kalender Gregorian, tahun kabisat diatur beberapa kriteria yaitu antara lain:
- Jika tahun habis di bagi 4 dan tidak habis di bagi 100, dan
- Jika tahun habis di bagi 4, habis di bagi 100 dan habis di bagi 400
Buatlah algoritma/pseudocode untuk menentukan apakah suatu tahun merupakan tahun kabisat atau bukan
//your algorithm / pseudocode here
================================================
FILE: modules/challenge-angka-prima.md
================================================
# Logic Challenge - Angka Prima
## Problem
Diberikan sebuah function angkaPrima(angka) yang menerima satu parameter berupa angka. Function akan me-return true jika angka tersebut adalah bilangan prima. Jika tidak, return false.
## Code
```JavaScript
function angkaPrima(angka) {
// you can only write your code here!
}
// TEST CASES
console.log(angkaPrima(3)); // true
console.log(angkaPrima(7)); // true
console.log(angkaPrima(6)); // false
console.log(angkaPrima(23)); // true
console.log(angkaPrima(33)); // false
```
================================================
FILE: modules/challenge-balik-kata.md
================================================
# Logic Challenge - Balik Kata
## Problem
Diberikan sebuah function balikKata(kata) yang menerima satu parameter berupa string. Function akan me-return kata yang dibalik. Contoh, jika kata adalah "John Doe", function akan me-return "eoD nhoJ".
## Code
```JavaScript
function balikKata(kata) {
// you can only write your code here!
}
// TEST CASES
console.log(balikKata('Hello World and Coders')); // sredoC dna dlroW olleH
console.log(balikKata('John Doe')); // eoD nhoJ
console.log(balikKata('I am a bookworm')); // mrowkoob a ma I
console.log(balikKata('Coding is my hobby')); // ybboh ym si gnidoC
console.log(balikKata('Super')); // repuS
```
================================================
FILE: modules/challenge-bandingkan-angka.md
================================================
# Logic Challenge - Bandingkan Angka
## Problem
Diberikan sebuah function bandingkanAngka(angka1, angka2) yang menerima dua parameter angka. Function akan me-return nilai true jika angka2 lebih besar dari angka1, dan false jika sebaliknya. Jika kedua angka bernilai sama, function akan me-return -1.
## Code
```JavaScript
function bandingkanAngka(angka1, angka2) {
// you can only write your code here!
}
// TEST CASES
console.log(bandingkanAngka(5, 8)); // true
console.log(bandingkanAngka(5, 3)); // false
console.log(bandingkanAngka(4, 4)); // -1
console.log(bandingkanAngka(3, 3)); // -1
console.log(bandingkanAngka(17, 2)); // false
```
================================================
FILE: modules/challenge-cari-mean.md
================================================
# Logic Challenge - Mencari Mean
## Problem
Diberikan sebuah function cariMean(arr) yang menerima sebuah array angka. Function akan me-return mean dari array atau deret angka tersebut. Mean adalah angka rata-rata dari deret bilangan tersebut. Contoh, mean atau rata-rata dari [1, 2, 3, 4, 5] adalah 3. Kita perlu kemudian melakukan pembulatan angka dari hasil mean yang didapatkan (pembulatan ke atas).
## Code
```JavaScript
function cariMean(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(cariMean([1, 2, 3, 4, 5])); // 3
console.log(cariMean([3, 5, 7, 5, 3])); // 5
console.log(cariMean([6, 5, 4, 7, 3])); // 5
console.log(cariMean([1, 3, 3])); // 2
console.log(cariMean([7, 7, 7, 7, 7])); // 7
```
================================================
FILE: modules/challenge-cari-median.md
================================================
# Logic Challenge - Mencari Median
## Problem
Diberikan sebuah function cariMedian(arr) yang menerima sebuah array angka. Function akan me-return median dari deret angka tersebut. Median adalah nilai tengah dari sebuah deret bilangan. Contoh, median atau dari [1, 2, 3, 4, 5] adalah 3 yang merupakan nilai yang ada di posisi tengah dari deret tersebut. Median dari deret yang berjumlah genap adalah rata-rata dari dua nilai tengah. Contoh, median dari [1, 2, 3, 4] adalah 2.5, karena (2 + 3 / 2).
## Code
```JavaScript
function cariMedian(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(cariMedian([1, 2, 3, 4, 5])); // 3
console.log(cariMedian([1, 3, 4, 10, 12, 13])); // 7
console.log(cariMedian([3, 4, 7, 6, 10])); // 6
console.log(cariMedian([1, 3, 3])); // 3
console.log(cariMedian([7, 7, 8, 8])); // 7.5
```
================================================
FILE: modules/challenge-cari-modus.md
================================================
# Logic Challenge - Mencari Modus
## Problem
Diberikan sebuah function cariModus(arr) yang menerima sebuah array angka. Function akan me-return modus dari array atau deret angka tersebut. Modus adalah angka dari sebuah deret yang paling banyak atau paling sering muncul. Contoh, modus dari [10, 4, 5, 2, 4] adalah 4. Jika modus tidak ditemukan, function akan me-return -1. Apabila ditemukan lebih dari dua nilai modus, tampilkan nilai modus yang paling pertama muncul (dihitung dari kiri ke kanan). Dan apabila dialam modus hanya ada 1 nilai yang sama maka function akan me-return -1, Contohnya [1, 1, 1] adalah -1.
## Code
```JavaScript
function cariModus(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(cariModus([10, 4, 5, 2, 4])); // 4
console.log(cariModus([5, 10, 10, 6, 5])); // 5
console.log(cariModus([10, 3, 1, 2, 5])); // -1
console.log(cariModus([1, 2, 3, 3, 4, 5])); // 3
console.log(cariModus([7, 7, 7, 7, 7])); // -1
```
================================================
FILE: modules/challenge-cari-pelaku.md
================================================
# Logic Challenge - Cari Pelaku (Regex)
## Problem
Diberikan sebuah function cariPelaku(kalimat) yang menerima satu parameter berupa string. Function akan me-return jumlah berapa kali ditemukan kata "abc" secara berturut-turut di dalam kalimat tersebut. Gunakan regex untuk melatih kemampuan regex.
## Code
```JavaScript
function cariPelaku(str) {
// you can only write your code here!
}
// TEST CASES
console.log(cariPelaku('mabcvabc')); // 2
console.log(cariPelaku('abcdabdc')); // 1
console.log(cariPelaku('bcabcac')); // 1
console.log(cariPelaku('abcabcabc')); // 3
console.log(cariPelaku('babcbacabc')); // 2
```
================================================
FILE: modules/challenge-cek-ab.md
================================================
# Logic Challenge - Check AB
## Problem
Diberikan sebuah function checkAB(str) yang menerima satu parameter berupa string. function tersebut mengembalikan nilai `true` jika di dalam string tersebut terdapat karakter a dan b yang memiliki jarak 3 karakter lain minimal satu kali. Jika tidak ditemukan sama sekali, kembalikan nilai `false`. Jarak bisa dari a ke b, atau b ke a.
## Code
```JavaScript
function checkAB(num) {
// you can only write your code here!
}
// TEST CASES
console.log(checkAB('lane borrowed')); // true
console.log(checkAB('i am sick')); // false
console.log(checkAB('you are boring')); // true
console.log(checkAB('barbarian')); // true
console.log(checkAB('bacon and meat')); // false
```
================================================
FILE: modules/challenge-damage-calculation.md
================================================
# Logic Challenge: Damage Calculation
Diberikan function `attack()`, damageCalculation().
- Function `damageCalculation()` akan menerima 2 parameter yaitu numberOfAttacks dan damagePerAttack
- Function `attack()` akan menerima 1 parameter yaitu damage
[IMPLEMENTASI]
Gunakan function `damageCalculation()` untuk menghitung damage yang diterima dan gunakan function
`attack()` untuk mensimulasikan setiap attack dengan rumus `damage - 2` disetiap attack.
[CONTOH]
`damageCalculation(3, 10)` akan mengembalikan nilai `24`
Karena attack akan dikurangi 2, maka setiap attack akan menghasilkan damage 8
[Submit Tugas Disini](https://github.com/phase-0-branch-exercises/damage-calculation)
```JavaScript
function attack (damage) {
// Code disini
}
function damageCalculation (numberOfAttacks, damagePerAttack) {
// Code disini
}
// TEST CASE
console.log(damageCalculation(9, 25)); // 207
console.log(damageCalculation(10, 4)); // 20
console.log(damageCalculation(5, 20)); // 90
```
================================================
FILE: modules/challenge-deep-sum.md
================================================
# Logic Challenge: Deep Sum
Implementasikan function deepSum untuk mendapatkan jumlah pertambahan dari angka-angka yang terdapat
di dalam array
Contoh array:
```
[
[
[1, 2, 3],
[1, 2, 3]
],
[
[1, 2, 3],
[1, 2],
[1]
]
]
```
Maka akan menghasilkan output: 22
Level kedalaman array akan di-asumsikan selalu 3, `[ [ [ ] ] ]`, jika yang diberikan adalah array
kosong maka kembalikan nilai 'No number'
```JavaScript
function deepSum (arr) {
// Code disini
}
//TEST CASE
console.log(deepSum([
[
[4, 5, 6],
[9, 1, 2, 10],
[9, 4, 3]
],
[
[4, 14, 31],
[9, 10, 18, 12, 20],
[1, 4, 90]
],
[
[2, 5, 10],
[3, 4, 5],
[2, 4, 5, 10]
]
])); // 316
console.log(deepSum([
[
[20, 10],
[15],
[1, 1]
],
[
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
[2],
[9, 11]
],
[
[3, 5, 1],
[1, 5, 3],
[1]
],
[
[2]
]
])); // 156
console.log(deepSum([])); // No number
```
================================================
FILE: modules/challenge-deret-aritmatika.md
================================================
# Logic Challenge - Tentukan Deret Aritmatika
## Problem
Diberikan sebuah function tentukanDeretAritmatika(arr) yang menerima satu parameter berupa array yang terdiri dari angka. Function tersebut akan mengembalikan `true` jika array dari parameter tersebut merupakan deret aritmatika. Deret aritmatika adalah sebuah deret dimana perbedaan setiap angka di deret tersebut konsisten. Contoh, [2, 4, 6, 8] adalah deret aritmatika dengan pertambahan nilai sebesar 2, dan [2, 4, 6, 9] bukanlah deret aritmatika karena perbedaan selisih antar angka yang tidak konsisten.
## Code
```JavaScript
function tentukanDeretAritmatika(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(tentukanDeretAritmatika([1, 2, 3, 4, 5, 6])); // true
console.log(tentukanDeretAritmatika([2, 4, 6, 12, 24])); // false
console.log(tentukanDeretAritmatika([2, 4, 6, 8])); // true
console.log(tentukanDeretAritmatika([2, 6, 18, 54])); // false
console.log(tentukanDeretAritmatika([1, 2, 3, 4, 7, 9])); // false
```
================================================
FILE: modules/challenge-deret-geometri.md
================================================
# Logic Challenge - Tentukan Deret Geometri
## Problem
Diberikan sebuah function tentukanDeretGeometri(arr) yang menerima satu parameter berupa array yang terdiri dari angka. Function tersebut akan mengembalikan `true` jika array dari parameter tersebut merupakan deret geometri. Deret geometri adalah sebuah deret dimana perbedaan setiap angka di deret tersebut konsisten secara perkalian. Contoh, [1, 3, 9, 27, 81] adalah deret geometri dengan pertambahan nilai sebesar pengalian 3, dan [1, 3, 9, 27, 48] bukanlah deret geometri karena perbedaan selisih antar angka yang tidak konsisten secara perkalian (27 * 3 bukanlah 48!).
## Code
```JavaScript
function tentukanDeretGeometri(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(tentukanDeretGeometri([1, 3, 9, 27, 81])); // true
console.log(tentukanDeretGeometri([2, 4, 8, 16, 32])); // true
console.log(tentukanDeretGeometri([2, 4, 6, 8])); // false
console.log(tentukanDeretGeometri([2, 6, 18, 54])); // true
console.log(tentukanDeretGeometri([1, 2, 3, 4, 7, 9])); // false
```
================================================
FILE: modules/challenge-digit-perkalian-minimum.md
================================================
# Logic Challenge - Digit Perkalian Minimum
## Problem
Diberikan sebuah function digitPerkalianMinimum(angka) yang menerima satu parameter angka. Function akan mengembalikan jumlah digit minimal dari angka yang merupakan faktor angka parameter tersebut, Contoh, jika angka adalah 24, maka faktornya adalah 1 * 24, 2 * 12, 3 * 8, dan 4 * 6. Dari antara faktor tersebut, yang digit nya paling sedikit adalah 3 * 8 atau 4 * 6, sehingga function akan me-return 2.
## Code
```JavaScript
function digitPerkalianMinimum(angka) {
// you can only write your code here!
}
// TEST CASES
console.log(digitPerkalianMinimum(24)); // 2
console.log(digitPerkalianMinimum(90)); // 3
console.log(digitPerkalianMinimum(20)); // 2
console.log(digitPerkalianMinimum(179)); // 4
console.log(digitPerkalianMinimum(1)); // 2
```
================================================
FILE: modules/challenge-faktor-persekutuan-terbesar.md
================================================
# Logic Challenge - Faktor Persekutuan Terbesar
## Problem
Diberikan sebuah function fpb(angka1, angka2) yang menerima dua parameter angka. Function akan mengembalikan nilai FPB (Faktor Persekutuan Terbesar). FPB dari dua bilangan merupakan bilangan bulat positif terbesar yang dapat membagi habis kedua bilangan tersebut.
## Code
```JavaScript
function fpb(angka1, angka2) {
// you can only write your code here!
}
// TEST CASES
console.log(fpb(12, 16)); // 4
console.log(fpb(50, 40)); // 10
console.log(fpb(22, 99)); // 11
console.log(fpb(24, 36)); // 12
console.log(fpb(17, 23)); // 1
```
================================================
FILE: modules/challenge-faktorial.md
================================================
# Logic Challenge - Faktorial (Rekursif)
## Problem
Diberikan sebuah function faktorialRekursif(angka) yang menerima satu parameter berupa angka. Function akan me-return hasil faktorial dari angka tersebut. Faktorial adalah pengalian sebuah angka dengan angka itu sendiri dikurangi dengan 1, berturut-turut hingga 1. Wajib menggunakan rekursif untuk berlatih rekursif!
Contoh:
3 faktorial = 3! = 3 * 2 * 1 = 6
4 faktorial = 4! = 4 * 3 * 2 * 1 = 24
## Code
```JavaScript
function faktorialRekursif(angka) {
// you can only write your code here!
}
// TEST CASES
console.log(faktorialRekursif(3)); // 6
console.log(faktorialRekursif(4)); // 24
console.log(faktorialRekursif(5)); // 120
console.log(faktorialRekursif(2)); // 2
console.log(faktorialRekursif(1)); // 1
```
================================================
FILE: modules/challenge-graduates.md
================================================
# Logic Challenge: Graduates
Implementasikan function graduates untuk mendapatkan daftar student yang lulus dengan aturan:
- Student dapat dinyatakan lulus apabila score lebih besar dari 75.
- Masukkan name dan score dari student ke class yang dia ikuti.
- Student yang tidak lulus tidak perlu ditampilkan.
Output yang diharapkan berupa Object Literal dengan format sebagai berikut:
```
{
<class>: [
{ name: <name>, score: <score> },
...
],
<class>: [
{ name: <name>, score: <score> },
...
],
<class>: [] //NOTE: Jika tidak ada student yang lulus, class ini akan diisi oleh array kosong
}
```
```JavaScript
function graduates (students) {
// Code disini
}
console.log(graduates([
{
name: 'Dimitri',
score: 90,
class: 'foxes'
},
{
name: 'Alexei',
score: 85,
class: 'wolves'
},
{
name: 'Sergei',
score: 74,
class: 'foxes'
},
{
name: 'Anastasia',
score: 78,
class: 'wolves'
}
]));
// {
// foxes: [
// { name: 'Dimitri', score: 90 }
// ],
// wolves: [
// { name: 'Alexei' , score: 85 },
// { name: 'Anastasia', score: 78 }
// ]
// }
console.log(graduates([
{
name: 'Alexander',
score: 100,
class: 'foxes'
},
{
name: 'Alisa',
score: 76,
class: 'wolves'
},
{
name: 'Vladimir',
score: 92,
class: 'foxes'
},
{
name: 'Albert',
score: 71,
class: 'wolves'
},
{
name: 'Viktor',
score: 80,
class: 'tigers'
}
]));
// {
// foxes: [
// { name: 'Alexander', score: 100 },
// { name: 'Vladimir', score: 92 }
// ],
// wolves: [
// { name: 'Alisa', score: 76 },
// ],
// tigers: [
// { name: 'Viktor', score: 80 }
// ]
// }
console.log(graduates([])); //{}
```
================================================
FILE: modules/challenge-hapus-simbol.md
================================================
# Logic Challenge - Hapus Simbol (Regex)
## Problem
Diberikan sebuah function hapusSimbol(str) yang menerima satu parameter berupa string. Function akan me-return string yang telah bersih dari berbagai simbol, hanya menyisakan a-z dan angka 0-9.
## Code
```JavaScript
function hapusSimbol(str) {
// you can only write your code here!
}
// TEST CASES
console.log(hapusSimbol('test%$4aa')); // test4aa
console.log(hapusSimbol('devel0p3r s3j@@ati')); // devel0p3rs3jati
console.log(hapusSimbol('ma@#k!an~')); // makan
console.log(hapusSimbol('coding')); // coding
console.log(hapusSimbol('1+3-5*2=100')); // 1352100
```
================================================
FILE: modules/challenge-highest-score.md
================================================
# Logic Challenge: Highest Score
Implementasikan function highestScore untuk mendapatkan student dengan nilai tertinggi dari
setiap class:
Output yang diharapkan berupa Object Literal dengan format sebagai berikut:
```
{
<class>: { name: <name>, score: <score> },
<class>: { name: <name>, score: <score> },
<class>: { name: <name>, score: <score> }
}
```
```JavaScript
function highestScore (students) {
// Code disini
}
// TEST CASE
console.log(highestScore([
{
name: 'Dimitri',
score: 90,
class: 'foxes'
},
{
name: 'Alexei',
score: 85,
class: 'wolves'
},
{
name: 'Sergei',
score: 74,
class: 'foxes'
},
{
name: 'Anastasia',
score: 78,
class: 'wolves'
}
]));
// {
// foxes: { name: 'Dimitri', score: 90 },
// wolves: { name: 'Alexei', score: 85 }
// }
console.log(highestScore([
{
name: 'Alexander',
score: 100,
class: 'foxes'
},
{
name: 'Alisa',
score: 76,
class: 'wolves'
},
{
name: 'Vladimir',
score: 92,
class: 'foxes'
},
{
name: 'Albert',
score: 71,
class: 'wolves'
},
{
name: 'Viktor',
score: 80,
class: 'tigers'
}
]));
// {
// foxes: { name: 'Alexander', score: 100 },
// wolves: { name: 'Alisa', score: 76 },
// tigers: { name: 'Viktor', score: 80 }
// }
console.log(highestScore([])); //{}
```
================================================
FILE: modules/challenge-hitung-huruf.md
================================================
# Logic Challenge - Hitung Huruf
## Problem
Diberikan function hitungHuruf(kalimat) yang akan menerima satu parameter berupa string. Function akan me-return kata dari kalimat yang memiliki jumlah perulangan huruf yang paling besar. Contoh: "Today, is the greatest day ever!" akan me-return "greatest" karena kata "greatest" memiliki 2 huruf e dan 2 huruf t, dan muncul lebih dulu. Jika tidak ditemukan kalimat dengan kata yang memiliki huruf berulang, return -1.
## Code
```JavaScript
function hitungHuruf(kata) {
// you can only write your code here!
}
// TEST CASES
console.log(hitungHuruf('Today, is the greatest day ever')); // greatest
console.log(hitungHuruf('I am a passionate developer')); // passionate
console.log(hitungHuruf('aku adalah anak gembala')); // adalah
console.log(hitungHuruf('rajin pangkal kaya')); // pangkal
console.log(hitungHuruf('mengayuh perahu di danau')); // danau
```
================================================
FILE: modules/challenge-hitung-jumlah-kata.md
================================================
# Logic Challenge - Menghitung Jumlah Kata
## Problem
Diberikan sebuah function hitungJumlahKata(kalimat) yang menerima parameter berupa string yang merupakan sebuah kalimat. Function akan mengembalikan jumlah kata dari kalimat tersebut. Contoh, "I have a dream" akan menghasilkan nilai 4, karena memiliki 4 kata.
## Code
```JavaScript
function hitungJumlahKata(kalimat) {
// you can only write your code here!
}
// TEST CASES
console.log(hitungJumlahKata('I have a dream')); // 4
console.log(hitungJumlahKata('Never eat shredded wheat or cake')); // 6
console.log(hitungJumlahKata('A song to sing')); // 4
console.log(hitungJumlahKata('I')); // 1
console.log(hitungJumlahKata('I believe I can code')); // 5
```
================================================
FILE: modules/challenge-kali-terus.md
================================================
# Logic Challenge - Kali Terus (Rekursif)
## Problem
Diberikan sebuah function kaliTerusRekursif(angka) yang menerima satu parameter berupa angka. Function akan memproses angka yang lebih dari satu digit menjadi satu digit dengan melakukan perkalian. Bila masih lebih dari satu digit, terus lakukan perkalian setiap digit-nya untuk pada akhirnya mendapatkan satu digit. Wajib menggunakan rekursif untuk berlatih rekursif, namun kamu boleh menggunakan looping juga disini.
Contoh:
3 => 3, karena sudah satu digit
24 => 8. Karena 24 dua digit, maka kita lakukan 2 * 4 = 8. 8 satu digit, maka hasilnya adalah 8.
654 => 0. Karena 654 tiga digit, maka lakukan 6 * 5 * 4 = 120. 120 tiga digit, maka lakukan 1 * 2 * 0 = 0. 0 satu digit, maka hasilnya adalah 0.
## Code
```JavaScript
function kaliTerusRekursif(angka) {
// you can only write your code here!
}
// TEST CASES
console.log(kaliTerusRekursif(66)); // 8
console.log(kaliTerusRekursif(3)); // 3
console.log(kaliTerusRekursif(24)); // 8
console.log(kaliTerusRekursif(654)); // 0
console.log(kaliTerusRekursif(1231)); // 6
```
================================================
FILE: modules/challenge-kelompok-angka.md
================================================
# Logic Challenge - Mengelompokkan Angka
## Problem
Diberikan sebuah function mengelompokkanAngka(arr) yang menerima satu parameter berupa array yang berisi angka-angka. Function akan me-return array multidimensi dimana array tersebut berisikan 3 kategori/kelompok:
- kelompok pertama (baris pertama) merupakan angka-angka genap
- kelompok ke-2 (baris ke-2) merupakan angka-angka ganjil
- kelompok ke-3 (baris ke-3) merupakan angka-angka kelipatan 3
Contoh jika arr inputan adalah [45, 20, 21, 2, 7] maka output: [ [ 20, 2 ], [ 7 ], [ 45, 21 ] ]
## Code
```JavaScript
function mengelompokkanAngka(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(mengelompokkanAngka([2, 4, 6])); // [ [2, 4], [], [6] ]
console.log(mengelompokkanAngka([1, 2, 3, 4, 5, 6, 7, 8, 9])); // [ [ 2, 4, 8 ], [ 1, 5, 7 ], [ 3, 6, 9 ] ]
console.log(mengelompokkanAngka([100, 151, 122, 99, 111])); // [ [ 100, 122 ], [ 151 ], [ 99, 111 ] ]
console.log(mengelompokkanAngka([])); // [ [], [], [] ]
```
================================================
FILE: modules/challenge-kelompok-hewan.md
================================================
# Logic Challenge - Mengelompokkan Hewan
## Problem
Diberikan sebuah function groupAnimals(arr) yang menerima satu parameter berupa array yang berisi string. Function akan me-return array multidimensi dimana array tersebut berisikan kategori/kelompok array yang dikumpulkan sesuai dengan abjad depannya. Abjad harus berurut dari a-z (jika ada). Untuk kasus ini, anggap saja semua text lowercase.
Contoh jika `animals` adalah `["ayam", "kucing", "bebek", "bangau", "zebra"]`
maka akan menampilkan output: `[ [ "ayam" ], [ "bebek", "bangau" ], [ "kucing ], [ "zebra" ] ]`
Urutan hewan dalam array setiap pengelompokan huruf tidak penting.
## Code
```JavaScript
function groupAnimals(animals) {
// you can only write your code here!
}
// TEST CASES
console.log(groupAnimals(['cacing', 'ayam', 'kuda', 'anoa', 'kancil']));
// [ ['ayam', 'anoa'], ['cacing'], ['kuda', 'kancil'] ]
console.log(groupAnimals(['cacing', 'ayam', 'kuda', 'anoa', 'kancil', 'unta', 'cicak' ]));
// [ ['ayam', 'anoa'], ['cacing', 'cicak'], ['kuda', 'kancil'], ['unta'] ]
```
================================================
FILE: modules/challenge-konversi-menit.md
================================================
# Logic Challenge - Konversi Menit
## Problem
Diberikan sebuah function konversiMenit(menit) yang menerima satu parameter berupa angka yang merupakan ukuran waktu dalam menit. Function akan me-return string waktu dalam format jam:menit berdasarkan menit tersebut. Contoh, jika menit adalah 63, maka function akan me-return "1:03".
## Code
```JavaScript
function konversiMenit(menit) {
// you can only write your code here!
}
// TEST CASES
console.log(konversiMenit(63)); // 1:03
console.log(konversiMenit(124)); // 2:04
console.log(konversiMenit(53)); // 0:53
console.log(konversiMenit(88)); // 1:28
console.log(konversiMenit(120)); // 2:00
```
================================================
FILE: modules/challenge-main-pseudocode.md
================================================
# Pseudocode Challenge
Soal ini terdiri dari 4 nomor!
## 1. Newton Second Law
Bunyi hukum II Newton adalah:
```
Percepatan sebuah benda akan sebanding dengan gaya yang diberikan pada benda dan berbanding terbalik dengan massa benda. Arah percepatan benda sama dengan arah gaya total yang diberikan pada benda.
```
Secara matematis hukum II Newton dirumuskan sebagai berikut:
ΣF = m x a
ΣF = resultan gaya (Newton)
m = massa benda (kg)
a = percepatan benda (m/s2)
Berdasarkan keterangan di atas, buatlah sebuah algoritma / pseudocode untuk menghitung resultan gaya pada sebuah mobil yang memiliki massa benda 600 kg dan ketika didorong oleh tiga orang percepatannya adalah 2 m/s2!
## 2. Tahun Kabisat
Apa yang kamu ketahui tentang tanggal 29 Februari? Kamu pasti tahu jika suatu tahun memiliki tanggal 29 Februari berarti tahun tersebut merupakan tahun kabisat.
Dalam kalender Gregorian, tahun kabisat memiliki beberapa kriteria yaitu antara lain:
- Jika tahun habis di bagi 4 dan tidak habis di bagi 100, atau
- Jika tahun habis di bagi 4, habis di bagi 100 dan habis di bagi 400
Buatlah algoritma & pseudocode untuk menentukan apakah suatu tahun merupakan tahun kabisat atau bukan!
## 3. Laundry Day
Foxie akan mencuci pakaiannya menggunakan mesin cuci. Pakaian yang akan dicuci oleh Foxie sebanyak 20 dan akan dimasukkan ke mesin cuci.
Mesin cuci akan dinyalakan jika semua pakaian Foxie sudah masuk ke mesin cuci.
Bantulah Foxie untuk menghitung jumlah pakaian yang akan dimasukkan ke mesin cuci menggunakan algoritma & pseudocode perulangan!
## 4. Periksa Kuku
Seorang guru akan memeriksa kuku siswa-siswinya yang sebanyak 40 orang dengan cara berkeliling kelas. Jika guru menemukan siswa/siswi yang memiliki kuku yang panjang maka guru akan menghukum siswa/siswi tersebut, jika tidak guru akan memuji siswa/siswi tersebut.
Buatlah algoritma & pseudocode untuk permasalahan diatas.
================================================
FILE: modules/challenge-makan-terus.md
================================================
# Logic Challenge - Makan Terus (Rekursif)
## Problem
Seorang customer sedang makan di sebuah restaurant AYCE(All You Can Eat). Dia akan terus makan sampai waktu yang diberikan oleh restaurant tersebut habis. Setiap customer memesan/mengambil makanan dan memakan pesanannya maka waktu customer berkurang 15 menit. Begitu seterusnya sampai waktunya habis .Customer masih bisa memesan/mengambil makanan selama waktunya belum 0.
Diberikan sebuah function makanTerusRekursif(waktu) yang menerima satu parameter berupa waktu. Function akan memproses jika waktu masih ada. Function akan mengembalikan/me-return berapa kali seorang customer memesan/mengambil makanan dalam waktu yang diberikan. Wajib menggunakan rekursif.
Contoh:
45 => 3
100 => 7
10 => 1
## Code
```JavaScript
function makanTerusRekursif(waktu) {
// you can only write your code here!
}
// TEST CASES
console.log(makanTerusRekursif(66)); // 5
console.log(makanTerusRekursif(100)); // 7
console.log(makanTerusRekursif(90)); // 6
console.log(makanTerusRekursif(10)); // 1
console.log(makanTerusRekursif(0)); // 0
================================================
FILE: modules/challenge-melee-ranged-grouping.md
================================================
# Logic Challenge: Melee Ranged Grouping
Diberikan function meleeRangedGrouping yang menerima 1 parameter berupa string, implementasikan
meleeRangedGrouping agar dapat menghasilkan multidimensional array seperti yang diminta.
Format string yang diberikan adalah:
`<nama_hero>-<tipe_hero>,<nama_hero>-<tipe-hero>, ...`
Output yang diharapkan:
`[ [ <daftar_hero_dengan_tipe_ranged> ], [ <daftar_hero_dengan_tipe_melee> ] ]`
Jika input adalah string kosong ('') maka return array kosong
[Submit Tugas Disini](https://github.com/phase-0-branch-exercises/melee-ranged-grouping)
```JavaScript
function meleeRangedGrouping (str) {
//your code here
}
// TEST CASE
console.log(meleeRangedGrouping('Razor-Ranged,Invoker-Ranged,Meepo-Melee,Axe-Melee,Sniper-Ranged'));
// [ ['Razor', 'Invoker', 'Sniper'], ['Meepo', 'Axe'] ]
console.log(meleeRangedGrouping('Drow Ranger-Ranged,Chen-Ranged,Dazzle-Ranged,Io-Ranged'));
// [ ['Drow Ranger', 'Chen', 'Dazzle', 'Io'], [] ]
console.log(meleeRangedGrouping('')); // []
```
================================================
FILE: modules/challenge-most-frequent-largest-numbers.md
================================================
# Logic Challenge - Most Frequent Largest Numbers
## Problem
Implementasikan function `sorting` dan `getTotal` untuk mendapatkan angka yang paling besar dan mengetahui berapa kali angka tersebut muncul di dalam `arrNumber`.
Dengan HANYA mengubah code di dalam 2 function yang diberikan (`sorting` dan `getTotal`). Dilarang mengubah isi dalam function `mostFrequentLargestNumbers`!
```JavaScript
function sorting(arrNumber) {
// code di sini
}
function getTotal(arrNumber) {
// code di sini
}
function mostFrequentLargestNumbers(arrNumber) {
var listSort = sorting(arrNumber);
var countHighest = getTotal(listSort);
return countHighest;
}
console.log(mostFrequentLargestNumbers([2, 8, 4, 6, 8, 5, 8, 4]));
//'angka paling besar adalah 8 dan jumlah kemunculan sebanyak 3 kali'
console.log(mostFrequentLargestNumbers([122, 122, 130, 100, 135, 100, 135, 150]));
//'angka paling besar adalah 150 dan jumlah kemunculan sebanyak 1 kali'
console.log(mostFrequentLargestNumbers([1, 1, 1, 1]));
//'angka paling besar adalah 1 dan jumlah kemunculan sebanyak 4 kali'
console.log(mostFrequentLargestNumbers([]));
//''
```
================================================
FILE: modules/challenge-naik-angkot.md
================================================
# Logic Challenge - Naik Angkot
## Problem
Diberikan function naikAngkot(listPenumpang) yang akan menerima satu parameter berupa array dua dimensi. Function akan me-return array of object.
Diberikan sebuah rute, dari A - F. Penumpang diwajibkan membayar Rp2000 setiap melewati satu rute.
Contoh:
input: [['Dimitri', 'B', 'F']]
output: [{ penumpang: 'Dimitri', naikDari: 'B', tujuan: 'F', bayar: 8000 }]
## Code
```JavaScript
function naikAngkot(arrPenumpang) {
rute = ['A', 'B', 'C', 'D', 'E', 'F'];
//your code here
}
//TEST CASE
console.log(naikAngkot([['Dimitri', 'B', 'F'], ['Icha', 'A', 'B']]));
// [ { penumpang: 'Dimitri', naikDari: 'B', tujuan: 'F', bayar: 8000 },
// { penumpang: 'Icha', naikDari: 'A', tujuan: 'B', bayar: 2000 } ]
console.log(naikAngkot([])); //[]
```
================================================
FILE: modules/challenge-object-literal.md
================================================
# Logic Challenge - Change Me!
## Problem
Diberikan sebuah function changeMe(arr) yang menerima satu parameter berupa array multidimensi dimana array tersebut berisi value (pasti berurut dari kiri ke kanan) First Name, Last Name, Gender dan Birth Year .
Fungsi ini akan menampilkan object literal yang memiliki property firstName, lastName, gender dan age. Nilai age didapatkan dari tahun sekarang dikurang tahun lahir. Jika tahun lahir tidak diisi atau tahun lahir lebih besar dibandingkan tahun sekarang maka age akan berisi 'Invalid Birth Year'
Contoh jika arr inputan adalah [['Platinum', 'Fox', 'female', 1995], ['John', 'Doe', 'male', 2000]]
maka output:
1. Platinum Fox:
{ firstName: 'Platinum',
lastName: 'Fox',
gender: 'female',
age: 23 }
2. John Doe:
{ firstName: 'John', lastName: 'Doe', gender: 'male', age: 18 }
## Code
```JavaScript
function changeMe(arr) {
// you can only write your code here!
}
// TEST CASES
changeMe([['Christ', 'Evans', 'Male', 1982], ['Robert', 'Downey', 'Male']]); // 1. Christ Evans:
// { firstName: 'Christ',
// lastName: 'Evans',
// gender: 'Male',
// age: 37 }
// 2. Robert Downey:
// { firstName: 'Robert',
// lastName: 'Downey',
// gender: 'Male',
// age: 'Invalid Birth Year' }
changeMe([]); // ""
```
================================================
FILE: modules/challenge-palindrome-angka.md
================================================
# Logic Challenge - Number Palindrome
## Problem
Diberikan sebuah function angkaPalindrome(angka) yang menerima satu parameter angka. Function akan me-return angka selanjutnya yang mengandung nilai angka palindrome. Contoh, jika angka adalah 27, maka function akan me-return nilai 33 karena angka 33 adalah angka palindrom. Jika angka dari awal sudah merupakan palindrome, maka function harus mencari angka selanjutnya yang palindrome. Contoh, jika angka adalah 8, walaupun dia sudah palindrome, harus mencari angka selanjutnya yang palindrome, yaitu 9.
## Code
```JavaScript
function angkaPalindrome(num) {
// you can only write your code here!
}
// TEST CASES
console.log(angkaPalindrome(8)); // 9
console.log(angkaPalindrome(10)); // 11
console.log(angkaPalindrome(117)); // 121
console.log(angkaPalindrome(175)); // 181
console.log(angkaPalindrome(1000)); // 1001
```
================================================
FILE: modules/challenge-palindrome.md
================================================
# Logic Challenge - Palindrome
## Problem
Diberikan sebuah function palindrome(kata) yang menerima satu parameter. Function tersebut akan mengembalikan nilai true jika kata merupakan palindrome, dan false jika bukan. Kata palindrome adalah sebuah kata yang jika dibalik, tetap sama. Contoh, 'katak' dibalik tetaplah 'katak'.
## Code
```JavaScript
function palindrome(kata) {
// you can only write your code here!
}
// TEST CASES
console.log(palindrome('katak')); // true
console.log(palindrome('blanket')); // false
console.log(palindrome('civic')); // true
console.log(palindrome('kasur rusak')); // true
console.log(palindrome('mister')); // false
```
================================================
FILE: modules/challenge-pasangan-terbesar.md
================================================
# Logic Challenge - Pasangan Angka Terbesar
## Problem
Diberikan sebuah function pasanganTerbesar(angka) yang menerima 1 parameter berupa angka. Functiona akan menentukan pasangan dua digit angka mana yang paling besar dan me-return angka tersebut. Contoh, jika angka adalah 183928, maka function akan me-return 92, pasangan dua digit angka yang paling besar diantara yang lainnya.
## Code
```JavaScript
function pasanganTerbesar(num) {
// you can only write your code here!
}
// TEST CASES
console.log(pasanganTerbesar(641573)); // 73
console.log(pasanganTerbesar(12783456)); // 83
console.log(pasanganTerbesar(910233)); // 91
console.log(pasanganTerbesar(71856421)); // 85
console.log(pasanganTerbesar(79918293)); // 99
```
================================================
FILE: modules/challenge-password-generator.md
================================================
# Logic Challenge - Password Generator
## Problem
Diberikan function changeVocals, reverseWord, setLowerUpperCase, removeSpaces, dan passwordGenerator
Pada function passwordGenerator implementasikan requirement dibawah ini untuk membuat password (harus berurutan):
1. Ganti semua huruf vokal menggunakan function changeVocals dengan aturan huruf vokal yang diganti akan menjadi huruf setelah huruf vokal itu (ex: a -> b, i -> j, u -> v, e -> f, o -> p, A -> B, I -> J, U -> V, E -> F, O -> P)
2. Balikkan/reverse kata yang sudah kita ganti huruf vokalnya menggunakan reverseWord
3. Gunakan function setLowerUpperCase untuk mengganti huruf besar menjadi kecil dan sebaliknya
4. Gunakan function removeSpaces untuk menghilangkan semua spasi di dalam string yang sudah
kita manipulasi
### NOTE:
Semua manipulasi string (changeVocals, reverseWord, setLowerUpperCase, removeSpaces) diletakkan di passwordGenerator dan return password-nya dari function ini juga
```JavaScript
function changeVocals (str) {
//code di sini
}
function reverseWord (str) {
//code di sini
}
function setLowerUpperCase (str) {
//code di sini
}
function removeSpaces (str) {
//code di sini
}
function passwordGenerator (name) {
//code di sini
}
console.log(passwordGenerator('Sergei Dragunov')); // 'VPNVGBRdJFGRFs'
console.log(passwordGenerator('Dimitri Wahyudiputra')); // 'BRTVPJDVYHBwJRTJMJd'
console.log(passwordGenerator('Alexei')); // 'JFXFLb'
console.log(passwordGenerator('Alex')); // 'Minimal karakter yang diinputkan adalah 5 karakter'
```
================================================
FILE: modules/challenge-perkalian-unik.md
================================================
# Logic Challenge - Perkalian Unik
## Problem
Diberikan sebuah function perkalianUnik(arr) yang menerima satu parameter berupa array yang berisikan angka. Function akan me-return array baru yang mengandung angka yang setiap nilainya merupakan hasil kali angka lain yang bukan angka itu sendiri. Contoh, jika arr adalah [1, 2, 3, 4, 5], maka function akan mereturn [120, 60, 40, 30, 24], karena 120 adalah 2 * 3 * 4 * 5, 60 adalah 1 * 3 * 4 * 5, 40 adalah 1 * 2 * 4 * 5, dan seterusnya.
## Code
```JavaScript
function perkalianUnik(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(perkalianUnik([2, 4, 6])); // [24, 12, 8]
console.log(perkalianUnik([1, 2, 3, 4, 5])); // [120, 60, 40, 30, 24]
console.log(perkalianUnik([1, 4, 3, 2, 5])); // [120, 30, 40, 60, 24]
console.log(perkalianUnik([1, 3, 3, 1])); // [9, 3, 3, 9]
console.log(perkalianUnik([2, 1, 8, 10, 2])); // [160, 320, 40, 32, 160]
```
================================================
FILE: modules/challenge-perpangkatan-dua.md
================================================
# Logic Challenge - Perpangkatan Dua
## Problem
Diberikan sebuah function perpangkatanDua(angka) yang menerima satu parameter berupa angka. Function akan me-return `n` jika angka tersebut merupakan hasil dari dua pangkat `n`. jika tidak, return -1. Contoh, jika angka adalah 16, dan karena 2^4 adalah 16, maka function akan me-return 4. Contoh kedua, jika angka adalah 17, karena 17 bukan merupakan hasil perpangkatan angka 2, maka function akan me-return -1.
## Code
```JavaScript
function perpangkatanDua(str) {
// you can only write your code here!
}
// TEST CASES
console.log(perpangkatanDua(64)); // 6
console.log(perpangkatanDua(22)); // -1
console.log(perpangkatanDua(16)); // 4
console.log(perpangkatanDua(222)); // -1
console.log(perpangkatanDua(1)); // 0
```
================================================
FILE: modules/challenge-recursive-addition.md
================================================
# Logic Challenge - Recursive Addition
## Problem
Have the function recursiveAddition(num) add up all the numbers from num to 1. For example: if the input is 4 then your program should return 10 because 4 + 3 + 2 + 1 = 10.
## Code
```JavaScript
function recursiveAddition(num) {
// you can only write your code here!
}
// TEST CASES
console.log(recursiveAddition(4)); // 10
console.log(recursiveAddition(5)); // 15
console.log(recursiveAddition(3)); // 6
console.log(recursiveAddition(1)); // 1
console.log(recursiveAddition(6)); // 21
```
================================================
FILE: modules/challenge-shopping-time.md
================================================
# Logic Challenge - Shopping Time!
## Problem
Diberikan sebuah function shoppingTime(memberId, money) yang menerima dua parameter berupa string dan number. Parameter pertama merupakan memberId dan parameter ke-2 merupakan value uang yang dibawa oleh member tersebut.
Toko X sedang melakukan SALE untuk beberapa barang, yaitu:
- Sepatu brand Stacattu seharga 1500000
- Baju brand Zoro seharga 500000
- Baju brand H&N seharga 250000
- Sweater brand Uniklooh seharga 175000
- Casing Handphone seharga 50000
Buatlah function yang akan mengembalikan sebuah object dimana object tersebut berisikan informasi memberId, money, listPurchased dan changeMoney.
- Jika memberId kosong maka tampilkan "Mohon maaf, toko X hanya berlaku untuk member saja"
- Jika uang yang dimiliki kurang dari 50000 maka tampilkan "Mohon maaf, uang tidak cukup"
- Member yang berbelanja di toko X akan membeli barang yang paling mahal terlebih dahulu dan akan membeli barang-barang yang sedang SALE masing-masing 1 jika uang yang dimilikinya masih cukup.
Contoh jika inputan memberId: '324193hDew2' dan money: 700000
maka output:
{ memberId: '324193hDew2',
money: 700000,
listPurchased: [ 'Baju Zoro', 'Sweater Uniklooh' ],
changeMoney: 25000
}
## Code
```JavaScript
function shoppingTime(memberId, money) {
// you can only write your code here!
}
// TEST CASES
console.log(shoppingTime('1820RzKrnWn08', 2475000));
//{ memberId: '1820RzKrnWn08',
// money: 2475000,
// listPurchased:
// [ 'Sepatu Stacattu',
// 'Baju Zoro',
// 'Baju H&N',
// 'Sweater Uniklooh',
// 'Casing Handphone' ],
// changeMoney: 0 }
console.log(shoppingTime('82Ku8Ma742', 170000));
//{ memberId: '82Ku8Ma742',
// money: 170000,
// listPurchased:
// [ 'Casing Handphone' ],
// changeMoney: 120000 }
console.log(shoppingTime('', 2475000)); //Mohon maaf, toko X hanya berlaku untuk member saja
console.log(shoppingTime('234JdhweRxa53', 15000)); //Mohon maaf, uang tidak cukup
console.log(shoppingTime()); ////Mohon maaf, toko X hanya berlaku untuk member saja
```
================================================
FILE: modules/challenge-tambah-dash.md
================================================
# Logic Challenge - Tambah Dash / Strip
## Problem
Diberikan sebuah function tambahDash(str) yang menerima satu parameter berupa string. Function akan mengembalikan str tersebut dengan menambahkan simbol dash ('-') di antara dua angka ganjil di dalam string yang menjadi parameter tersebut. Contoh, jika str adalah 1233897, function akan mengembalikan nilai '123-389-7'. 0 bukanlah angka ganjil.
## Code
```JavaScript
function tambahDash(str) {
// you can only write your code here!
}
// TEST CASES
console.log(tambahDash('454793')); // '4547-9-3'
console.log(tambahDash('1739028')); // '1-7-3-9028'
console.log(tambahDash('891829')); // '89-1829'
console.log(tambahDash('10192')); // '101-92'
console.log(tambahDash('222222')); // '222222'
```
================================================
FILE: modules/challenge-target-terdekat.md
================================================
# Logic Challenge - Target Terdekat
## Problem
Diberikan sebuah function targetTerdekat(arr) yang menerima satu parameter berupa array yang terdiri dari karakter. Function akan me-return jarak spasi antar karakter 'o' dengan karakter 'x' yang terdekat. Contoh, jika arr adalah ['x', ' ', 'o', ' ', ' ', 'x'], maka jarak terdekat dari 'o' ke 'x' adalah 2. Jika tidak ditemukan 'x' sama sekali, function akan me-return nilai 0.
## Code
```JavaScript
function targetTerdekat(arr) {
// you can only write your code here!
}
// TEST CASES
console.log(targetTerdekat([' ', ' ', 'o', ' ', ' ', 'x', ' ', 'x'])); // 3
console.log(targetTerdekat(['o', ' ', ' ', ' ', 'x', 'x', 'x'])); // 4
console.log(targetTerdekat(['x', ' ', ' ', ' ', 'x', 'x', 'o', ' '])); // 1
console.log(targetTerdekat([' ', ' ', 'o', ' '])); // 0
console.log(targetTerdekat([' ', 'o', ' ', 'x', 'x', ' ', ' ', 'x'])); // 2
```
================================================
FILE: modules/challenge-toko-x.md
================================================
# Logic Challenge - Toko X
## Problem
Toko X yang sedang melakukan SALE ingin menghitung jumlah profit untuk setiap jenis barang yang terjual pada hari itu.
Barang-barang SALE yang akan dihitung penjualannya:
- Sepatu brand Stacattu seharga 1500000 dan stock barang yang tesedia 10
- Baju brand Zoro seharga 500000 dan stock barang yang tesedia 2
- Sweater brand Uniklooh seharga 175000 dan stock barang yang tersedia 1
Function akan menerima array yang berisikan object pembeli (nama pembeli, barang yang ingin dibeli dan jumlah barang yang dibelinya). Jika stock barang kurang dari jumlah yang ingin dibeli oleh pembeli maka pembeli batal untuk membeli barang tersebut.
Function countProfit akan mengembalikan/me-return sebuah array of object dimana array tersebut berisi objek-objek barang dari toko X tersebut yang berisikan info nama barang, siapa saja yang membeli, sisa stock barang dan total pemasukan untuk barang tersebut
## Code
```JavaScript
function countProfit(shoppers) {
var listBarang = [ ['Sepatu Stacattu', 1500000, 10],
['Baju Zoro', 500000, 2],
['Sweater Uniklooh', 175000, 1]
];
// you can only write your code here!
}
// TEST CASES
console.log(countProfit([{name: 'Windi', product: 'Sepatu Stacattu', amount: 2}, {name: 'Vanessa', product: 'Sepatu Stacattu', amount: 3}, {name: 'Rani', product: 'Sweater Uniklooh', amount: 2}]));
//[ { product: 'Sepatu Stacattu',
// shoppers: [ 'Windi', 'Vanessa' ],
// leftOver: 5,
// totalProfit: 7500000 },
// { product: 'Baju Zoro',
// shoppers: [],
// leftOver: 2,
// totalProfit: 0 },
// { product: 'Sweater Uniklooh',
// shoppers: [],
// leftOver: 1,
// totalProfit: 0 } ]
console.log(countProfit([{name: 'Windi', product: 'Sepatu Stacattu', amount: 8}, {name: 'Vanessa', product: 'Sepatu Stacattu', amount: 10}, {name: 'Rani', product: 'Sweater Uniklooh', amount: 1}, {name: 'Devi', product: 'Baju Zoro', amount: 1}, {name: 'Lisa', product: 'Baju Zoro', amount: 1}]));
// [ { product: 'Sepatu Stacattu',
// shoppers: [ 'Windi' ],
// leftOver: 2,
// totalProfit: 12000000 },
// { product: 'Baju Zoro',
// shoppers: [ 'Devi', 'Lisa' ],
// leftOver: 0,
// totalProfit: 1000000 },
// { product: 'Sweater Uniklooh',
// shoppers: [ 'Rani' ],
// leftOver: 0,
// totalProfit: 175000 } ]
console.log(countProfit([{name: 'Windi', product: 'Sepatu Naiki', amount: 5}]));
// [ { product: 'Sepatu Stacattu',
// shoppers: [],
// leftOver: 10,
// totalProfit: 0 },
// { product: 'Baju Zoro',
// shoppers: [],
// leftOver: 2,
// totalProfit: 0 },
// { product: 'Sweater Uniklooh',
// shoppers: [],
// leftOver: 1,
// totalProfit: 0 } ]
console.log(countProfit([])); //[]
```
================================================
FILE: modules/challenge-total-digit.md
================================================
# Logic Challenge - Total Digit (Rekursif)
## Problem
Diberikan sebuah function totalDigitRekursif(angka) yang menerima satu parameter berupa angka. Function akan me-return nilai total dari digit tersebut dengan menambahkan satu per satu angka dari digit paling depan ke paling belakang. Wajib menggunakan rekursif untuk berlatih rekursif! Disarankan untuk tidak menggunakan looping for untuk soal ini.
Contoh:
512, berarti outputnya adalah 8, karena 5 + 1 + 2 = 8.
1542, berarti outputnya adalah 12, karena 1 + 5 + 4 + 2 = 12.
## Code
```JavaScript
function totalDigitRekursif(angka) {
// you can only write your code here!
}
// TEST CASES
console.log(totalDigitRekursif(512)); // 8
console.log(totalDigitRekursif(1542)); // 12
console.log(totalDigitRekursif(5)); // 5
console.log(totalDigitRekursif(21)); // 3
console.log(totalDigitRekursif(11111)); // 5
```
================================================
FILE: modules/challenge-tukar-besar-kecil.md
================================================
# Logic Challenge - Tukar Besar Kecil
## Problem
Diberikan function tukarBesarKecil(kalimat) yang menerima satu parameter berupa string. Function akan me-return string tersebut dengan menukar karakter yang uppercase menjadi lowercase, dan sebaliknya. Spasi dan simbol diabaikan.
## Code
```JavaScript
function tukarBesarKecil(kalimat) {
// you can only write your code here!
}
// TEST CASES
console.log(tukarBesarKecil('Hello World')); // "hELLO wORLD"
console.log(tukarBesarKecil('I aM aLAY')); // "i Am Alay"
console.log(tukarBesarKecil('My Name is Bond!!')); // "mY nAME IS bOND!!"
console.log(tukarBesarKecil('IT sHOULD bE me')); // "it Should Be ME"
console.log(tukarBesarKecil('001-A-3-5TrdYW')); // "001-a-3-5tRDyw"
```
================================================
FILE: modules/challenge-ubah-huruf.md
================================================
# Logic Challenge - Ubah Huruf
## Problem
Diberikan function ubahHuruf(kata) yang akan menerima satu parameter berupa string. Functiona akan me-return sebuah kata baru dimana setiap huruf akan digantikan dengan huruf alfabet setelahnya. Contoh, huruf a akan menjadi b, c akan menjadi d, k menjadi l, dan z menjadi a.
## Code
```JavaScript
function ubahHuruf(kata) {
// you can only write your code here!
}
// TEST CASES
console.log(ubahHuruf('wow')); // xpx
console.log(ubahHuruf('developer')); // efwfmpqfs
console.log(ubahHuruf('javascript')); // kbwbtdsjqu
console.log(ubahHuruf('keren')); // lfsfo
console.log(ubahHuruf('semangat')); // tfnbohbu
```
================================================
FILE: modules/challenge-ubah-kapital.md
================================================
# Logic Challenge - Ubah Kapital
## Problem
Diberikan function ubahKapital(kalimat) yang menerima satu parameter berupa string. Function akan me-return nilai berupa kalimat dimana setiap kata dimulai dengan huruf besar. Contoh, jika input adalah "saya makan sushi", maka output adalah "Saya Makan Sushi".
## Code
```JavaScript
function ubahKapital(kalimat) {
// you can only write your code here!
}
// TEST CASES
console.log(ubahKapital('saya makan sushi')); // Saya Makan Sushi
console.log(ubahKapital('programming adalah hobi saya')); // Programming Adalah Hobi Saya
console.log(ubahKapital('menjadi developer adalah cita-cita saya')); // Menjadi Developer Adalah Cita-cita Saya
console.log(ubahKapital('i have a dream')); // I Have A Dream
console.log(ubahKapital('coding is fun')); // Coding Is Fun
```
================================================
FILE: modules/challenge-urutkan-abjad.md
================================================
# Logic Challenge - Mengurutkan Abjad
## Problem
Diberikan sebuah function urutkanAbjad(str) yang menerima satu parameter berupa string. Function tersebut akan mengembalikan string baru yang telah diubah urutan abjadnya dari a hingga z. Contohnya, halo akan menjadi ahlo. Kamu tidak perlu memikirkan apabila ada simbol ataupun angka didalam string tersebut.
## Code
```JavaScript
function urutkanAbjad(str) {
// you can only write your code here!
}
// TEST CASES
console.log(urutkanAbjad('hello')); // 'ehllo'
console.log(urutkanAbjad('truncate')); // 'acenrttu'
console.log(urutkanAbjad('developer')); // 'deeeloprv'
console.log(urutkanAbjad('software')); // 'aeforstw'
console.log(urutkanAbjad('aegis')); // 'aegis'
```
================================================
FILE: modules/challenge-x-dan-o.md
====================================
gitextract_d4_qmvmm/
├── .gitignore
├── FINISH.md
├── README-WEEK-1.md
├── README-WEEK-2.md
├── README-WEEK-3.md
├── README-WEEK-4.md
├── README-WEEK-5.md
├── README-WEEK-6-deprecated.md
├── README-WEEK-6.md
├── README.md
├── checklist.md
└── modules/
├── README-WEEK-5-old-dom.md
├── algorithm-pseudocode.md
├── anchor-akses-array.md
├── anchor-basic-function.md
├── anchor-before-recursive.md
├── anchor-belajar-for.md
├── anchor-belajar-operator-mtk.md
├── anchor-belajar-variabel.md
├── anchor-belajar-while.md
├── anchor-case-to-pseudocode.md
├── anchor-css-layouting.md
├── anchor-css-selector-and-styling.md
├── anchor-es5-to-es6.md
├── anchor-es6-functional.md
├── anchor-es6-oop-start.md
├── anchor-es6-oop.md
├── anchor-jquery.md
├── anchor-js-dom-creation.md
├── anchor-js-dom-manipulation.md
├── anchor-js-dom-transverse-manipulation.md
├── anchor-js-dom-web-app.md
├── anchor-js-form-validation.md
├── anchor-js-object-literal.md
├── anchor-json.md
├── anchor-laman-web-pertamaku.md
├── anchor-loop-array.md
├── anchor-main-loop-asterisks.md
├── anchor-main-loop.md
├── anchor-main-string.md
├── anchor-menggunakan-if-else-2.md
├── anchor-menggunakan-if-else.md
├── anchor-mixed-array.md
├── anchor-object-1.md
├── anchor-object-2.md
├── anchor-oop-1.md
├── anchor-pseudocode.md
├── anchor-pseudocode2.md
├── anchor-recursive.md
├── anchor-switch-case.md
├── angka-kuadrat.md
├── animation-using-css-and-js.md
├── app-design-architecture.md
├── array-1.md
├── ask-search-read-smarter.md
├── assets/
│ ├── css-anchor-styling.css
│ ├── example.css
│ ├── example.html
│ ├── example.js
│ └── style.css
├── bilangan-faktor.md
├── blockly-games.md
├── blog.md
├── bootstrap.md
├── career.md
├── cek-angka.md
├── cek-prima.md
├── cek-string.md
├── challenge-algoritma-hukum-newton.md
├── challenge-algoritma-laundry-day.md
├── challenge-algoritma-periksa-kuku.md
├── challenge-algoritma-tahun-kabisat.md
├── challenge-angka-prima.md
├── challenge-balik-kata.md
├── challenge-bandingkan-angka.md
├── challenge-cari-mean.md
├── challenge-cari-median.md
├── challenge-cari-modus.md
├── challenge-cari-pelaku.md
├── challenge-cek-ab.md
├── challenge-damage-calculation.md
├── challenge-deep-sum.md
├── challenge-deret-aritmatika.md
├── challenge-deret-geometri.md
├── challenge-digit-perkalian-minimum.md
├── challenge-faktor-persekutuan-terbesar.md
├── challenge-faktorial.md
├── challenge-graduates.md
├── challenge-hapus-simbol.md
├── challenge-highest-score.md
├── challenge-hitung-huruf.md
├── challenge-hitung-jumlah-kata.md
├── challenge-kali-terus.md
├── challenge-kelompok-angka.md
├── challenge-kelompok-hewan.md
├── challenge-konversi-menit.md
├── challenge-main-pseudocode.md
├── challenge-makan-terus.md
├── challenge-melee-ranged-grouping.md
├── challenge-most-frequent-largest-numbers.md
├── challenge-naik-angkot.md
├── challenge-object-literal.md
├── challenge-palindrome-angka.md
├── challenge-palindrome.md
├── challenge-pasangan-terbesar.md
├── challenge-password-generator.md
├── challenge-perkalian-unik.md
├── challenge-perpangkatan-dua.md
├── challenge-recursive-addition.md
├── challenge-shopping-time.md
├── challenge-tambah-dash.md
├── challenge-target-terdekat.md
├── challenge-toko-x.md
├── challenge-total-digit.md
├── challenge-tukar-besar-kecil.md
├── challenge-ubah-huruf.md
├── challenge-ubah-kapital.md
├── challenge-urutkan-abjad.md
├── challenge-x-dan-o.md
├── cli-git-github-practice.md
├── code-combat.md
├── code-documentation.md
├── codecademy.md
├── coderbyte-introduction.md
├── codewars.md
├── collaboration.md
├── color.md
├── contact-form.md
├── contact-list.md
├── core-values.md
├── css3-advanced.md
├── css3-basics.md
├── css3-rules.md
├── database.md
├── dev-ecosystem-community.md
├── editor.md
├── faktor-prima.md
├── format-angka.md
├── format-huruf.md
├── fox-hub-guide.md
├── functional-basics.md
├── gallery-slide.md
├── ganjil-genap-dll.md
├── geser-huruf.md
├── git-branch-anchor.md
├── git-github-basics.md
├── github-pages-rev.md
├── github-pages.md
├── h8-challenge-checker.md
├── hinting-linting.md
├── html-css-code-style.md
├── html5-basics.md
├── html5-boilerplate.md
├── html5-elements.md
├── html5-forms-basics.md
├── index-prima.md
├── internet-web.md
├── introduce-yourself.md
├── is-even.md
├── jenis-bilangan.md
├── jquery-bootstrap.md
├── jquery.md
├── js-application.md
├── js-array.md
├── js-basics.md
├── js-code-style.md
├── js-data.md
├── js-dom-creation.md
├── js-dom-devtools.md
├── js-dom-events.md
├── js-dom-intro.md
├── js-dom-style.md
├── js-dom-transversing.md
├── js-es6-arrow-function.md
├── js-es6-scope.md
├── js-es6.md
├── js-events.md
├── js-first-time.md
├── js-function-method.md
├── js-function-recursive.md
├── js-logic.md
├── js-node.md
├── js-object-json.md
├── js-object-literal.md
├── js-scope.md
├── js-string-reference.md
├── js-style-guide.md
├── js-transpilation.md
├── js-world.md
├── key-competencies.md
├── konversi-huruf-angka.md
├── konversi-waktu.md
├── markdown-anchor.md
├── markdown.md
├── math-basics.md
├── math-object-js.md
├── menghias-laman-html.md
├── menghias-laman-html2.md
├── menghias-laman-html3.md
├── modular-design.md
├── news-article.md
├── number-guess.md
├── number-system.md
├── oop-basics.md
├── oop-design.md
├── open-source.md
├── order-string.md
├── pair-programming.md
├── palindrome-2.md
├── palindrome.md
├── pascal-triangle-sum.md
├── phase-0-setup-guide.md
├── pola-angka.md
├── programming-paradigm.md
├── promo-cc.md
├── promo-menu.md
├── rainbow-text.md
├── range-angka.md
├── refactoring.md
├── reflection.md
├── regular-expressions.md
├── remove-duplication.md
├── repeated-letter.md
├── restaurant.md
├── rock-paper-scissors.md
├── rocket-loop-conditional.md
├── separate-number.md
├── software-culture-teamwork.md
├── story-with-images.md
├── string-compression.md
├── submitting-on-a-new-branch.md
├── sum-array.md
├── svg.md
├── tes.txt
├── testing-performance.md
├── text-style-event.md
├── thinking.md
├── tooling.md
├── web-assets-compression.md
├── web-creation.md
├── web-design.md
├── web-dev-process.md
├── web-evaluation.md
├── web-interactive.md
├── web-literacy.md
├── web-speed.md
├── website.md
└── wireframing.md
Condensed preview — 248 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (623K chars).
[
{
"path": ".gitignore",
"chars": 18,
"preview": ".DS_Store\n.hidden\n"
},
{
"path": "FINISH.md",
"chars": 267,
"preview": "# Hacktiv8 Phase 0 is Over: That's a wrap!\n\nKami akan merangkum semua laporan kegiatan kamu dan menyimpulkan hasilnya, y"
},
{
"path": "README-WEEK-1.md",
"chars": 7377,
"preview": "# Hacktiv8 Phase 0 Week 1: Membuat Website Pertama Saya\n\n\n\nSelamat datang di tahap persia"
},
{
"path": "README-WEEK-2.md",
"chars": 6717,
"preview": "Material Valid for FullStack Immersive Batch 17\n\n# Hacktiv8 Phase 0 Week 2: The World of JavaScript\n\n![Header](assets/he"
},
{
"path": "README-WEEK-3.md",
"chars": 4466,
"preview": "# Hacktiv8 Phase 0 Week 3: Arrays and Logics\n\n\n\nSelamat sudah melalui kegiatan pekan kedu"
},
{
"path": "README-WEEK-4.md",
"chars": 3680,
"preview": "# Hacktiv8 Phase 0 Week 4: Logics in JavaScript\n\n\n\nSelamat sudah melalui kegiatan pekan k"
},
{
"path": "README-WEEK-5.md",
"chars": 3169,
"preview": "# Hacktiv8 Phase 0 Week 5: Recursive, Regex, and Object Oriented Programming in JavaScript\n\n![Header](assets/header-w4.j"
},
{
"path": "README-WEEK-6-deprecated.md",
"chars": 3358,
"preview": "# COMING SOON! Prepare For Live Code!\n<!-- # Hacktiv8 Phase 0 Week 6: ES6 dan Paradigma Programming\n\n![Header](assets/he"
},
{
"path": "README-WEEK-6.md",
"chars": 3196,
"preview": "# Hacktiv8 Phase 0 Week 6: Finals and JavaScript DOM\n\n\n\nSampailah di minggu terakhir phas"
},
{
"path": "README.md",
"chars": 979,
"preview": "# HACKTIV8 Phase 0 Activities\n\nPhase 0 adalah aktivitas yang mempersiapkan murid untuk mampu memahami dan masuk ke dalam"
},
{
"path": "checklist.md",
"chars": 1743,
"preview": "Berikut adalah list challenges yang wajib diselesaikan karena akan diperhitungkan sebagai completion rate.\nList di bawah"
},
{
"path": "modules/README-WEEK-5-old-dom.md",
"chars": 3626,
"preview": "## DEPRECATED.\n# Hacktiv8 Phase 0 Week 5: The World of DOM\n\n\n\nSelamat sudah melalui kegia"
},
{
"path": "modules/algorithm-pseudocode.md",
"chars": 12431,
"preview": "# Learn Algorithm and Pseudocode\n\n## Objectives\n\n- ▢ Memahami struktur alur program dengan algoritma dan pseudocode\n\n## "
},
{
"path": "modules/anchor-akses-array.md",
"chars": 856,
"preview": "# Mengakses Nilai Dalam Array\n\nTahukah kamu jika *string* adalah sebuah *array*? Kamu dapat mengakses karakter-karakter "
},
{
"path": "modules/anchor-basic-function.md",
"chars": 1448,
"preview": "# Mengenal Penggunaan Function\n\n## Objectives\n\n- Mampu memahami serta mengimplementasi penggunaan function pada JavaScri"
},
{
"path": "modules/anchor-before-recursive.md",
"chars": 1142,
"preview": "# Pemanasan Sebelum Tantangan Recursive\n\nTantangan ini berguna untuk mempersiapkan kamu mengerjakan tantangan rekursi. P"
},
{
"path": "modules/anchor-belajar-for.md",
"chars": 1810,
"preview": "# Melakukan *Looping* Menggunakan `For`\n\n## Objectives\n\n* Mengerti Cara Melakukan *Looping* Menggunakan `For`\n* Mengetah"
},
{
"path": "modules/anchor-belajar-operator-mtk.md",
"chars": 1071,
"preview": "# 2. Belajar Menggunakan Operator Matematika\n\n## Objectives\n\n* Mengerti Cara Penggunaan Operator Matematika\n* Mengerti K"
},
{
"path": "modules/anchor-belajar-variabel.md",
"chars": 933,
"preview": "# 1. Belajar Tentang Variabel pada JavaScript\n\n## Objectives\n\n* Mengerti cara *assignment* pada variabel\n* Mengerti cara"
},
{
"path": "modules/anchor-belajar-while.md",
"chars": 1148,
"preview": "# Melakukan *Looping* Menggunakan `While`\n\n## Objectives\n\n* Mengerti Cara Melakukan *Looping* Menggunakan `While`\n\n## Di"
},
{
"path": "modules/anchor-case-to-pseudocode.md",
"chars": 917,
"preview": "# Mengubah Kasus Menjadi Pseudocode\n\n## Objectives\n\n- Mampu menganalisa kasus dan mengubahnya dalam bentuk pseudocode\n\n#"
},
{
"path": "modules/anchor-css-layouting.md",
"chars": 4230,
"preview": "# Menghias Laman HTML dengan CSS Layouting\n\n## Objectives\n\nDengan menggunakan CSS kamu dapat membuat layout serta menghi"
},
{
"path": "modules/anchor-css-selector-and-styling.md",
"chars": 3553,
"preview": "# Menghias Laman HTML dengan CSS\n\n## Objectives\n\nDengan menggunakan CSS kamu dapat menghias halaman HTML. Pada latihan k"
},
{
"path": "modules/anchor-es5-to-es6.md",
"chars": 1005,
"preview": "# Mengubah ES5 menjadi ES6\n\n## Objectives\n\n- Mampu memanfaatkan ES6\n- Mampu mengkonversi kode ES5 ke ES6\n\n## Directions\n"
},
{
"path": "modules/anchor-es6-functional.md",
"chars": 1044,
"preview": "# Memanfaatkan Map, Filter, dan Reduce\n\n## Objectives\n\n- Mampu memanfaatkan Map, Filter, dan Reduce\n\n## Directions\n\n1. S"
},
{
"path": "modules/anchor-es6-oop-start.md",
"chars": 697,
"preview": "# Membuat ES6 Class Sederhana\n\n## Objectives\n\n- Mampu memanfaatkan Class pada ES6 untuk membangun object JavaScript\n\n## "
},
{
"path": "modules/anchor-es6-oop.md",
"chars": 1189,
"preview": "# Membuat ES6 Class Lanjutan\n\n## Objectives\n\n- Mampu memanfaatkan Class pada ES6 untuk membangun object JavaScript\n\n## D"
},
{
"path": "modules/anchor-jquery.md",
"chars": 1096,
"preview": "# Membuat Website yang Interaktif dengan JQuery\n\nKamu telah mempelajari event dan manipulasi DOM dengan vanilla JavaScri"
},
{
"path": "modules/anchor-js-dom-creation.md",
"chars": 2024,
"preview": "# Menyusun Halaman HTML Dinamis di JavaScript\n\nSetelah mengetahui tentang DOM selection dan manipulation serta DOM trans"
},
{
"path": "modules/anchor-js-dom-manipulation.md",
"chars": 1252,
"preview": "#Manipulasi DOM Sederhana dengan JavaScript\n\nSetelah mengetahui tentang DOM selection dan manipulation, kita akan coba b"
},
{
"path": "modules/anchor-js-dom-transverse-manipulation.md",
"chars": 1725,
"preview": "# Manipulasi DOM Sederhana dengan DOM Transversing di JavaScript\n\nSetelah mengetahui tentang DOM selection dan manipulat"
},
{
"path": "modules/anchor-js-dom-web-app.md",
"chars": 1152,
"preview": "#Berkreasi Membuat Web App dengan Memanfaatkan DOM\n\nSetelah satu pekan kita menguasai DOM menggunakan JavaScript, saatny"
},
{
"path": "modules/anchor-js-form-validation.md",
"chars": 2074,
"preview": "# Form Validation Sederhana dengan JavaScript\n\nSetelah mengetahui tentang DOM kamu dapat menggunakan pengetahuan itu unt"
},
{
"path": "modules/anchor-js-object-literal.md",
"chars": 324,
"preview": "# Menggunakan Object Literal\n\n## Objectives\n\n1. Mengerti Cara Membuat Object dengan Object literal\n\n## Directions\n\nMeruj"
},
{
"path": "modules/anchor-json.md",
"chars": 1533,
"preview": "# Menggunakan JSON\n\nSetelah mengetahui cara membuat object menggunakan `function()`, kamu juga perlu mengetahui mengenai"
},
{
"path": "modules/anchor-laman-web-pertamaku.md",
"chars": 1410,
"preview": "# Laman Web Pertamaku\n\n## Objectives\n\nSetelah mempelajari dasar-dasar HTML, kamu ditantang untuk membuat sebuah laman ht"
},
{
"path": "modules/anchor-loop-array.md",
"chars": 1456,
"preview": "# Melakukan Looping Data Array\n\nSering kali data yang diterima dari database adalah array yang multidimensi (array di da"
},
{
"path": "modules/anchor-main-loop-asterisks.md",
"chars": 1638,
"preview": "# Looping\n\nSoal looping - asterisk ini memiliki 3 nomor.\n\n## 1. Menyusun Barisan Bintang\n\n### Problem\n\nPada tugas ini ka"
},
{
"path": "modules/anchor-main-loop.md",
"chars": 4236,
"preview": "# Looping\n\nSoal looping ini memiliki 3 nomor.\n\n## 1. Melakukan *Looping* Menggunakan `While`\n\n### Problem\n\nPada tugas in"
},
{
"path": "modules/anchor-main-string.md",
"chars": 3544,
"preview": "# String\n\nSoal latihan string ini memiliki 4 nomor. Simpan di 1 file yang sama!\n\n## 1. Let's Form a Sentence\n\n### Proble"
},
{
"path": "modules/anchor-menggunakan-if-else-2.md",
"chars": 791,
"preview": "# 4. Menggunakan If Else 2\n\n## Objectives\n\n* Mengerti Cara Menggunakan *Nested* `If-Else`\n* Mengerti Logika *Nested* `If"
},
{
"path": "modules/anchor-menggunakan-if-else.md",
"chars": 1730,
"preview": "# Menggunakan If Else \n\n## Objectives\n\n* Mengerti Cara Menggunakan `If-Else`\n* Mengerti Logika `If-Else`\n* Mengerti Cara"
},
{
"path": "modules/anchor-mixed-array.md",
"chars": 2441,
"preview": "# Menggunakan Built-in Function pada Array\n\nArray pada JavaScript memiliki sekumpulan *built-in function* yang digunakan"
},
{
"path": "modules/anchor-object-1.md",
"chars": 1897,
"preview": "# Menggunakan Object dalam JavaScript 1\n\nJavaScript mendukung konsep pemrograman berorientasi objek. Untuk melatih pemah"
},
{
"path": "modules/anchor-object-2.md",
"chars": 2322,
"preview": "# Menggunakan Object dalam JavaScript 2\n\nTerkadang suatu method dari object tidak menerima parameter berupa data biasa, "
},
{
"path": "modules/anchor-oop-1.md",
"chars": 1953,
"preview": "# Menggunakan OOP dalam JavaScript 1\n\nJavaScript mendukung konsep pemrograman berorientasi objek. Untuk melatih pemahama"
},
{
"path": "modules/anchor-pseudocode.md",
"chars": 1169,
"preview": "# Mengubah Psedocode Menjadi Kode JavaScript\n\n## Objectives\n\n- Mampu mengartikan pseudocode ke dalam program\n\n## Directi"
},
{
"path": "modules/anchor-pseudocode2.md",
"chars": 1213,
"preview": "# Mengubah Pseudocode Menjadi Kode JavaScript 2\n\n## Objectives\n\n- Mampu mengartikan pseudocode ke dalam program\n\n## Dire"
},
{
"path": "modules/anchor-recursive.md",
"chars": 1023,
"preview": "# Tantangan Recursive\n\nSalah satu cara menyelesaikan masalah yang membutuhkan perulangan tanpa melakukan *looping* secar"
},
{
"path": "modules/anchor-switch-case.md",
"chars": 906,
"preview": "# Menggunakan Switch-Case\n\n## Objectives\n\n* Mengerti Cara Menggunakan `Switch-Case`\n* Mengerti Logika `Switch-Case`\n\n## "
},
{
"path": "modules/angka-kuadrat.md",
"chars": 634,
"preview": "# Challenge !! Angka Pangkat\n\nBaca dan pahami tentang Js recursion : https://www.sitepoint.com/recursion-functional-java"
},
{
"path": "modules/animation-using-css-and-js.md",
"chars": 4281,
"preview": "# Animation Using CSS and JS\n\n## Objectives\n\nTahukah kamu, bahwa kita bisa membuat animasi sederhana dengan CSS dan HTML"
},
{
"path": "modules/app-design-architecture.md",
"chars": 3047,
"preview": "# Get to Know Application Design and Architecture\n\n## Objectives\n\nDalam mebuat aplikasi yang makin besar dan baik, kita "
},
{
"path": "modules/array-1.md",
"chars": 586,
"preview": "# Challenge !! Array 1\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebuah function"
},
{
"path": "modules/ask-search-read-smarter.md",
"chars": 2053,
"preview": "# Ask, Search, and Read Smarter\n\n## Objectives\n\nSebagai developer sejati, yang akan sering dilakukan selain belajar dan "
},
{
"path": "modules/assets/css-anchor-styling.css",
"chars": 1168,
"preview": "/* Style Default */\nbody {\n font-family: 'Slabo 27px', serif;\n}\n\nh1 {\n border-bottom: 1px solid rgba(0, 0, 0, .1);\n p"
},
{
"path": "modules/assets/example.css",
"chars": 0,
"preview": ""
},
{
"path": "modules/assets/example.html",
"chars": 0,
"preview": ""
},
{
"path": "modules/assets/example.js",
"chars": 0,
"preview": ""
},
{
"path": "modules/assets/style.css",
"chars": 1146,
"preview": "/*day 3*/\n* {\n box-sizing: border-box;\n}\nbody { \n background-color: darkorange;\n margin: 0;\n padding: 0;\n}\nh1"
},
{
"path": "modules/bilangan-faktor.md",
"chars": 743,
"preview": "# Challenge !! Bilangan Faktor\n\n## Objectives\n\nFaktor suatu bilangan adalah suatu bilangan yang merupakan kelipatan dari"
},
{
"path": "modules/blockly-games.md",
"chars": 666,
"preview": "# Play Some Blockly Games\n\n## Objectives\n\nBlockly Games merupakan sekumpulan permainan edukatif yang mengajarkan program"
},
{
"path": "modules/blog.md",
"chars": 2517,
"preview": "# Do Your Own Blogging\n\n## Objectives\n\nAgar dapat melatih kemampuan menulis, kita dianjurkan untuk melakukan pencatatan "
},
{
"path": "modules/bootstrap.md",
"chars": 2155,
"preview": "# Trying Bootstrap\n\n## Objectives\n\nPada tantangan ini tidak terdapat tujuan spesifik, tujuannya hanya untuk memberi kese"
},
{
"path": "modules/career.md",
"chars": 4983,
"preview": "# Prepare Your Career to be a True Developer\n\n## Objectives\n\n- ▢ Mengenal berbagai wawasan yang ada di dalam dunia devel"
},
{
"path": "modules/cek-angka.md",
"chars": 627,
"preview": "# Challenge !! Cek Angka\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebuah functi"
},
{
"path": "modules/cek-prima.md",
"chars": 515,
"preview": "# Challenge !! Cek Bilangan Prima\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebu"
},
{
"path": "modules/cek-string.md",
"chars": 624,
"preview": "# Challenge !! Cek String\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebuah funct"
},
{
"path": "modules/challenge-algoritma-hukum-newton.md",
"chars": 709,
"preview": "# Algoritma /Pseudocode Challenge - Hukum II Newton\n\n## Problem\n\nBunyi hukum II Newton adalah:\n\n```\nPercepatan sebuah be"
},
{
"path": "modules/challenge-algoritma-laundry-day.md",
"chars": 443,
"preview": "# Algoritma /Pseudocode Challenge - Laundry Day\n\n## Problem\n\nFoxie akan mencuci pakaiannya menggunakan mesin cuci. Pakai"
},
{
"path": "modules/challenge-algoritma-periksa-kuku.md",
"chars": 418,
"preview": "# Algoritma /Pseudocode Challenge - Periksa Kuku\n\n## Problem\n\nSeorang guru akan memeriksa kuku siswa-siswinya yang seban"
},
{
"path": "modules/challenge-algoritma-tahun-kabisat.md",
"chars": 580,
"preview": "# Algoritma /Pseudocode Challenge - Tahun Kabisat\n\n## Problem\n\nApa yang kamu ketahui tentang tanggal 29 Februari? Kamu p"
},
{
"path": "modules/challenge-angka-prima.md",
"chars": 528,
"preview": "# Logic Challenge - Angka Prima\n\n## Problem\n\nDiberikan sebuah function angkaPrima(angka) yang menerima satu parameter be"
},
{
"path": "modules/challenge-balik-kata.md",
"chars": 654,
"preview": "# Logic Challenge - Balik Kata\n\n## Problem\n\nDiberikan sebuah function balikKata(kata) yang menerima satu parameter berup"
},
{
"path": "modules/challenge-bandingkan-angka.md",
"chars": 649,
"preview": "# Logic Challenge - Bandingkan Angka\n\n## Problem\n\nDiberikan sebuah function bandingkanAngka(angka1, angka2) yang menerim"
},
{
"path": "modules/challenge-cari-mean.md",
"chars": 733,
"preview": "# Logic Challenge - Mencari Mean\n\n## Problem\n\nDiberikan sebuah function cariMean(arr) yang menerima sebuah array angka. "
},
{
"path": "modules/challenge-cari-median.md",
"chars": 846,
"preview": "# Logic Challenge - Mencari Median\n\n## Problem\n\nDiberikan sebuah function cariMedian(arr) yang menerima sebuah array ang"
},
{
"path": "modules/challenge-cari-modus.md",
"chars": 968,
"preview": "# Logic Challenge - Mencari Modus\n\n## Problem\n\nDiberikan sebuah function cariModus(arr) yang menerima sebuah array angka"
},
{
"path": "modules/challenge-cari-pelaku.md",
"chars": 625,
"preview": "# Logic Challenge - Cari Pelaku (Regex)\n\n## Problem\n\nDiberikan sebuah function cariPelaku(kalimat) yang menerima satu pa"
},
{
"path": "modules/challenge-cek-ab.md",
"chars": 718,
"preview": "# Logic Challenge - Check AB\n\n## Problem\n\nDiberikan sebuah function checkAB(str) yang menerima satu parameter berupa str"
},
{
"path": "modules/challenge-damage-calculation.md",
"chars": 991,
"preview": "# Logic Challenge: Damage Calculation\n\nDiberikan function `attack()`, damageCalculation().\n\n- Function `damageCalculatio"
},
{
"path": "modules/challenge-deep-sum.md",
"chars": 971,
"preview": "# Logic Challenge: Deep Sum\n\nImplementasikan function deepSum untuk mendapatkan jumlah pertambahan dari angka-angka yang"
},
{
"path": "modules/challenge-deret-aritmatika.md",
"chars": 1015,
"preview": "# Logic Challenge - Tentukan Deret Aritmatika\n\n## Problem\n\nDiberikan sebuah function tentukanDeretAritmatika(arr) yang m"
},
{
"path": "modules/challenge-deret-geometri.md",
"chars": 1065,
"preview": "# Logic Challenge - Tentukan Deret Geometri\n\n## Problem\n\nDiberikan sebuah function tentukanDeretGeometri(arr) yang mener"
},
{
"path": "modules/challenge-digit-perkalian-minimum.md",
"chars": 812,
"preview": "# Logic Challenge - Digit Perkalian Minimum\n\n## Problem\n\nDiberikan sebuah function digitPerkalianMinimum(angka) yang men"
},
{
"path": "modules/challenge-faktor-persekutuan-terbesar.md",
"chars": 599,
"preview": "# Logic Challenge - Faktor Persekutuan Terbesar\n\n## Problem\n\nDiberikan sebuah function fpb(angka1, angka2) yang menerima"
},
{
"path": "modules/challenge-faktorial.md",
"chars": 776,
"preview": "# Logic Challenge - Faktorial (Rekursif)\n\n## Problem\n\nDiberikan sebuah function faktorialRekursif(angka) yang menerima s"
},
{
"path": "modules/challenge-graduates.md",
"chars": 1772,
"preview": "# Logic Challenge: Graduates\n\nImplementasikan function graduates untuk mendapatkan daftar student yang lulus dengan atur"
},
{
"path": "modules/challenge-hapus-simbol.md",
"chars": 624,
"preview": "# Logic Challenge - Hapus Simbol (Regex)\n\n## Problem\n\nDiberikan sebuah function hapusSimbol(str) yang menerima satu para"
},
{
"path": "modules/challenge-highest-score.md",
"chars": 1377,
"preview": "# Logic Challenge: Highest Score\n\nImplementasikan function highestScore untuk mendapatkan student dengan nilai tertinggi"
},
{
"path": "modules/challenge-hitung-huruf.md",
"chars": 908,
"preview": "# Logic Challenge - Hitung Huruf\n\n## Problem\n\nDiberikan function hitungHuruf(kalimat) yang akan menerima satu parameter "
},
{
"path": "modules/challenge-hitung-jumlah-kata.md",
"chars": 719,
"preview": "# Logic Challenge - Menghitung Jumlah Kata\n\n## Problem\n\nDiberikan sebuah function hitungJumlahKata(kalimat) yang menerim"
},
{
"path": "modules/challenge-kali-terus.md",
"chars": 1086,
"preview": "# Logic Challenge - Kali Terus (Rekursif)\n\n## Problem\n\nDiberikan sebuah function kaliTerusRekursif(angka) yang menerima "
},
{
"path": "modules/challenge-kelompok-angka.md",
"chars": 1008,
"preview": "# Logic Challenge - Mengelompokkan Angka\n\n## Problem\n\nDiberikan sebuah function mengelompokkanAngka(arr) yang menerima s"
},
{
"path": "modules/challenge-kelompok-hewan.md",
"chars": 1058,
"preview": "# Logic Challenge - Mengelompokkan Hewan\n\n## Problem\n\nDiberikan sebuah function groupAnimals(arr) yang menerima satu par"
},
{
"path": "modules/challenge-konversi-menit.md",
"chars": 652,
"preview": "# Logic Challenge - Konversi Menit\n\n## Problem\n\nDiberikan sebuah function konversiMenit(menit) yang menerima satu parame"
},
{
"path": "modules/challenge-main-pseudocode.md",
"chars": 1908,
"preview": "# Pseudocode Challenge\n\nSoal ini terdiri dari 4 nomor!\n\n## 1. Newton Second Law\n\nBunyi hukum II Newton adalah:\n\n```\nPerc"
},
{
"path": "modules/challenge-makan-terus.md",
"chars": 1084,
"preview": "# Logic Challenge - Makan Terus (Rekursif)\n\n## Problem\n\nSeorang customer sedang makan di sebuah restaurant AYCE(All You "
},
{
"path": "modules/challenge-melee-ranged-grouping.md",
"chars": 1016,
"preview": "# Logic Challenge: Melee Ranged Grouping\n\nDiberikan function meleeRangedGrouping yang menerima 1 parameter berupa string"
},
{
"path": "modules/challenge-most-frequent-largest-numbers.md",
"chars": 1129,
"preview": "# Logic Challenge - Most Frequent Largest Numbers\n\n## Problem\n\nImplementasikan function `sorting` dan `getTotal` untuk m"
},
{
"path": "modules/challenge-naik-angkot.md",
"chars": 794,
"preview": "# Logic Challenge - Naik Angkot\n\n## Problem\n\nDiberikan function naikAngkot(listPenumpang) yang akan menerima satu parame"
},
{
"path": "modules/challenge-object-literal.md",
"chars": 1273,
"preview": "# Logic Challenge - Change Me!\n\n## Problem\n\nDiberikan sebuah function changeMe(arr) yang menerima satu parameter berupa "
},
{
"path": "modules/challenge-palindrome-angka.md",
"chars": 879,
"preview": "# Logic Challenge - Number Palindrome\n\n## Problem\n\nDiberikan sebuah function angkaPalindrome(angka) yang menerima satu p"
},
{
"path": "modules/challenge-palindrome.md",
"chars": 661,
"preview": "# Logic Challenge - Palindrome\n\n## Problem\n\nDiberikan sebuah function palindrome(kata) yang menerima satu parameter. Fun"
},
{
"path": "modules/challenge-pasangan-terbesar.md",
"chars": 733,
"preview": "# Logic Challenge - Pasangan Angka Terbesar\n\n## Problem\n\nDiberikan sebuah function pasanganTerbesar(angka) yang menerima"
},
{
"path": "modules/challenge-password-generator.md",
"chars": 1554,
"preview": "# Logic Challenge - Password Generator\n\n## Problem\n\nDiberikan function changeVocals, reverseWord, setLowerUpperCase, rem"
},
{
"path": "modules/challenge-perkalian-unik.md",
"chars": 928,
"preview": "# Logic Challenge - Perkalian Unik\n\n## Problem\n\nDiberikan sebuah function perkalianUnik(arr) yang menerima satu paramete"
},
{
"path": "modules/challenge-perpangkatan-dua.md",
"chars": 776,
"preview": "# Logic Challenge - Perpangkatan Dua\n\n## Problem\n\nDiberikan sebuah function perpangkatanDua(angka) yang menerima satu pa"
},
{
"path": "modules/challenge-recursive-addition.md",
"chars": 547,
"preview": "# Logic Challenge - Recursive Addition\n\n## Problem\n\nHave the function recursiveAddition(num) add up all the numbers from"
},
{
"path": "modules/challenge-shopping-time.md",
"chars": 2066,
"preview": "# Logic Challenge - Shopping Time!\n\n## Problem\n\nDiberikan sebuah function shoppingTime(memberId, money) yang menerima du"
},
{
"path": "modules/challenge-tambah-dash.md",
"chars": 752,
"preview": "# Logic Challenge - Tambah Dash / Strip\n\n## Problem\n\nDiberikan sebuah function tambahDash(str) yang menerima satu parame"
},
{
"path": "modules/challenge-target-terdekat.md",
"chars": 899,
"preview": "# Logic Challenge - Target Terdekat\n\n## Problem\n\nDiberikan sebuah function targetTerdekat(arr) yang menerima satu parame"
},
{
"path": "modules/challenge-toko-x.md",
"chars": 2803,
"preview": "# Logic Challenge - Toko X\n\n## Problem\n\nToko X yang sedang melakukan SALE ingin menghitung jumlah profit untuk setiap je"
},
{
"path": "modules/challenge-total-digit.md",
"chars": 870,
"preview": "# Logic Challenge - Total Digit (Rekursif)\n\n## Problem\n\nDiberikan sebuah function totalDigitRekursif(angka) yang menerim"
},
{
"path": "modules/challenge-tukar-besar-kecil.md",
"chars": 734,
"preview": "# Logic Challenge - Tukar Besar Kecil\n\n## Problem\n\nDiberikan function tukarBesarKecil(kalimat) yang menerima satu parame"
},
{
"path": "modules/challenge-ubah-huruf.md",
"chars": 661,
"preview": "# Logic Challenge - Ubah Huruf\n\n## Problem\n\nDiberikan function ubahHuruf(kata) yang akan menerima satu parameter berupa "
},
{
"path": "modules/challenge-ubah-kapital.md",
"chars": 814,
"preview": "# Logic Challenge - Ubah Kapital\n\n## Problem\n\nDiberikan function ubahKapital(kalimat) yang menerima satu parameter berup"
},
{
"path": "modules/challenge-urutkan-abjad.md",
"chars": 729,
"preview": "# Logic Challenge - Mengurutkan Abjad\n\n## Problem\n\nDiberikan sebuah function urutkanAbjad(str) yang menerima satu parame"
},
{
"path": "modules/challenge-x-dan-o.md",
"chars": 504,
"preview": "# Logic Challenge - X dan O\n\n## Problem\n\nDiberikan sebuah function xo(str) yang menerima satu parameter berupa string. F"
},
{
"path": "modules/cli-git-github-practice.md",
"chars": 2641,
"preview": "# Practice CLI, Git, and GitHub\n\n## Objectives\n\nMelatih penggunaan dasar command line serta Git dan GitHub lebih jauh ak"
},
{
"path": "modules/code-combat.md",
"chars": 418,
"preview": "# Play Some Code Combat\n\n## Objectives\n\nCode Combat merupakan permainan belajar programming yang multiplayer. Anggaplah "
},
{
"path": "modules/code-documentation.md",
"chars": 2180,
"preview": "# Know More, Read, and Create Code Documentation\n\n## Objectives\n\n- ▢ Mengetahui alasan, aturan, tips dan trik untuk mend"
},
{
"path": "modules/codecademy.md",
"chars": 355,
"preview": "# Challenge !! Codecademy javascript\n\n## Tugas\n1. Buka link [codecademy JavaScript lesson berikut ini](https://www.code"
},
{
"path": "modules/coderbyte-introduction.md",
"chars": 4092,
"preview": "# Panduan Menggunakan Coderbyte\n\n## Objectives\n\n- ▢ Mengenal coderbyte dan cara kerjanya\n- ▢ Mampu mengerjakan dan mengu"
},
{
"path": "modules/codewars.md",
"chars": 561,
"preview": "# Play Codewars\n\n## Objectives\n\nCodewars merupakan tempat berlatih programming yang sangat menantang. Kita dapat meningk"
},
{
"path": "modules/collaboration.md",
"chars": 1875,
"preview": "# Learn Collaboration\n\n## Objectives\n\nBerikut hal-hal yang kita perlu pahami dengan apa yang akan kita lakukan setiap ha"
},
{
"path": "modules/color.md",
"chars": 148,
"preview": "# Color\n\n## References\n\n- [Social Media Colours – Hex and RGB Colours of the Web](http://designpieces.com/2012/12/social"
},
{
"path": "modules/contact-form.md",
"chars": 1641,
"preview": "# Create a Personal Contact Form\n\n## Objectives\n\n- ▢ Mempraktekkan pengetahuan HTML5 forms untuk membuat formulir kontak"
},
{
"path": "modules/contact-list.md",
"chars": 3303,
"preview": "# Create a Contact List Simulation\n\n## Objectives\n\nMembuat simulasi daftar kontak sederhana yang dapat menyimpan nama, e"
},
{
"path": "modules/core-values.md",
"chars": 2655,
"preview": "# Explore Your Core Values\n\n## Objectives\n\n- ▢ Mengidentifikasi berbagai nilai inti yang kamu miliki dapat meningkatkan "
},
{
"path": "modules/css3-advanced.md",
"chars": 2291,
"preview": "# Use CSS3 Transforms, Transitions, and Animations\n\n## Objectives\n\nMenggunakan berbagai pondasi dan aturan CSS3 yang ber"
},
{
"path": "modules/css3-basics.md",
"chars": 7323,
"preview": "# Basics of Cascading Style Sheet (CSS)\n\n## Objectives\n\n- ▢ Mengulas dasar-dasar CSS.\n\n## Learnings\n\nCSS secara harfiah "
},
{
"path": "modules/css3-rules.md",
"chars": 3446,
"preview": "# Use CSS3 Rules\n\n## Objectives\n\nMenggunakan berbagai pondasi dan aturan CSS3 yang berfungsi untuk:\n\n- Mengikutkannya ke"
},
{
"path": "modules/database.md",
"chars": 716,
"preview": "# Get to Know Database Technologies\n\n## Objectives\n\n- ▢ Mengetahui berbagai jenis database dan pengelompokannya.\n\n## Lea"
},
{
"path": "modules/dev-ecosystem-community.md",
"chars": 1938,
"preview": "# Understand Developer Ecosystem\n\n## Objectives\n\n- ▢ Mengenali keadaan lingkungan IT dan developer zaman sekarang.\n- ▢ M"
},
{
"path": "modules/editor.md",
"chars": 179,
"preview": "# Choose Your Text and Code Editor\n\n## References\n\n- [Dev Series: 5 text editor modern untuk pengembang aplikasi](https:"
},
{
"path": "modules/faktor-prima.md",
"chars": 796,
"preview": "# Challenge !! Faktor Prima\n\n## Objectives\n\nFaktor prima adalah faktor-faktor suatu bilangan berbentuk bilangan prima. F"
},
{
"path": "modules/format-angka.md",
"chars": 653,
"preview": "# Challenge !! Format Angka\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebuah fun"
},
{
"path": "modules/format-huruf.md",
"chars": 566,
"preview": "# Challenge !! Format Huruf\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebuah fun"
},
{
"path": "modules/fox-hub-guide.md",
"chars": 2824,
"preview": "# HACKTIV8 Fox Hub Guide\n\nHACKTIV8 Fox Hub (Beta) adalah platform yang digunakan untuk melakukan pengumpulan tugas dan m"
},
{
"path": "modules/functional-basics.md",
"chars": 7572,
"preview": "# Get to Know Functional Programming (FP)\n\n## Objectives\n\n- ▢ Mengetahui salah satu paradigma pemrograman modern yang in"
},
{
"path": "modules/gallery-slide.md",
"chars": 2336,
"preview": "# Create a Simple Gallery Slide\n\n## Objectives\n\n- ▢ Memahami penggunaan DOM, event object, dan scope.\n- ▢ Berkreatifitas"
},
{
"path": "modules/ganjil-genap-dll.md",
"chars": 1441,
"preview": "# Angka Ganjil dan Genap\n\n## Objectives\n\n- Mengaplikasikan Syntax `for`\n- Mengaplikasikan Syntax `if-else`\n\n## Direction"
},
{
"path": "modules/geser-huruf.md",
"chars": 566,
"preview": "# Challenge !! Pergeseran Huruf\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebuah"
},
{
"path": "modules/git-branch-anchor.md",
"chars": 848,
"preview": "# Membuat Branch Baru pada Repositori\n\n## Objective\n\n- Mengenal Fungsi `branch` pada git\n\n## Directions\n\n1. Pada reposit"
},
{
"path": "modules/git-github-basics.md",
"chars": 6439,
"preview": "# Learn Git and GitHub Basics\n\n## Objectives\n\nGit merupakan tool utama yang pasti akan kamu gunakan setiap hari, sepanja"
},
{
"path": "modules/github-pages-rev.md",
"chars": 3543,
"preview": "# WEEKLY PROJECT - Website yang dihosting dengan Github Pages\n\n## Objectives\n\nSaatnya membuat website sederhana yang aka"
},
{
"path": "modules/github-pages.md",
"chars": 4172,
"preview": "# Create Free Website with GitHub Pages\n\n## Objectives\n\nSaatnya membuat website sederhana yang akan ditaruh/di-host seca"
},
{
"path": "modules/h8-challenge-checker.md",
"chars": 1532,
"preview": "# Hacktiv8 Challenge Checker\n\nHacktiv8 Challenge Checker adalah tools yang digunakan di Phase 0 untuk melakukan pengecek"
},
{
"path": "modules/hinting-linting.md",
"chars": 69,
"preview": "#\n\n## Objectives\n\nTODO\n\n## Directions\n\n- ▢\n- ▢\n- ▢\n\n## References\n\n-\n"
},
{
"path": "modules/html-css-code-style.md",
"chars": 3177,
"preview": "# Learn Coding Style Guide\n\n## Objectives\n\nDalam menulis code yang profesional, diperlukan berbagai aturan atau standar "
},
{
"path": "modules/html5-basics.md",
"chars": 15926,
"preview": "# Learn the Basics of HyperText Markup Language (HTML)\n\n## Objectives\n\n- ▢ Mengulas dasar-dasar HTML.\n\n## Learnings\n\nHTM"
},
{
"path": "modules/html5-boilerplate.md",
"chars": 69,
"preview": "#\n\n## Objectives\n\nTODO\n\n## Directions\n\n- ▢\n- ▢\n- ▢\n\n## References\n\n-\n"
},
{
"path": "modules/html5-elements.md",
"chars": 3003,
"preview": "# Use HTML Elements\n\n## Objectives\n\nMenggunakan berbagai pondasi dan elemen HTML5 yang berfungsi untuk membuat:\n\n- Meta "
},
{
"path": "modules/html5-forms-basics.md",
"chars": 5264,
"preview": "# Learn the Basics of HTML Forms\n\n## Objectives\n\n- ▢ Mengulas dasar-dasar HTML forms.\n\n## Learnings\n\nForm pada HTML adal"
},
{
"path": "modules/index-prima.md",
"chars": 494,
"preview": "# Challenge !! Index Bilangan Prima\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat se"
},
{
"path": "modules/internet-web.md",
"chars": 2175,
"preview": "# Learn More About Around the Internet\n\n## Objectives\n\nDalam dunia web development, kita sangat perlu untuk memahami mak"
},
{
"path": "modules/introduce-yourself.md",
"chars": 3315,
"preview": "# Introduce Yourself!\n\n## Objectives\n\nMari mengenalkan dirimu lebih jelas dan lengkap, baik secara personal maupun profe"
},
{
"path": "modules/is-even.md",
"chars": 607,
"preview": "# Challenge !! Angka Ganjil\n\nBaca dan pahami tentang Js recursion : https://www.sitepoint.com/recursion-functional-javas"
},
{
"path": "modules/jenis-bilangan.md",
"chars": 787,
"preview": "# Challenge !! Jenis Bilangan\n\n## Objectives\n\nSeperti yang sudah kita ketahui, bahwa ada beberapa jenis bilangan, yaitu "
},
{
"path": "modules/jquery-bootstrap.md",
"chars": 3107,
"preview": "# Using jQuery and Bootstrap\n\n## Objectives\n\nMari kita mencoba-coba dan bereksplorasi dalam penggunaan frontend libary d"
},
{
"path": "modules/jquery.md",
"chars": 1805,
"preview": "# Trying jQuery\n\n## Objectives\n\nPada tantangan ini tidak terdapat tujuan spesifik, tujuannya hanya untuk memberi kesempa"
},
{
"path": "modules/js-application.md",
"chars": 1766,
"preview": "# Create Your Own JavaScript App\n\n## Objectives\n\n- ▢ Melatih kreatifitas dalam pembuatan program.\n\n## Directions\n\nBuatla"
},
{
"path": "modules/js-array.md",
"chars": 10263,
"preview": "# JavaScript Data Types - Array\n\n## Objectives\n\nTipe data ataupun struktur data adalah konsep penting dalam mengkategori"
},
{
"path": "modules/js-basics.md",
"chars": 18623,
"preview": "# JavaScript Basics\n\n## Objectives\n\nMari kita mengetahui hal-hal dasar tentang JavaScript yang diperlukan agar kita bisa"
},
{
"path": "modules/js-code-style.md",
"chars": 3420,
"preview": "# Learn JavaScript Code Style dan Guide\n\n## Objectives\n\nSeperti yang tertera pada bagian referensi pekan ini, ada bebera"
},
{
"path": "modules/js-data.md",
"chars": 7210,
"preview": "# JavaScript Data Types\n\n## Objectives\n\nTipe data ataupun struktur data adalah konsep penting dalam mengkategorisasikan "
},
{
"path": "modules/js-dom-creation.md",
"chars": 8295,
"preview": "# DOM Creation\n\n## Objectives\n\nDalam aplikasi web, kita tidak terbatas memanfaatkan DOM untuk dimanipulasi atau ditambah"
},
{
"path": "modules/js-dom-devtools.md",
"chars": 9351,
"preview": "# Learn DOM and More on Dev Tools\n\n## Objectives\n\nDalam mengembangkan web, kita harus menyadari bahwa kita sekaligus mem"
},
{
"path": "modules/js-dom-events.md",
"chars": 8915,
"preview": "# DOM Events\n\n## Objectives\n\nDalam membuat sebuah aplikasi web, interaktivitas dengan user menjadi satu hal yang sangat "
},
{
"path": "modules/js-dom-intro.md",
"chars": 11343,
"preview": "# Introduction to Document Object Model (DOM)\n\n## Objectives\n\nDalam mengembangkan web, kita harus menyadari bahwa kita s"
},
{
"path": "modules/js-dom-style.md",
"chars": 2982,
"preview": "# DOM Style\n\n## Objectives\n\nDalam web kita, mungkin kita ingin mengubah style/gaya/desain dari web kita berdasarkan inte"
},
{
"path": "modules/js-dom-transversing.md",
"chars": 16082,
"preview": "# Transversing in Document Object Model (DOM)\n\n## Objectives\n\nDi layout HTML yang cukup kompleks, kita akan bertemu deng"
},
{
"path": "modules/js-es6-arrow-function.md",
"chars": 1118,
"preview": "# ES6 Arrow Function\n\n## Objectives\n\n- ▢ Memanfaatkan Arrow Function sebagai Pengganti Anonymous Function\n\n## Learnings\n"
},
{
"path": "modules/js-es6-scope.md",
"chars": 1687,
"preview": "# ES6 for JS Scope\n\n## Objectives\n\n- ▢ Memanfaatkan `let` dan `const` di JavaScript ES6\n\n## Learnings\n\nSeperti yang tela"
},
{
"path": "modules/js-es6.md",
"chars": 3916,
"preview": "# Get to Know The Latest JavaScript: EcmaScript 6!\n\n## Objectives\n\nJavaScript modern ini bukan hanya sebatas bahasa pemr"
},
{
"path": "modules/js-events.md",
"chars": 5797,
"preview": "# Learn JavaScript Events\n\n## Objectives\n\n- ▢ Mengenal events secara umum dan secara object.\n- ▢ Mengenal keyword `this`"
},
{
"path": "modules/js-first-time.md",
"chars": 20065,
"preview": "# Halo JavaScript!\n\n## Pengenalan\n\nMari kita sambut salah satu bahasa pemrograman universal di dunia: JavaScript! Untuk "
},
{
"path": "modules/js-function-method.md",
"chars": 6540,
"preview": "# JavaScript Function and Method\n\n## Objectives\n\n- ▢ Memahami pembuatan dan kegunaan function\n- ▢ Memahami scope (global"
},
{
"path": "modules/js-function-recursive.md",
"chars": 7620,
"preview": "# JavaScript Recursive Function\n\n## Objectives\n\n- ▢ Mengenal pembuatan dan cara kerja fungsi Rekursif\n- ▢ Memahami cara "
},
{
"path": "modules/js-logic.md",
"chars": 5316,
"preview": "# Learn Logic Flow in JavaScript\n\n## Objectives\n\n- ▢ Memahami kegunaan dan perbedaan operator `&&`, `||`, dan `!`.\n- ▢ M"
},
{
"path": "modules/js-node.md",
"chars": 2810,
"preview": "# Node JS\n\n## Objectives\n\n- ▢ Mengenal node.js\n- ▢ Meninstall node.js di komputer\n- ▢ Memanfaatkan node.js untuk menjala"
},
{
"path": "modules/js-object-json.md",
"chars": 6097,
"preview": "# JavaScript Object and JSON\n\n## Objectives\n\n- ▢ Memahami pembuatan dan kegunaan pasangan key-value dalam sebuah object."
},
{
"path": "modules/js-object-literal.md",
"chars": 4097,
"preview": "# JavaScript Object Literal\n\n## Objectives\n\n- ▢ Memahami pembuatan object sebagai pair key: value tanpa menggunakan clas"
},
{
"path": "modules/js-scope.md",
"chars": 1940,
"preview": "# Relearn JavaScript Scope\n\n## Objectives\n\n- ▢ Mengulas kembali dan memahami scope lebih lanjut.\n\n## Learnings\n\nCakupan "
},
{
"path": "modules/js-string-reference.md",
"chars": 9100,
"preview": "# String pada JavaScript\n\n## Objectives\n\n- Memahami Tipe Data String pada JavaScript\n- Mengetahui Property dan Method ya"
},
{
"path": "modules/js-style-guide.md",
"chars": 472,
"preview": "# Beautifying and Checking Code Quality\n\n## Objectives\n\n- Mengecek kualitas kode dengan hinting/linting\n\n## Directions\n\n"
},
{
"path": "modules/js-transpilation.md",
"chars": 69,
"preview": "#\n\n## Objectives\n\nTODO\n\n## Directions\n\n- ▢\n- ▢\n- ▢\n\n## References\n\n-\n"
},
{
"path": "modules/js-world.md",
"chars": 4044,
"preview": "# Get to Know The Latest JavaScript, Node.js, and Transpilation\n\n## Objectives\n\nJavaScript modern ini bukan hanya sebata"
},
{
"path": "modules/key-competencies.md",
"chars": 2824,
"preview": "# HACKTIV8 Phase 0 Key Competencies\n\n### HTML\n- :anchor: **W1** Menguasai HTML tags dan kegunaannya\n- :anchor: **W1** Me"
},
{
"path": "modules/konversi-huruf-angka.md",
"chars": 539,
"preview": "# Challenge !! Konversi Huruf dan Angka\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Bua"
},
{
"path": "modules/konversi-waktu.md",
"chars": 522,
"preview": "# Challenge !! Konversi Waktu\n\n## Tugas\n1. Bukalah sebuah tools online untuk menuliskan code JavaScript\n2. Buat sebuah f"
},
{
"path": "modules/markdown-anchor.md",
"chars": 2148,
"preview": "# Mengisi README.md Pada GitHub\n\n## Objectives\n\n* Mengetahui Kegunaan File README.md pada GitHub\n* Mengerti Cara Membuat"
},
{
"path": "modules/markdown.md",
"chars": 1984,
"preview": "# Learn More About Markdown\n\n## Objectives\n\nBeberapa darimu mungkin secara tidak sengaja, sudah mengenal Markdown. Terut"
},
{
"path": "modules/math-basics.md",
"chars": 1976,
"preview": "# Create Some Basics Mathematics Function\n\n## Objectives\n\nMembuat berbagai fungsi matematika dasar.\n\n- ▢ Membuat fungsi "
},
{
"path": "modules/math-object-js.md",
"chars": 3722,
"preview": "# Object Math pada JavaScript\n\n## Apa Itu Object Math?\n\nObject Math adalah salah satu *Built-in* Object pada JavaScript "
},
{
"path": "modules/menghias-laman-html.md",
"chars": 1457,
"preview": "#Menghias Laman HTML dengan CSS 1\n\n##Objectives\n\nDengan menggunakan CSS kamu dapat menghias halaman HTML yang sebelumnya"
},
{
"path": "modules/menghias-laman-html2.md",
"chars": 955,
"preview": "#Menghias Laman HTML dengan CSS 2\n\n##Objectives\n\nSetelah mempelajari mengenai Box Model dan *Element Positioning* dengan"
},
{
"path": "modules/menghias-laman-html3.md",
"chars": 838,
"preview": "#Menghias Laman HTML dengan CSS 3\n\n##Objectives\n\nLaman HTML terasa kurang tanpa adanya gambar. Pada tugas ini kamu ditan"
},
{
"path": "modules/modular-design.md",
"chars": 69,
"preview": "#\n\n## Objectives\n\nTODO\n\n## Directions\n\n- ▢\n- ▢\n- ▢\n\n## References\n\n-\n"
}
]
// ... and 48 more files (download for full content)
About this extraction
This page contains the full source code of the hacktiv8/phase-0-activities GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 248 files (577.0 KB), approximately 156.9k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.