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 ![Header](assets/header-w1.jpg) 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. ![Let's start!](assets/start.png) **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 ![Hacktiv8 Banner](assets/banner.png) ================================================ FILE: README-WEEK-2.md ================================================ Material Valid for FullStack Immersive Batch 17 # Hacktiv8 Phase 0 Week 2: The World of JavaScript ![Header](assets/header-w2.jpg) 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. ![Let's start!](assets/start.png) ## 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) ## 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 ![Hacktiv8 Banner](assets/banner.png) ================================================ FILE: README-WEEK-3.md ================================================ # Hacktiv8 Phase 0 Week 3: Arrays and Logics ![Header](assets/header-w3.jpg) 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. ![Let's start!](assets/start.png) ## 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 ![Hacktiv8 Banner](assets/banner.png) ================================================ FILE: README-WEEK-4.md ================================================ # Hacktiv8 Phase 0 Week 4: Logics in JavaScript ![Header](assets/header-w1.jpg) 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! ![Let's start!](assets/start.png) ## 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 ![Hacktiv8 Banner](assets/banner.png) ================================================ FILE: README-WEEK-5.md ================================================ # Hacktiv8 Phase 0 Week 5: Recursive, Regex, and Object Oriented Programming in JavaScript ![Header](assets/header-w4.jpg) 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. ![Let's start!](assets/start.png) ## 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 ![Hacktiv8 Banner](assets/banner.png) ================================================ FILE: README-WEEK-6-deprecated.md ================================================ # COMING SOON! Prepare For Live Code! ================================================ FILE: README-WEEK-6.md ================================================ # Hacktiv8 Phase 0 Week 6: Finals and JavaScript DOM ![Header](assets/header-w1.jpg) 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! ![Let's start!](assets/start.png) ## 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 ![Hacktiv8 Banner](assets/banner.png) ================================================ 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 ![Header](assets/header-w4.jpg) 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! ![Let's start!](assets/start.png) ## 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 ![Hacktiv8 Banner](assets/banner.png) ================================================ 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. ![Algorithm Illustration](assets/algorithm.png) - ▢ 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 ![Rounded rectangle, like a pill](assets/Start_End.png) ##### Input/Output ![Parallelogram](assets/Input_Output.png "Input/Output") ##### Process ![Rectangle](assets/Process.png "Process") ##### Conditional (IF) ![Diamond](assets/Conditional.png "Conditional") 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

Featured Posts

Lorem Post 1

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.

Lorem Post 2

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.

Lorem Post 3

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.

Lorem Post 4

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.

Lorem Post 5

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.

``` ### 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. > `` ### 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: ![Anchor CSS Layout 1](assets/sample-logo.png) ![Anchor CSS Layout 2](assets/sample-pattern.png) ### 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! ![Contoh Hasil Akhir CSS Layouting](assets/contoh-css-layouting.gif) ### 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

1. Selector dan Styling Sederhana

Saya adalah Box Berwarna Maroon
Saya adalah Box Berwarna Dark Blue
Saya adalah Box Berwarna Salem

2. Selector Lebih Dari Satu

Saya adalah Box Red berukuran 100
Saya juga Box Red tapi ukurannya 200
Saya adalah Box Blue berukuran 200
Saya juga berukuran 200 tapi warnanya Green

3. Selector Melalui Parent

Desain saya diatur oleh Parent Saya
Desain saya diatur oleh Parent Saya
Desain saya diatur oleh Parent Saya, tapi saya punya warna khusus, yaitu Gold!
``` ### 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. > `` 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: ![Contoh Hasil Akhir CSS Styling](assets/contoh-css-styling.gif) > **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 ![anchor-jquery](assets/anchor-jquery.gif) ================================================ 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 Tugas Anchor DOM!
``` Dan dengan teknik `createElement`, susunlah dengan dinamis menggunakan **script.js** untuk menjadikan HTML menjadi seperti di bawah ini: **HASIL AKHIR** ```html Tugas Anchor DOM!

Judul Post

Published on 12 May 2016

Lorem Ipsum Dolor Sit Amet

Judul Post 2

Published on 13 May 2016

Lorem Ipsum Dolor Sit Amet

``` Note: ` ``` **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. ![MVC Diagram](assets/mvc-diagram.png) ### 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.
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 , 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 ` 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.
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.
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.
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: ``` { : [ { name: , score: }, ... ], : [ { name: , score: }, ... ], : [] //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: ``` { : { name: , score: }, : { name: , score: }, : { name: , 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: `-,-, ...` Output yang diharapkan: `[ [ ], [ ] ]` 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 ================================================ # Logic Challenge - X dan O ## Problem Diberikan sebuah function xo(str) yang menerima satu parameter berupa string. Function akan me-return true jika jumlah karakter x sama dengan jumlah karakter o, dan false jika tidak. ## Code ```JavaScript function xo(str) { // you can only write your code here! } // TEST CASES console.log(xo('xoxoxo')); // true console.log(xo('oxooxo')); // false console.log(xo('oxo')); // false console.log(xo('xxxooo')); // true console.log(xo('xoxooxxo')); // true ``` ================================================ FILE: modules/cli-git-github-practice.md ================================================ # Practice CLI, Git, and GitHub ## Objectives Melatih penggunaan dasar command line serta Git dan GitHub lebih jauh akan memudahkan kamu seiring pengembangan web kamu. Eksperimen ini dapat secara bebas dilakukan, tidak harus sama persis dengan petunjuk, yang penting esensinya didapat. ## Directions ### 1. Melatih setup repositori Git dari awal - ▢ Buatlah folder baru sebagai latihan. Namanya bebas. - ▢ Inisilaisasi Git dalam folder tersebut dengan `git init`. - ▢ Kini kamu bisa cek status repositori dengan `git status`. - ▢ Tambahkan file teks misalnya `try.txt` atau `README.md`, lalu isi dengan beberapa tulisan. Gunakan perintah `touch` jika mau cepat. - ▢ Cek kembali status repositori. Latihlah untuk melakukan ini setiap saat. - ▢ Add dan commit perubahan yang ada. ### 2. Melatih push dan pull - ▢ [Buatlah repositori GitHub baru](https://github.com/new) bernama sama dengan repositori di local. Kemudian langsung `Create repository`. - ▢ Bacalah petunjuk yang ada pada halaman utama repositori kosong tersebut. - ▢ Add remote dengan `git remote add origin [GIT HTTPS URL]` - ▢ Kirim semua perubahan dengan `git push -u origin master` - ▢ Ubah isi file yang ada di GitHub langsung di web-nya, kemudian commit. - ▢ Dapatkan perubahan yang ada ke local dengan `git pull origin master`. ### 3. Mengatasi conflict jika ada - ▢ Ikuti pedoman berikut saat kamu mendapat conflict pada saat `pull`: - [Resolving a merge conflict from the command line - GitHub](https://help.github.com/articles/resolving-a-merge-conflict-from-the-command-line) - [Resolving Conflicts - Git How To](https://githowto.com/resolving_conflicts) ## References ### CLI - [A Command Line Primer for Beginners, article on Lifehacker](http://lifehacker.com/5633909/who-needs-a-mouse-learn-to-use-the-command-line-for-almost-anything) - [Switching From Windows to Nix or a Newbie to Linux – 20 Useful Commands for Linux Newbies, on Techmint](http://www.tecmint.com/useful-linux-commands-for-newbies) - [Learn Enough Command Line to Be Dangerous, by Michael Hartl](https://learnenough.com/command-line-tutorial) - [Learn CLI the hard way](http://cli.learncodethehardway.org/book) ### Git and GitHub - [Try Git, interactive tutorial by Code School](https://try.github.io) - [Git How To: Guided Git Tutorial](https://githowto.com) - [How to Use Git and GitHub, interactive course on Udacity](https://www.udacity.com/course/how-to-use-git-and-github--ud775) - [Official website of Git SCM](https://git-scm.com) - [Learn Git Branching](http://learngitbranching.js.org) - [Git on Bento](https://bento.io/git) - [Git-Game](https://www.git-game.com) ================================================ FILE: modules/code-combat.md ================================================ # Play Some Code Combat ## Objectives Code Combat merupakan permainan belajar programming yang multiplayer. Anggaplah ini sebagai _having fun_ yang relevan bagimu di samping materi serius JavaScript yang lain. ## Directions - ▢ Kunjungi , lalu sign up sebuah akun agar dapat bergabung di Hacktiv8 Course - ▢ Pilih hero kamu, lalu mainkan berbagai level yang ada. ================================================ FILE: modules/code-documentation.md ================================================ # Know More, Read, and Create Code Documentation ## Objectives - ▢ Mengetahui alasan, aturan, tips dan trik untuk mendokumentasikan kode kamu. ## Learnings ### Why We Must Write Documentation Menulis dokumentasi merupakan salah satu tugas yang paling malas dilakukan oleh developer. Padahal sebenarnya dokumentasi ini sangatlah penting. Berikut adalah beberapa alasan penting kenapa dokumentasi code diperlukan: 1. Jika kamu membuat sebuah aplikasi, kamu akan mengerjakan ini dalam jangka panjang. Bayangkan ketika kamu melihat code yang kamu buat enam bulan lalu. Mungkin kamu akan lupa fungsi sebuah baris kode sehingga dibutuhkan penjelasan agar kamu dapat dengan cepat mengingatnya. 2. Bayangkan jika kamu mengerjakan sebuah aplikasi dan aplikasi kamu di sebar ke internet. Tidak lama kemudian ada ada orang-orang yang tertarik dengan aplikasi atau code kamu dan berusaha untuk mengerti tujuan dari code kamu. Tentu akan jauh lebih mudah buat mereka mengerti jika code kamu terdokumentasi dengan baik. 3. Dunia [open source](./open-source.md) adalah sesuatu yang luar biasa. Bayangkan ketika kita merilis sebuah tools atau aplikasi dan orang-orang ikut membantu mengembangkan aplikasi yang kita ciptakan. Dengan adanya dokumentasi, banyak orang akan dengan mudah turut serta membantu pengembangan aplikasi kita di dunia open source. 4. Banyak yang tidak menyadari bahwa dengan menulis dokumentasi kita akan membuat cara *coding* kita menjadi lebih baik. Bahkan ada metode yang dinamakan [Document-driven development](https://gist.github.com/zsup/9434452) untuk meningkatkan kualitas code. 5. Dan pada akhirnya dengan menulis dokumentasi, kamu akan menjadi seorang penulis yang lebih baik. Siapa tahu suatu saat kamu akan menulis buku :) ## References - [Beginners guide to docs](http://www.writethedocs.org/guide/writing/beginners-guide-to-docs/) - [Documentation-Driven Development (DDD), by Zach Supalla](https://gist.github.com/zsup/9434452) - [DDD Presentation](http://www.slideshare.net/coordt/documentation-driven-development) - [DDD Video](http://pyvideo.org/video/441/pycon-2011--documentation-driven-development) ================================================ FILE: modules/codecademy.md ================================================ # Challenge !! Codecademy javascript ## Tugas 1. Buka link [codecademy JavaScript lesson berikut ini](https://www.codecademy.com/learn/javascript) 2. Register kemudian selesaikan codecademy di atas dari unit 1 - 8 3. Share account kamu untuk di cek oleh instructor kamu yang sedang in charge via slack (contohnya : https://www.codecademy.com/rizafahmi) ================================================ FILE: modules/coderbyte-introduction.md ================================================ # Panduan Menggunakan Coderbyte ## Objectives - ▢ Mengenal coderbyte dan cara kerjanya - ▢ Mampu mengerjakan dan mengumpulkan tugas dari coderbyte sesuai instruksi ## Learnings ### Mengenal Coderbyte ![Coderbyte Front](assets/coderbyte-front.png) Coderbyte adalah sebuah platform yang bermanfaat untuk mempersiapkan diri seseorang untuk bergabung ke dalam coding bootcamps. Platform ini telah banyak dimanfaatkan oleh berbagai coding bootcamp di luar negeri, seperti Hack Reactor, Fullstack Academy, Codesmith, dan lain-lain. Kamu akan memanfaatkan platform ini juga untuk mempersiapkan diri bergabung di Phase 1 HACKTIV8. ### Pendaftaran Account Coderbyte Kamu bisa mendaftar akun Coderbyte sendiri, namun akun tersebut bersifat free dan memiliki akses yang sangat terbatas. Bagi murid Phase 0 yang aktif berada di batch tertentu, HACKTIV8 telah menyediakan akses tersebut, sehingga kamu tidak perlu mendaftar kembali, namun kamu hanya perlu login ke platform saja. ### Mengerjakan Challenge di Coderbyte Kamu bisa mengerjakan berbagai macam challenge di Coderbyte, namun yang wajib kamu selesaikan adalah challenge yang kami tugaskan setiap hari-nya. Setiap tugas diberikan link yang langsung akan merujuk ke halaman challenge Coderbyte. Untuk dapat dengan lancar mengerjakan challenge di Coderbyte, kamu harus perhatikan beberapa panduan di bawah ini: - Challenge List ![Coderbyte Challenge List](assets/cb-challenge-list.png) Gambar di atas menunjukkan list tantangan yang tersedia di Coderbyte. Kamu boleh saja mencoba mengerjakan semuanya, namun pastikan kamu menyelesaikan tantangan yang wajib kamu kerjakan. Kamu akan masuk ke detil sebuah tantangan apabila kamu mengklik salah satu dari list tersebut. - Challenge Details ![Coderbyte Challenge Detail](assets/cb-challenge.png) Gambar di atas menunjukkan detil tantangan yang kamu pilih Coderbyte. - Challenge Language Picker ![Coderbyte Challenge Language](assets/cb-language-selection.png) Gambar di atas menunjukkan halaman dimana kamu harus memilih bahasa apa yang akan kamu gunakan untuk menyelesaikan tantangan tersebut. **Kamu wajib menggunakan JavaScript.** - Challenge Page ![Coderbyte Challenge Language](assets/cb-challenge-detail.png) Gambar di atas menampilkan soal tantangan yang harus kamu kerjakan, dan waktu pengerjaan dihitung semenjak kamu masuk ke halaman ini. - Challenge Code Editor ![Coderbyte Challenge Code Editor](assets/cb-challenge-editor.png) Gambar di atas masih di halaman Challenge (posisinya di bawah soal). Ini, kamu harus mengerjakan tantangannya. Kamu bisa mengerjakannya di text editormu terlebih dahulu dan mengetest nya dengan nodeJS ataupun dengan jsbin lalu kemudian copy-paste ke sini. **Pastikan kamu tidak mengubah code diluar function yang harus kamu kerjakan.** - Challenge Result ![Coderbyte Challenge Result](assets/cb-result.png) Gambar di atas akan muncul setelah kamu telah submit codemu. Sistem akan mengevaluasi dan memberikan score yang dinilai berdasarkan seberapa tepat code-mu menjawab soal, berapa banyak lines-of-code yang kamu buat, dan berapa lama kamu mengerjakannya. Apabila nilai dari coderbyte kurang memuaskanmu, kamu bisa mengerjakan ulang. **Kami tidak akan mengurangi nilai apabila kamu berkali-kali mengerjakan soal yang sama, kami akan mengambil nilai terbaik.** Coderbyte menyediakan solution code, namun mengerjakan soal tantangan dengan kemampuanmu sendiri adalah tanggung jawabmu sendiri, karena mengandalkan solution code tidak akan membuatmu terlatih. **Mulai Week 3, kami ada sesi live coding online yang akan mengetest kemampuan coding dan logikamu. Apabila kamu mendapat nilai baik dengan mengandalkan solution code namun gagal di live coding, akan sulit bagi kami untuk melanjutkanmu ke phase 1.** Lebih baik kamu bertanya dan dimentoring oleh instuktur hingga kamu terlatih ketimbang melihat solution code. HACKTIV8 Challenge Point Calculation: - 100: Coderbyte Test Case Point: 5 - 85: Coderbyte Test Case Point: 4 - 50: Coderbyte Test Case Point: 3 - 0: Coderbyte Test Case Point: < 3 ================================================ FILE: modules/codewars.md ================================================ # Play Codewars ## Objectives Codewars merupakan tempat berlatih programming yang sangat menantang. Kita dapat meningkatkan skill dengan menyelesaikan berbagai tantangan code yang nyata. Anggaplah ini sebagai _having challenges_ yang relevan bagimu di samping materi JavaScript yang lain. ## Directions - ▢ [Kunjungi Codewars untuk mulai bergabung](http://www.codewars.com/r/0OfMJg). - ▢ Pilih skill JavaScript lalu buktikan bahwa kamu mampu melalui babak kualifikasi yang terdiri dari tiga soal mudah. - ▢ Setelah berhasil masuk, mulailah _Training_ kamu. ================================================ FILE: modules/collaboration.md ================================================ # Learn Collaboration ## Objectives Berikut hal-hal yang kita perlu pahami dengan apa yang akan kita lakukan setiap hari pada fase ini. Teknik-teknik ini juga berguna untuk belajar lebih baik, efektif, dan efisien sambil melakukan pengembangan (development) diri dan aplikasi yang kita buat. ## Directions ### . - ▢ - ▢ - ▢ Membuat program sendiri tentu saja seru dan menantang. Namun di kenyataan, kita membuat program bersama-sama. Bisa dengan satu orang lainnya, suatu tim dengan beberapa orang, bahkan dalam skala besar dengan puluhan atau ratusan orang! Lalu bagaimana cara kita mengaturnya? Untuk mengatasi hal ini, kita memerlukan alat untuk mengatur/memanajemen kode program atau kode sumber (source code) kita. Source code kita akan disimpan dan diatur dengan rapi, kemudian bahkan secara historis bisa kita ketahui perubahannya. Jika pada saat pengembangan aplikasi ada kesalahan, kita bisa kembali ke keadaan kode program belum ada masalah, seperti mesin waktu! Alat-alat atau tools untuk melakukannya disebut _source code management_ (SCM) ataupun _version control system_ (VCS). Aplikasi SCM/VCS yang populer antara lain ada Git, Subversion (SVN), Mercurial, Bazaar, BitKeeper, Concurrent Versions System (CVS), dll. Ke depan, kita akan gunakan aplikasi [Git](https://git-scm.com) saja. Git sendiri memerlukan sebuah server di Internet agar kita bisa berinteraksi dan menyimpan code kita dengan mudah, maka dari itu kita akan juga gunakan [GitHub](https://github.com) maupun [Bitbucket](https://bitbucket.org). Strategi ini juga terkait _project management_, koordinasi dan pembagian tugas secara kolaboratif. Agar tiap anggota tim dapat bekerja di subbagian yang fokus pada kerjaan yang cakupannya kecil. Sehingga aplikasi atau program yang besar dapat dikerjakan dengan lebih teratur, tidak dikerjakan sekaligus dengan banyak orang. ## References - ================================================ FILE: modules/color.md ================================================ # Color ## References - [Social Media Colours – Hex and RGB Colours of the Web](http://designpieces.com/2012/12/social-media-colours-hex-and-rgb) ================================================ FILE: modules/contact-form.md ================================================ # Create a Personal Contact Form ## Objectives - ▢ Mempraktekkan pengetahuan HTML5 forms untuk membuat formulir kontak dengan email sederhana. - ▢ Mempraktekkan pembuatan formulir yang baik. Berbagai element yang bisa dipakai adalah sebagai berikut: - Legend - Label - Input - Text Area - Button - Select Box - Data List - Option Group Berikut contoh formulir kontak dengan email dan berbagai input lain sederhana dengan HTML dan CSS. Adaptasikan dengan kebutuhan kamu. ![Contoh Formulir Kontak](assets/example-contact.png) ## Directions ### 1. Menambahkan bagian formulir - ▢ Bukalah halaman utama kamu yaitu `index.html`, kemudian buatlah sebuah formulir di bagian bawahnya: - Mulailah isi dengan element `form` dan `fieldset`. - Isilah dengan berbagai elemen pembangun form HTML. - Gunakan elemen penting seperti label dan button. - Dalam contoh ini terdapat `select` dan `option` sebagai input yang telah ditetapkan. - Sementara kita tidak pakai `action` dan `method`. - Gayakan formulir dengan CSS. ### 2. Kirim berbagai perubahan yang ada ke website kamu - ▢ Add, commit, dan push perubahan ke GitHub. - `git add index.html` - `git commit -m "Add a contact form"` - `git push` - ▢ Cek halaman profil kamu yang terbaru. - ▢ Share hasil kamu di Slack. ## References - [Learn to Code HTML & CSS, by Shay How](http://learn.shayhowe.com/html-css/building-forms) (lesson 10) - [HTML Tutorials, by TutorialsPoint](http://tutorialspoint.com/html) - [DevDocs HTML Documentation](http://devdocs.io/html) - [Design Better Forms, by Andrew Coyle on UXDesign.cc](https://uxdesign.cc/design-better-forms-96fadca0f49c) ================================================ FILE: modules/contact-list.md ================================================ # Create a Contact List Simulation ## Objectives Membuat simulasi daftar kontak sederhana yang dapat menyimpan nama, email, telepon tiap orang. - ▢ Membuat objek sederhana yang dapat melakukan fungsi tertentu. - ▢ Melihat properti dan nilai objek. - ▢ Menambahkan/memasukkan sebuah nilai terhadap objek. - ▢ Mencari nilai pada properti objek. ## Directions Bukalah Dev Tools, JSBin, atau CodePen bahkan text/code editor untuk mengedit HTML dan JavaScript terlebih dahulu. ### 1. Buat array untuk daftar Kontak Buatlah agar objek `DaftarKontak` berisi array kosong, yang nantinya akan memiliki beberapa objek lain. ```javascript DaftarKontak // [] ``` ### 2. Siapkan berbagai kerangka function dasar Buatlah objek `Program` memiliki fungsi untuk mengolah `DaftarKontak` berikut walau belum ada isi logic-nya: - `tambahKontak(nama, email, telepon)`: menambahkan objek baru dengan properti di parameter - `lihatSemua()`: menampilkan semua objek yang ada - `cariKontak(nama)`: menampilkan objek sesuai yang punya nama di parameter ### 3. Implementasikan function untuk menambahkan kontak Mulailah membuat logic dalam fungsi `tambahKontak` dimana akan dibuat sebuah objek dengan properties sesuai parameter tersebut. ```javascript Program.tambahKontak("Ruben", "ruben@gmail.com", "021777555"); // ---Kontak baru ditambahkan--- console.log(DaftarKontak); // menghasilkan seperti // [ // { email:"ruben@gmail.com", nama:"Ruben", telepon:"021777555" } // ] ``` lalu jika kita tambah lagi... ```javascript Program.tambahKontak("Gugel", "gugel@gmail.com", "021777888"); // ---Kontak baru ditambahkan--- console.log(DaftarKontak); // menghasilkan seperti // [ // { email:"ruben@gmail.com", nama:"Ruben", telepon:"021777555" }, // { email:"gugel@gmail.com", nama:"Gugel", telepon:"021777888" } // ] ``` ![tambah kontak](assets/contact-tambahkontak.png) ### 4. Implementasikan function untuk melihat berbagai kontak yang ada Menggunakan `console.log(DaftarKontak);` setiap ingin melihat semua daftar kontak yang ada agak terlihat jelek. Mari kita buat logic `lihatSemua()` agar dapat menampilkan semuanya dengan bagus. ```javascript Program.lihatSemua(); // ---Daftar nama--- // 0. Nama: Ruben // Email: ruben@gmail.com // Telepon: 021777555 // 1. Nama: Gugel // Email: gugel@gmail.com // Telepon: 021777888 ``` ![lihat semua](assets/contact-lihatsemua.png) ### 5. (Opsional) Implementasikan pencari detail kontak dengan parameter `nama` Bagaimana jika kita tau nama orang dan kita ingin tau nomor teleponnya? Buatlah agar `cariKontak(nama)` agar dapat mencari hal tersebut. ```javascript // ---Kontak Ruben ditambahkan--- // ---Kontak Gugel ditambahkan--- Program.cariKontak("Ruben"); // Nama: Ruben // Email: ruben@gmail.com // Telepon: 021777555 ``` ![cari nama](assets/contact-carikontak.png) ### 6. (Opsional) Variasikan implementasi pencari detail kontak Function `cariKontak` juga bisa dibuat parameter kedua untuk menampilkan data spesifik yang ditampilkan. Misalnya hanya mengembalikan/menampilkan `email` tanpa `nama` dan `telepon`. Begitupun seterusnya. ## Submissions - ▢ Buatlah sebuah file `contact-list.js` pada repo website kamu. - ▢ Kirim file tersebut ke Gist. - ▢ Share hasil kamu di Slack secara private message ke instructor yang sedang in charge. ================================================ FILE: modules/core-values.md ================================================ # Explore Your Core Values ## Objectives - ▢ Mengidentifikasi berbagai nilai inti yang kamu miliki dapat meningkatkan kesempatanmu untuk dapat segera sukses, baik dalam hidup maupun karir. ## Directions Buatlah sebuah halaman `core-values.html` dalam website kamu, lalu jabarkan pertanyaan berikut dan jawaban kamu di dalamnya. - ▢ Pilihlah berbagai nilai yang tertera dalam kumpulan kata berikut, yang kamu pikirkan ataupun rasakan saat kamu sedang dalam keadaan paling bahagia, bangga, puas, atau tenang. Tambahkan yang lain jika perlu. - ▢ Tulislah kalimat atau paragraf yang mengandung nilai-nilai yang kamu pilih. Jelaskan mengapa nilai tersebut berarti bagimu. - ▢ Ceritakan topik yang orang lain sering atau baru saja tanyakan atau minta saran kepadamu. **Kumpulan nilai yang kamu bisa pilih:** Adil Aktivisme Akuntabilitas Alam Ambisi Antusias Bebas Benar Berani Bijak Bimbingan Canggih Cinta Damai Dekat Efektivitas Efisiensi Finansial Gembira Gerakan Harga Diri Harmonis Hiburan Iba Iman Inspirasi Integritas Intelektual Introspeksi Jujur Kasih Sayang Kaya Keamanan Keluarga Kendali Kerja Sama Komitmen Kompetensi Kompetisi Kreatif Kredibilitas Kualitas Kuasa Lingkungan Hidup Loyalitas Mandiri Masyarakat Membantu Orang Merdeka Murni Musik Otonomi Pantas Patriot Pekerjaan Berarti Pelayanan Publik Pemimpin Pengakuan Pengaruh Pengetahuan Percaya Pertumbuhan Petualangan Prestasi Pribadi Ramah Reputasi Rohani Sahabat Sehat Semangat Seni Sesuai Stabilitas Status Sukarela Tanggung Jawab Tantangan Tegas Tekad Tekun Tenang Tenar Terbuka Uang Unggul Waktu Wawasan - ▢ Commit dan push file tersebut ke GitHub. - ▢ Share hasil kamu di Slack. ## References - [What Are Core Values? Here's a Workbook to Help You Discover Yours, via Living Moxie](http://dawnbarclay.com/core-values) - [How to Live With Purpose, Identify Your Values and Improve Your Leadership, by Anne Loehr on Huffington Post](http://www.huffingtonpost.com/anne-loehr/how-to-live-with-purpose-_b_5187572.html) - [It’s Fine. Don’t Fight It. Six Steps to Programmer’s Zen. by Tomek Rusilko on Lunar Logic](http://blog.lunarlogic.io/2016/six-steps-to-programmers-zen) - [Unmasking Impostor Syndrome: 7 Ways to Boost Your Confidence at Work, by Emily Bonnie on Wrike](https://www.wrike.com/blog/unmasking-impostor-syndrome-7-ways-boost-confidence-work) - [Feel like an impostor? You’re not alone - Andrea Ayres on Crew.co](https://crew.co/backstage/blog/feel-like-an-impostor-youre-not-alone) - [Everyone Suffers from Imposter Syndrome — Here’s How to Handle It, by Andy Molinsky on HBR](https://hbr.org/2016/07/everyone-suffers-from-imposter-syndrome-heres-how-to-handle-it) ================================================ FILE: modules/css3-advanced.md ================================================ # Use CSS3 Transforms, Transitions, and Animations ## Objectives Menggunakan berbagai pondasi dan aturan CSS3 yang berfungsi untuk: - Transformasi bentuk 2D dan 3D. Dengan `rotate`, `scale`, `translate`, `skew`, `perspective`. - Transisi berbagai property yang bisa ditransisikan. Dengan `duration`, `timing`, `delay`. - Animasi dengan `@keyframes` dan `animation` properties (`name`, `duration`, `timing`, `delay`, `iteration`, `direction`) - Menyesuaikan dengan prefix vendor browser untuk beberapa property modern Untuk saat ini, kita tidak harus menggunakan semua property yang tersedia. Cukup gunakan sesuai kebutuhan dan sesuka hatimu. ## Directions ### 1. Memahami dasar transformasi, transisi, dan animasi pada CSS3 - Membaca referensi berikut: - ▢ [CSS Transforms](http://learn.shayhowe.com/advanced-html-css/css-transforms) - ▢ [CSS Transitions & Animations](http://learn.shayhowe.com/advanced-html-css/transitions-animations) ### 2. Menggayakan file HTML yang sudah dibuat Selalu gunakan selector `id` dan `class` untuk berbagai element. - ▢ Tambahkan berbagai elemen HTML pada file `index.html`. - ▢ Tambahkan berbagai aturan CSS pad file `styles.css`. - ▢ Transisikan berbagai elemen yang akan berubah value property-nya saat di-hover. - ▢ Transformasi berbagai bentuk elemen di halaman tersebut: - Putar dengan `rotate` - Ubah skala bentuk dengan `scale` - Distorsi dengan `skew` - Ubah posisi dengan `translate` - Ubah perspektif dengan `perspective` - ▢ Animasikan berbagai bentuk elemen di halaman tersebut: - Gunakan keyframe dan berbagai property animation ### 3. Kirim berbagai perubahan yang ada ke website kamu - ▢ Add, commit, dan push perubahan ke GitHub - `git add styles/index.css` - `git commit -m "Enhance my style"` - `git push` - ▢ Cek tampilan halaman yang terbaru - ▢ Share hasil kamu di Slack. ## References - [CSS3 Awesome: CSS Transitions, Transforms, and Animation Tutorial](http://css3.bradshawenterprises.com) - [The Guide To CSS Animation: Principles and Examples, by Tom Waterhouse on Smashing Magazine] (https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples) - [CSS Tools: Reset CSS, by Eric Meyer](http://meyerweb.com/eric/tools/css/reset) - [CSS Reset](http://cssreset.com) ================================================ FILE: modules/css3-basics.md ================================================ # Basics of Cascading Style Sheet (CSS) ## Objectives - ▢ Mengulas dasar-dasar CSS. ## Learnings CSS secara harfiah berarti Lembar Penggayaan yang Mengalir ke Bawah. Oke, ternyata jika diterjemahkan malah membingungkan, mari hanya pedulikan bahasa Inggrisnya. CSS merupakan bahasa style sheet yang berguna untuk membantu menyajikan dokumen yang ditulis dengan HTML maupun XML bahkan SVG. CSS mengatur bagaimana elemen-elemen seharusnya ditampilkan di layar, di kertas, dan berbagai media lainnya. Hal-hal seperti warna, ukuran, posisi, dll (color, size, position, etc) dapat diatur oleh CSS. Tentu saja berarti CSS membutuhkan HTML agar dapat bekerja. Saat ini versi terbarunya adalah versi 3, secara resmi disebut CSS3. Sintaks atau cara penulisan CSS biasanya terlihat seperti ini: ```css h1 { font-weight: 800; color: gray; } p { color: orange; } #website-title { padding: 10px; } .menu { margin: 5em; } button:hover { background-color: #FFECB3; } ``` yang akan menghasilkan halaman web bisa ditampilkan seperti ini jika di JSBin: ![Contoh CSS di JSBin](assets/css-jsbin.png) atau seperti ini jika di CodePen: ![Contoh CSS di Codepen](assets/css-codepen.png) Dikarenakan bahasan CSS juga sangat banyak sekali layaknya HTML, di sini kita hanya membahas sepintas hal-hal yang penting. Sehingga tujuannya mengenalkan seperlunya agar kamu dapat familiar. Silakan lihat [berbagai referensi di bawah](#guides) untuk belajar lebih lanjut. ### Menyertakan CSS untuk HTML Ada 4 metode utama untuk menyertakan CSS agar dapat mengubah layout HTML. (1) Embed dalam dokumen HTML ```html ``` (2) Link ke file CSS terpisah. Dengan cara menaruh meta data berikut di head HTML. ```html ``` (3) Inline CSS pada elemen/tag HTML ```html isi tag ``` (4) Import CSS dalam file CSS, misalnya di dalam `mainfile.css` ```css @import "otherfile.css"; ``` ### Pemilih Elemen (Selector) Setiap elemen HTML yang ada di halaman web dapat dimodifikasi ataupun dihias dengan CSS. Selector menunjuk elemen apa yang ada di HTML untuk diterapkan style/modifikasinya (seperti warna, ukuran, posisi). Selector dapat merupakan satu atau kombinasi syarat (qualifiers) untuk memilih elemen yang unik, tergantung spesifikasi yang kita tulis. Bentuk umum selector seperti berikut: ```css selector { property: value; /* properti lainnya */ } ``` Terdapat perbedaan cara seleksi antara: - semua paragraf yang ada di halaman web - suatu paragraf yang ada di dalam `div` ```css /* semua paragraf */ p { color: orange; } /* paragraf di dalam div */ div p { background-color: coral; } ``` Selector juga biasanya menunjuk nilai atribut (attribute value) seperti `id` atau `class` ataupun tipe elemen seperti `

` atau `

`. Setelah menunjuk atribut atau elemen, terdapat definisi yang menggunakan kurung keriting (curly bracket) seperti `{ }` yang berisi style/modifikasi yang ingin dilakukan terhadap atribut atau elemen yang dituju. Misalkan ada elemen HTML seperti berikut: ```html ``` Maka kita dapat mendefinisikan CSS selector seperti berikut: ```css img { width: 100px; } #logo { background-color: white; } .gambar { border: 1px solid black; } .gambar.kecil { width: 50px; } ``` ### Properti (Properties) Setelah elemen dipilih, properti dari style yang tersedia dapat diterapkan pada elemen tersebut. Nama properti diikuti dengan tanda titik dua (colon) (`:`) diikuti dengan nilai/value yang ditutup dengan titik koma (`;`). Ada beberapa properti umum yang bisa digunakan seperti: - `color` - `background` - `font-size` - `height` and `weight` ### Komentar (Comments) Kita bisa menambahkan komentar jika perlu. ```css /* Komentar atau penjelasan */ selector { property: value; } /* Komentar lain */ ``` ### Box Model dan Posisi (Positioning) Sekarang, bagaimana cara elemen-elemen ditampilkan pada halaman dan diatur ukuran serta posisinya? Untuk itu kita perlu mengetahui box model. Juga ingat kembali tentang adanya level penempatan elemen, antara `block` atau `inline` yang mana setiap elemen memiliki value default tersebut pada properti `display`. Ada berbagai value lain seperti `inline-block`, `float`, `absolute`, `relative`, `fixed`, dan `none`. Value display diatur seperti berikut: ```css p { display: inline-block; } ``` `inline-block` berarti bersifat seperti elemen level `block`, punya berbagai properti box model, namun tetap ditampilkan sebaris (inline) dengan elemen lain, tidak memulai baris baru. Sehubungan dengan box model, umpamakan setiap elemen HTML seperti kotak yang memiliki beberapa lapisan jarak (`padding`), batas (`border`), pinggiran (`margin`), dan posisi (`position`); diilustrasikan seperti ini, yang bahkan kamu bisa lihat dengan membuka Chrome Dev Tools. ![HTML/CSS Box Model](assets/html-css-box-model.png) ### Transisi (Transitions) Transition memungkinkan kita untuk mengubah value properti dengan halus dalam durasi tertentu, jika terdapat kondisi yang berubah misalnya dari static/non-hover (`selector` biasa) kemudian di-hover dengan mouse (`selector:hover`). Misalnya mengubah ukuran font heading jika di-hover: ```css h1 { font-size: 20px; transition: all 1s; } h1:hover { font-size: 30px; } ``` Jika tanpa property `transition`, maka perubahan akan terlihat sangat tiba-tiba. ### Transformasi (Transforms) Transform memungkinkan kita untuk mengubah bentuk atau orientasi elemen seperti `scale`, `rotate`, `translate`, `skew`. Hal ini juga dapat dikombinasikan dengan transition. ```css h1 { transition: all 1s; } h1:hover { transform: scale(1,2) skew(-15deg); } ``` ### Animasi (Animation) Dengan animation kita bisa menspesifikasikan beberapa keyframe (bingkai kunci) yang menjadi titik utama animasi. Yaitu style-style apa saja yang akan diatur pada waktu tertentu. ```css @keyframes resize { 0% { padding: 0; } 50% { padding: 0 10px; } 100% { padding: 0 30px; } } h1 { animation: resize 1s alternate infinite ease-in-out; } ``` ## References **Basics** - [CSS Tutorials, by TutorialsPoint](http://tutorialspoint.com/css) - [Getting started with CSS, by Mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started) - [Introduction to CSS, by CSS Basics](http://cssbasics.com/introduction-to-css) - [Learn to Code HTML & CSS, by Shay How](http://learn.shayhowe.com/html-css/getting-to-know-css) (lesson 3 to 9) - [Learn to Code Advanced HTML & CSS, by Shay Howe](http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning) (lesson 2 and 3) - [Meet the Pseudo Class Selectors, on CSS Tricks](https://css-tricks.com/pseudo-class-selectors) - [How To Use CSS3 Pseudo-Classes, by Richard Shepherd on Smashing Magazine](https://www.smashingmagazine.com/2011/03/how-to-use-css3-pseudo-classes) - [Decoupling HTML From CSS, by Jonathan Snook on Smashing Magazine](https://www.smashingmagazine.com/2012/04/decoupling-html-from-css) - [Belajar CSS dari dasar, oleh Sekolah Koding](http://www.sekolahkoding.com/kelas/belajar-css-dari-dasar) - [Belajar CSS3, oleh Sekolah Koding](http://www.sekolahkoding.com/kelas/belajar-css3) ================================================ FILE: modules/css3-rules.md ================================================ # Use CSS3 Rules ## Objectives Menggunakan berbagai pondasi dan aturan CSS3 yang berfungsi untuk: - Mengikutkannya ke dalam HTML - Komentar atau dokumentasi - Selector, properties, dan value - Positioning - Box model (padding, border, margin) Kamu juga dapat menggunakan teknik shorthand untuk mengeset value untuk beberapa property khusus. ## Directions ### 1. Pastikan kamu sudah mengenal pondasi HTML dan CSS - ▢ Mengidentifikasi selector pada CSS. - ▢ Menjelaskan bagaimana CSS menggayakan atau mempercantik dokumen HTML. - ▢ Membandingkan sifat dan kegunaan ID dan class dalam HTML dan CSS. - ▢ Memahami box model (padding, margin, border) pada HTML dan CSS. - ▢ Memahami dasar display dan positioning pada HTML dan CSS (inline, inline-block, float, absolute, relative, fixed, dll). Perkuatan pemahaman dasar CSS dari berbagai referensi yang disertakan. ### 2. Styling file HTML yang sudah dibuat - ▢ Buatlah file `styles.css` dalam folder `styles`. - ▢ Ikutkan file CSS tersebut ke dalam file HTML dengan cara "external". - ▢ Gayakan berbagai elemen di halaman tersebut: - Gunakan selector `id` dan `class`. - Beri warna, warna background, bentuk font/tipografi yang sesuai. - Posisikan berbagai elemen di halaman agar lebih rapi. Sekarang struktur reponya menjadi: ``` [USERNAME].github.io ├── images ├── index.html └── styles └── index.css ``` ### 3. Kirim berbagai perubahan yang ada ke website kamu - ▢ Add, commit, dan push file CSS ke GitHub. - `git add styles/index.css` - `git commit -m "Create my style"` - `git push` - ▢ Cek tampilan halaman profil kamu sekarang. - ▢ Share hasil kamu di Slack. ## References **Basics** - [CSS Tutorials, by TutorialsPoint](http://tutorialspoint.com/css) - [Getting started with CSS, by Mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started) - [Introduction to CSS, by CSS Basics](http://cssbasics.com/introduction-to-css) - [Learn to Code HTML & CSS, by Shay How](http://learn.shayhowe.com/html-css/getting-to-know-css) (lesson 3 to 9) - [Learn to Code Advanced HTML & CSS, by Shay Howe](http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning) (lesson 2 and 3) - [Meet the Pseudo Class Selectors, on CSS Tricks](https://css-tricks.com/pseudo-class-selectors) - [How To Use CSS3 Pseudo-Classes, by Richard Shepherd on Smashing Magazine](https://www.smashingmagazine.com/2011/03/how-to-use-css3-pseudo-classes) - [Decoupling HTML From CSS, by Jonathan Snook on Smashing Magazine](https://www.smashingmagazine.com/2012/04/decoupling-html-from-css) - [Belajar CSS dari dasar, oleh Sekolah Koding](http://www.sekolahkoding.com/kelas/belajar-css-dari-dasar) - [Belajar CSS3, oleh Sekolah Koding](http://www.sekolahkoding.com/kelas/belajar-css3) **Extra** - [CSS: An overview, on Codecademy](https://www.codecademy.com/courses/web-beginner-en-TlhFi) - [Learn CSS Layout](http://learnlayout.com) - [The CSS Box Model, by CSS-Tricks](https://css-tricks.com/the-css-box-model) - [The Best Way to Learn CSS, on Envato Tuts+](http://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-css--webdesign-11906) - [Understanding CSS classes vs. IDs, by Skillcrush](http://skillcrush.com/2013/01/28/understanding-css-classes-vs-ids) - [Hexadecimal colors, by Skillcrush](http://skillcrush.com/2012/05/07/hexadecimal) - [Learn CSS in Y Minutes](https://learnxinyminutes.com/docs/css) - [DevDocs CSS Documentation](http://devdocs.io/css) ================================================ FILE: modules/database.md ================================================ # Get to Know Database Technologies ## Objectives - ▢ Mengetahui berbagai jenis database dan pengelompokannya. ## Learnings Kenali hal-hal terkait database dari referensi-referensi berikut: - [A Guide to Database Technology, on Upwork](https://upwork.com/hiring/data/a-guide-to-database-technology) - [Why NoSQL? on Couchbase](http://couchbase.com/nosql-resources/why-nosql) ## References - [Database Management System Tutorial, on TutorialsPoint](http://tutorialspoint.com/dbms) - [SQL vs NoSQL, on SitePoint](https://sitepoint.com/sql-vs-nosql-differences) - [MongoDB, one of the most popular NoSQL database](https://mongodb.com) - [PostgreSQL, one of the most popular SQL database](https://postgresql.org) ================================================ FILE: modules/dev-ecosystem-community.md ================================================ # Understand Developer Ecosystem ## Objectives - ▢ Mengenali keadaan lingkungan IT dan developer zaman sekarang. - ▢ Mengevaluasi posisi kamu sebagai developer atau orang yang sedang belajar pemrograman. - ▢ Memahami ekosistem developer dengan eksplorasi berbagai situs dan komunitas developer. ## Directions ## Eksplorasi berbagai situs komunitas developer Kunjungi dan eksplorasi berbagai hal di beberapa website berikut: - [GitHub Explore](https://github.com/explore) - [Hacker News](https://news.ycombinator.com) - [Stack Overflow](http://stackoverflow.com) ## Eksplorasi berbagai komunitas developer lokal Ketahui, kunjungi, bahkan berpartisipasilah suatu saat nanti dengan berbagai komunitas. - [JakartaJS](http://meetup.com/jakartajs) - [JakartaJS Slack](https://jakartajs.slack.com) ([Join Here](http://jakartajs-join.herokuapp.com)) - [ReactJS Indonesia](http://react.id) - [Google Developer Group Indonesia](https://developers.google.com/groups/directory/Indonesia) - Free Code Camp - dan lainnya yang bisa kamu temukan di [Meetup.com](https://www.meetup.com/find) serta [Facebook Groups](https://www.facebook.com/groups) ## Mengetahui keadaan lingkungan IT sekarang Walaupun ada kamu yang bukan lulusan IT, yang jelas dalam bootcamp ini dan begitu lulus kamu akan termasuk pelajar dan profesional di bidang IT. - [Mahasiswa IT Harus Bisa Coding, di CodePolitan](https://www.codepolitan.com/mahasiswa-it-harus-bisa-coding) - [7 “Penyakit” Mahasiswa IT yang Menyebabkan Sulit Bersaing di Industri, di CodePolitan](https://www.codepolitan.com/7-penyakit-mahasiswa-it-yang-menyebabkan-sulit-bersaing-di-industri) ## Mengevaluasi kemampuan dan kepribadian diri - Ikuti kuis "[Are You a Bad or Good Developer?](https://www.codementor.io/learn-programming/bad-developer-vs-good-developer) di Codementor - Ikuti kuis [16 Personalities](https://16personalities.com). Lalu tunjukkan hasilnya pada profil kamu di website. ================================================ FILE: modules/editor.md ================================================ # Choose Your Text and Code Editor ## References - [Dev Series: 5 text editor modern untuk pengembang aplikasi](https://id.techinasia.com/developer-series-5-text-editor-modern) ================================================ FILE: modules/faktor-prima.md ================================================ # Challenge !! Faktor Prima ## Objectives Faktor prima adalah faktor-faktor suatu bilangan berbentuk bilangan prima. Faktorisasi prima merupakan perkalian dari semua faktor-faktor primanya. ## Tugas 1. Bukalah sebuah tools online untuk menuliskan code JavaScript 2. Buatlah sebuah function dengan nama faktor_prima yang menerima input integer, kemudian olah integer tersebut agar mengembalikan bilangan faktor. 3. Setelah selesai, kirim hasil code kamu dengan gist, dengan nama file : faktorPrima.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge. ## Input bilangan apa saja ## Output Ketika function dipanggil dengan parameter 12, akan menghasilkan data sbb : 2 pangkat 2 3 pangkat 1 Cobalah dengan memasukkan parameter lain, seperti 42, 84, 200, dll ================================================ FILE: modules/format-angka.md ================================================ # Challenge !! Format Angka ## Tugas 1. Bukalah sebuah tools online untuk menuliskan code JavaScript 2. Buat sebuah function bernama formatAngka. Function tsb akan menerima 2 buah parameter number, dimana parameter pertama harus lebih besar dari parameter kedua. Apabila parameter pertama lebih kecil, maka function akan menghasilkan error message. Function ini akan mengkonversi hasil bilangan pertama dibagi bilangan kedua, dan menformatnya. Contohnya : formatAngka(250000, 100), menjadi 2,500 3. Kirim hasil code kamu dengan gist, dengan nama file : formatAngka.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge. ================================================ FILE: modules/format-huruf.md ================================================ # Challenge !! Format Huruf ## Tugas 1. Bukalah sebuah tools online untuk menuliskan code JavaScript 2. Buat sebuah function bernama formatHuruf. Function tsb akan menerima sebuah parameter string dengan format campuran dari huruf besar dan huruf kecil, kemudian menghasilkan string kembali dengan format huruf yang berkebalikan. Contoh nya, parameter = "MataHari PaGi", maka outputnya adalah "mATAhARI pAgI" 3. Kirim hasil code kamu dengan gist, dengan nama file : formatHuruf.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge. ================================================ FILE: modules/fox-hub-guide.md ================================================ # HACKTIV8 Fox Hub Guide HACKTIV8 Fox Hub (Beta) adalah platform yang digunakan untuk melakukan pengumpulan tugas dan monitoring nilai setiap student Phase 0 sampai akhir program. ## Getting Started [Link Hacktiv8 Fox Hub (Beta)](http://new-foxhub.hacktiv8.com.s3-website-ap-southeast-1.amazonaws.com) Cara Penggunaan: ### Login and Password Settings 1. Login menggunakan email yang digunakan untuk mendaftar hacktiv8 dan password. Password menggunakan format [ NAMA ][ NAMA EMAIL ]. Contoh: nama yang digunakan untuk mendaftar di website Hacktiv8: Adhy Wiranata email yang digunakan untuk mendaftar di website Hacktiv8: hello@gmail.com maka passwordnya adalah: adhywiranatahello ![Demo Login](/assets/demo-foxhub-login.png) 2. Di halaman Dashboard, student bisa melihat score keseluruhan, tugas yang telah dikumpul, dan juga mengumpul tugas. ![Demo Dashboard](/assets/demo-foxhub-dashboard.png) 3. Setelah login, pastikan telah mengganti password dengan masuk ke halaman My **Profile**, bagian Change Password. ![Demo Profile](/assets/demo-foxhub-profile.png) ![Demo Change Password](/assets/demo-foxhub-change-password.png) ### Task Submissions 1. Untuk mengumpulkan tugas, masuk ke page **Submit Task**. ![Demo Dashboard](/assets/demo-foxhub-dashboard.png) 2. Pilih Task yang akan di submit melalui dropdown menu. ![Demo Task](/assets/demo-foxhub-task-page.png) 3. Akan ada dua tipe tugas, Manual dan Automated. Untuk tugas Manual (Week 1 - 2, 5 - 6) hanya bisa mengumpulkan link. Gunakan repl/jsbin/dropbox/google drive dengan sesuai. Untuk tugas Automated (Week 3 - 4) hanya bisa menuliskan kode JavaScript yang akan di test secara otomatis dan langsung mengeluarkan nilainya. ![Demo Task](/assets/demo-foxhub-submit-task.png) 4. Untuk tugas Manual, pastikan link nya dapat dibuka. ![Demo Manual](/assets/demo-foxhub-manual.png) 5. Untuk tugas Automated, pastikan minimal mendapatkan score 80%. **WARNING: HANYA PASTE CODE FUNCTION NYA SAJA DI DALAM AUTOMATED TESTER.** ![Demo Auto](/assets/demo-foxhub-auto.png) ![Demo Tester](/assets/demo-foxhub-test-cases.png) ### Submissions and Scoring 1. Untuk mengecek setiap tugas yang sudah disubmit, dapat masuk ke page **My Submitted Tasks**. ![Demo Dashboard](/assets/demo-foxhub-dashboard.png) 2. Ada dua macam pembagian task, yaitu task yang sudah diperiksa dan yang belum. Student dapat memastikan apakah sudah mengumpulkan atau belum melalui halaman ini. ![Demo Dashboard](/assets/demo-foxhub-my-submissions.png) 3. Untuk mengetahui performa dari keseluruhan fase 0, bisa masuk ke page **My Phase 0 Scores** untuk mendapatkan detail dari tugas masing-masing. ![Demo Dashboard](/assets/demo-foxhub-my-scores.png) ## Kesulitan dan Isu Lainnya Apabila ada masalah dalam penggunakan Hacktiv8 FoxHub, segera hubungi instruktur phase 0. ================================================ FILE: modules/functional-basics.md ================================================ # Get to Know Functional Programming (FP) ## Objectives - ▢ Mengetahui salah satu paradigma pemrograman modern yang intuitif dengan dunia nyata. ## Directions ### Mengenal Functional Programming (FP) Functional Programming adalah sebuah paradigma programming yang mengedepankan immutability (tidak dapat merubah nilai, namun mengembalikan nilai baru), bebas dari side-effect, dan kemudahan composability dan reusability dari sebuah kode. Namun, kamu tidak perlu memusingkan hal ini terlebih dahulu, karena di materi ini kita hanya akan langsung menggunakan implementasinya di program kita. ### Mengenal Implementasi Functional Programming Salah satu implementasi functional programming yang saat ini akan kita gunakan adalah prinsip immutability, atau sebuah prinsip dimana sebuah tindakan tidak boleh mengubah nilai sebuah variabel atau bisa juga disebut state, namun yang lebih baik adalah mengembalikan nilai baru. Contoh sederhana mengenai mutability dan immutability adalah sebagai berikut: Kita punya variabel bernama mutableVariable, dan kita mau mengubah nilainya menjadi 10 kali dari normal. ```javascript let mutableVariable = 5; mutableVariable *= 10; console.log(mutableVariable); // 50 ``` adapun, dengan prinsip immutability, ketimbang kita mengubah nilai dari variabel tersebut, cara functional programming akan mengassign variabel baru untuk menampung hasil 10 kali lipat tersebut. ```javascript let immutableVariable = 5; let newMultipliedVariable = 10 * immutableVariable; console.log(newMultipliedVariable); // 50 ``` Gambaran di atas secara sederhana menjelaskan perbedaan antara mutability dan immutability. *Kapan kita harus menggunakan functional programming, terutama bagian immutability?* Contoh kasus akan membuat kita lebih paham kapan harus menggunakan FP. Bayangkan, kita adalah sebuah manager dari sebuah departemen store dan kita menjalankan promo potongan harga 10%. Dengan prinsip mutability, berarti kita mengubah seluruh harga barang dari harga awal menjadi harga yang telah didiskon. Misal harga kemeja adalah 500,000, maka harga kemeja sekarang berubah menjadi 450,000. Pada saat kemeja ini dijual, tentu tidak masalah, namun pada saat kita menghitung laba rugi, tentu kita harus mengetahui harga awal sebelum dikenakan diskon. Apabila kita menggunakan prinsip mutability, maka kita tidak bisa mendapatkan harga awal seluruh barang tersebut, karena harganya telah berubah. Kemudian bayangkan jika kita menerapkan immutability kepada proses ini, dimana kita memiliki harga awal dan prinsip immutability membuat proses diskon mengembalikan nilai baru dan anggap saja kita tampung dan kita sebut menjadi "harga setelah diskon". dengan ini, kita bisa menjual barang dengan harga yang dikenakan diskon, namun kita tidak kehilangan nilai harga awal barang tersebut. ### Callback Function Callback function, atau juga disebut sebagai higher-order function, adalah function yang di-passing sebagai parameter ke sebuah function lain. Contoh callback function paling sederhana yang sering kita temukan adalah di `setTimeout` yang pernah kita coba sebelumnya, dengan format berikut: ```javascript setTimeout(function() { alert('hey!'); }, 2000); // Akan memanggil callback function berupa alert setelah 2 detik berlalu ``` atau jika kita menggunakan arrow function yang telah kita pelajari sebagai sebuah callback function: ```javascript setTimeout(() => { alert('hey'); }, 2000); // Akan memanggil callback arrow function berupa alert setelah 2 detik berlalu ``` ### Array Map Function Dalam array, terkadang kita perlu untuk mengubah nilai di dalamnya, namun dengan prinsip immutability, kita ingin mendapatkan hasil perubahan nilai tersebut menjadi nilai baru. Bentuk Penulisan `map`: ```javascript arr.map(callback) ``` **Contoh Map Sederhana 1** ```javascript let arr = [1, 2, 3, 4, 5, 6]; let duaKaliLipat = arr.map(function(isiArray) { return isiArray * 2; }); console.log(duaKaliLipat); // [2, 4, 6, 8, 10, 12] ``` Kamu dapat mencoba kode di atas [disini](http://jsbin.com/mowepu/edit?js,console) **Contoh Map Sederhana 2** ```javascript let arr = ['bundar', 'kotak', 'segitiga']; let newArr = arr.map(function(isiArray) { return 'Topi saya ' + isiArray; }); console.log(newArr); // ['Topi saya bundar', 'Topi saya kotak', 'Topi saya segitiga'] ``` Kamu dapat mencoba kode di atas [disini](http://jsbin.com/fehotaf/edit?js,console) **Contoh Map Sederhana 3 (Arrow Function)** ```javascript let arr = ['bundar', 'kotak', 'segitiga']; let newArr = arr.map( isiArray => { return 'Topi saya ' + isiArray; }); console.log(newArr); // ['Topi saya bundar', 'Topi saya kotak', 'Topi saya segitiga'] ``` Kamu dapat mencoba kode di atas [disini](http://jsbin.com/zacayu/edit?js,console) ### Array Filter Function Dalam array, terkadang kita perlu memfilter isi dari array tersebut, dan mengembalikan nilai baru hasil filter tersebut. Kita bisa menggunakan `filter` untuk kasus ini. Bentuk Penulisan `filter`: ```javascript arr.filter(callback) ``` **Contoh Filter Sederhana 1** ```javascript let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let habisDibagiTiga = arr.filter(function(isiArray) { if(isiArray % 3 === 0) { return true; // Jika true, isi array tidak akan disaring keluar } else { return false; // Jika true, isi array akan disaring keluar } }); console.log(habisDibagiTiga); // [3, 6, 9] ``` atau, lebih sederhana dengan: **Contoh Filter Sederhana 2** ```javascript let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let habisDibagiTiga = arr.filter(function(isiArray) { return isiArray % 3 === 0; // akan mengembalikan nilai true atau false }); console.log(habisDibagiTiga); // [3, 6, 9] ``` Kamu dapat mencoba kode di atas [disini](http://jsbin.com/daqofa/edit?js,console) **Contoh Filter Sederhana 3 (Arrow Function)** ```javascript let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let habisDibagiTiga = arr.filter( isiArray => { return isiArray % 3 === 0; // akan mengembalikan nilai true atau false }); console.log(habisDibagiTiga); // [3, 6, 9] ``` Kamu dapat mencoba kode di atas [disini](http://jsbin.com/yehipaq/edit?js,console) ### Array Reduce Function Array reduce adalah sebuah built-in function `reduce` untuk me-"reduce" atau mengurangi array dan mengubahnya ke satu nilai. Reduce dapat kita gunakan untuk bermacam-macam kegunaan, mulai dari mendapatkan total nilai dari array, mendapatkan nilai maximum atau minimum, dan lain-lain. Bentuk Penulisan `reduce`: ```javascript arr.reduce(callback,initialValue) ``` **Contoh Penggunaan Reduce Sederhana 1** ```javascript var numbersArr1 = [3, 5, 1]; var sumFromArr1 = numbersArr1.reduce(function(currentSum, currentNumber) { return currentSum + currentNumber; }, 0); console.log(sumFromArr1); // 9 var numbersArr2 = []; var sumFromArr2 = numbersArr2.reduce(function(currentSum, currentNumber) { return currentSum + currentNumber; }, 0); console.log(sumFromArr2); // 0, diambil dari parameter kedua (initialValue yang tidak ditambah) ``` Kamu dapat mencoba kode di atas [disini](http://jsbin.com/faxoxis/edit?js,console) **Contoh Penggunaan Reduce Sederhana 2 (Arrow Function)** ```javascript var numbersArr1 = [3, 5, 1]; var sumFromArr1 = numbersArr1.reduce((currentSum, currentNumber) => { return currentSum + currentNumber; }, 0); console.log(sumFromArr1); // 9 ``` Kamu dapat mencoba kode di atas [disini](http://jsbin.com/saxigum/edit?js,console) ## References - [Introduction to Object-Oriented JavaScript, on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) ================================================ FILE: modules/gallery-slide.md ================================================ # Create a Simple Gallery Slide ## Objectives - ▢ Memahami penggunaan DOM, event object, dan scope. - ▢ Berkreatifitas sesuka hati. Dengan pengubahan properti sederhana, kita bisa membuat sebuah halaman yang interaktif, misalnya slide galeri yang terdapat tombol sebelum dan selanjutnya. Contohnya seperti ini: ![Slide Galeri](assets/gallery-slide.gif) ## Directions Bukalah Dev Tools, JSBin, atau CodePen bahkan text/code editor untuk mengedit HTML dan JavaScript terlebih dahulu. ### 1. Buat elemen tombol Buatlah elemen yang akan menjadi tombol `sebelum`/`previous` dan `selanjutnya`/`next`. ### 2. Siapkan gambar Gambar berupa beberapa gambar JPG. Kami rekomendasikan 3 gambar saja agar mudah mengelolanya. Buat elemen image terletak di antara kedua tombol tadi, sertakan sumber gambar default pada elemen image tersebut. ### 3. Siapkan array nama gambar Array berisi string nama beberapa gambar yang ada. ### 4. Buat beberapa variabel global Buat variabel global untuk nama image yang sekarang (misalnya `currentImage`) dan indeksnya (misalnya `currentIndex`), serta variabel yang akan menyimpan indeks `previous` dan `next`. ### 5. Buat function untuk mendapatkan value image dan indeks Function akan dapat mengambil value image sekarang dan indeksnya, kedua value tersebut disimpan ke dalam variabel global. Gunakan method berikut jika kesulitan untuk mengambil value property `src` dari `img` tanpa embel-embel path-nya. ```javascript .src.split("/").pop(); ``` ### 6. Beri fungsi agar tombol previous dan next dapat bekerja Buat dua function yang akan dipanggil ketika terdapat event tombol previous dan next diklik. Masing-masing akan mengetahui value image sekarang dan indeksnya, kemudian tergantung dari indeksnya, akan mengganti `src` gambar, sesuai arah urutannya. ### 7. Kasih tahu jika indeks sedang di ujung Untuk menjaga kesederhanaan, jika indeks sedang berada di ujung awal atau akhir, tidak perlu mengganti `src` gambar. Bisa saja cukup memberi tahu saat hal tersebut terjadi. ### 8. Cek fungsionalitas program Cek kembali bahwa fungsi sudah terpasang pada event listener kedua button yang akan kita pakai. ## Submissions - ▢ Buatlah aplikasi tersebut dalam halaman `gallery-slide.html` pada repo website kamu. - ▢ Commit dan push file tersebut ke GitHub. - ▢ Share hasil kamu di Slack. ================================================ FILE: modules/ganjil-genap-dll.md ================================================ # Angka Ganjil dan Genap ## Objectives - Mengaplikasikan Syntax `for` - Mengaplikasikan Syntax `if-else` ## Directions 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. ### Contoh 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/geser-huruf.md ================================================ # Challenge !! Pergeseran Huruf ## Tugas 1. Bukalah sebuah tools online untuk menuliskan code JavaScript 2. Buat sebuah function bernama geserHuruf.
Function tsb akan menerima dua buah parameter string dan number, kemudian konversi huruf tersebut dengan menggeser urutannya sebanyak n. Contohnya : input "Matahari Pagi" dan "4", menghasilkan "Qexelevm Tekm".
Input "wxyz" dan "4", menghasilkan "abcd" 3. Kirim hasil code kamu dengan gist, dengan nama file : geserHuruf.js. Share gist kamu melalui private message slack ke instructor yang sedang in charge. ================================================ FILE: modules/git-branch-anchor.md ================================================ # Membuat Branch Baru pada Repositori ## Objective - Mengenal Fungsi `branch` pada git ## Directions 1. Pada repository `[USERNAME].github.io` secara default kalian berada pada branch bernama master. 2. Buat sebuah branch baru bernama **development** 3. Pindah dari branch **master** ke branch **development** 4. Tambah konten README.md dengan *Future Plans* yang berisikan rencana kalian kedepan untuk mengembangkan laman website yang sudah kalian miliki. 5. Lakukan *commit* dan *push* terhadap branch **development** 6. Perhatikan perbedaan pada file README.md pada branch **master** dan **development** dari halaman GitHub. ## References - [Git Branches](https://www.atlassian.com/git/tutorials/using-branches/git-checkout) - [Git Branching - Branches in a Nutshell](https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell) ================================================ FILE: modules/git-github-basics.md ================================================ # Learn Git and GitHub Basics ## Objectives Git merupakan tool utama yang pasti akan kamu gunakan setiap hari, sepanjang karirmu sebagai developer. Dengan ini kamu dapat tahu apa saja yang kamu lakukan setiap saat dan berkolaborasi dengan rekan lainnya juga. Anggaplah Git sebagai mesin waktu untuk berbagai kerjaan dan file/folder yang kamu kelola. Sedangkan GitHub merupakan tempat sekaligus komunitas untuk para developer berbagai code dan berkolaborasi dalam berbagai project software. Bahkan modern ini, profil GitHub dapat menggantikan resume/CV untuk melamar pekerjaan! Kami ingin untuk kamu nyaman menggunakan Git dan GitHub sesegera mungkin. Semoga kamu juga bakal ketagihan dan bahkan nggak bisa bayangin hidup tanpa Git dan GitHub! Kini kamu akan melalukan instalasi dan konfigurasi Git di komputermu, mampu menjelaskan dan membedakan Git dan GitHub, serta memahami manfaat dan kekuatan version control system (VCS) atau nama lainnya source code management (SCM). ## Directions ### 1. Pastikan kamu siap akan pakai Git dengan command-line - ▢ Kamu perlu pengetahuan terminal atau command prompt serta CLI. Kamu harus sudah bisa: - ▢ Navigasi ke berbagai directory/folder - ▢ Membuat file dan folder baru - ▢ Menghapus file dan folder - ▢ Melihat berbagai file yang ada di folder - ▢ Mengetahui lokasi folder di mana kita berada - ▢ Memindahkan file ke berbagai folder - ▢ Menyalin file atau folder ke tempat berbeda - ▢ Membuka atau mengubah file ke dalam editor teks/code Kamu bisa menggunakan referensi dibawah ini untuk mempelajari command line: - [Command Line Reference 1](http://lifehacker.com/5633909/who-needs-a-mouse-learn-to-use-the-command-line-for-almost-anything) - [Command Line Reference 2](https://www.codecademy.com/learn/learn-the-command-line) - [Command Line Reference 3](https://www.learnenough.com/command-line-tutorial) ### 2. Buat akun GitHub - ▢ Tonton [How to Create a GitHub Account • A Quick Look](https://www.youtube.com/watch?v=ezxRcdJ8glM) - ▢ [Bergabung ke GitHub di sini](https://github.com/join) - ▢ Tentukan username kamu yang baik, jelas, mudah diingat dan dibaca; dengan huruf kecil (misalnya `andiruben` atau `andir` atau `aruben`). Kalau bisa, samakan dengan username di Slack. - ▢ Konfirmasi email akun GitHub di inbox kamu. - ▢ Kunjungi lalu lengkapi profil kamu. - ▢ "Update profile" kamu. Jika nanti kamu melihat `[USERNAME]`, artinya perlu diganti dengan username-kamu. Misalnya username kamu adalah `andiruben`, berarti `github.com/[USERNAME]` menjadi `github.com/andiruben`. ### 3. Pelajari manfaat Git dan GitHub Kamu bisa memilih manapun media dan sumber yang kamu mau. Yang penting adalah kamu paham mengapa menggunakan, bagaimana cara pakai, dan apa saja terkait VCS/SCM serta Git dan GitHub. Membaca beberapa resource berikut: - [Version Control, by Skillcrush](http://skillcrush.com/2013/02/11/version-control) - [Git, by Skillcrush](http://skillcrush.com/2013/02/18/git) - [Get started working with Git, by Skillcrush](http://skillcrush.com/2013/02/20/get-started-working-with-git) - [Git Beginner's Guide for Dummies, on Backlog](https://backlogtool.com/git-guide/en) - [git - the simple guide](http://rogerdudler.github.io/git-guide) - [GitHub For Beginners: Don’t Get Scared, Get Started - ReadWrite](http://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1) - [GitHub For Beginners: Commit, Push And Go - ReadWrite](http://readwrite.com/2013/10/02/github-for-beginners-part-2) - [Is Git the Same Thing as Github!?, by Andrew McWilliams](https://jahya.net/blog/git-vs-github) Menonton salah satu playlist video berikut: - [Playlist Git Basics, by GitHub](https://www.youtube.com/playlist?list=PLg7s6cbtAD165JTRsXh8ofwRw0PqUnkVH) - [Playlist GitHub & Git Foundations, by GitHub](https://www.youtube.com/playlist?list=PLg7s6cbtAD15G8lNyoaYDuKZSKyJrgwB-) - [Playlist Belajar Git Version Control System, oleh Sekolah Koding](https://www.youtube.com/playlist?list=PLCZlgfAG0GXATLIO3kp405u6TyFPQ9Kjy) - [Playlist Apa Itu GitHub, oleh Sekolah Koding](https://www.youtube.com/playlist?list=PLCZlgfAG0GXCtwnagWsUzZum1CFZYqrB5) Mengikuti tutorial interaktif berikut: - [Try Git: Git Tutorial, by GitHub](http://try.github.io) ### 4. Lakukan instalasi dan konfigurasi Git dan SSH di komputermu - ▢ [Ikuti petunjuk "Setting up Git"](https://help.github.com/articles/set-up-git/#setting-up-git). Bisa juga langsung [download Git di situs resminya](https://git-scm.com/downloads) - ▢ Buka terminal atau command prompt. Khusus di Windows, buka "Git Bash" - ▢ [Ikuti petunjuk "Generating a new SSH key"](https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/#generating-a-new-ssh-key) - SSH digunakan sebagai pengganti HTTPS saat clone repository. Benefit utamanya adalah lebih aman, serta kita tidak perlu entry username dan password berkali-kali saat push dan pull. - Mengapa SSH bukan HTTPS? [Which remote URL should I use?](https://help.github.com/articles/which-remote-url-should-i-use) - Kalau terlalu lama mencoba berkutik dengan SSH masih ada masalah, boleh saja pakai HTTPS. Setelah semua persiapan sudah selesai, kita akan bisa lanjut membuat website sederhana dan menaruhnya gratis dengan GitHub Pages! ## References **CLI** - [A Command Line Primer for Beginners, article on Lifehacker](http://lifehacker.com/5633909/who-needs-a-mouse-learn-to-use-the-command-line-for-almost-anything) - [Learn Enough Command Line to Be Dangerous, book by Michael Hartl](https://learnenough.com/command-line-tutorial) **Git and GitHub** - [Official website of Git SCM](https://git-scm.com) - [GitHub website](https://github.com) - [Let’s Git Started: A Beginner’s Guide to Version Control Software « Flatiron School](http://blog.flatironschool.com/lets-git-started-a-beginners-guide-to-version-control-software) - [How to Use Git and GitHub, interactive course on Udacity](https://www.udacity.com/course/how-to-use-git-and-github--ud775) - [Git Tutorials and Training, by Atlassian](https://www.atlassian.com/git/tutorials) - [A Beginner’s Git and GitHub Tutorial, on Udacity](http://blog.udacity.com/2015/06/a-beginners-git-github-tutorial.html) - [Git Tracks on Bento.io](https://bento.io/git) - [A Guide to Developer Collaboration with GitHub (Ebook)](https://smartbear.com/ppc/ebooks/guide-to-developer-collaboration-with-github) ================================================ FILE: modules/github-pages-rev.md ================================================ # WEEKLY PROJECT - Website yang dihosting dengan Github Pages ## Objectives Saatnya membuat website sederhana yang akan ditaruh/di-host secara gratis dengan GitHub Pages. Kamu akan bisa melakukan clone, add, commit, pull, dan push dari/ke GitHub. Website sederhana ini akan kita update secara berkala seiring waktu, yang juga menjadi pusat mengumpulkan berbagai kegiatan yang sudah kamu kerjakan. **Catatan:** Perlu diketahui dan diingat selalu bahwa website di GitHub Page ini akan kamu gunakan sebagai salah satu bentuk portofolio atau profil online kamu. Jadi, kamu bisa mulai bayangkan dan rancang sebagai website pribadi. ## Directions ### 1. Membuat repositori untuk website di GitHub - [Sign in ke GitHub](https://github.com/login). - Buat repositori publik baru dengan format nama `[USERNAME].github.io` dan deskripsi sesukamu. - Centang "Initialize this project with a README". - Pilih "Create repository" Seperti yang telah kamu pelajari, repositori bersifat distributif, yang berarti bisa ada di berbagai komputer sekaligus. Sekarang repositori tersebut hanya ada di GitHub. Untuk menambahkan dan mengedit file/folder, kamu perlu menduplikasikannya ke komputermu. Hal ini disebut cloning repositori ke local. Repositori local adalah copy yang ada di komputer pribadi, sedangkan repositori remote ada di sebuah komputer lain atau server (misalnya GitHub). ### 2. Clone repositori dari GitHub ke local dengan command line - Di komputermu, bukalah terminal atau command prompt. - Pindah ke direktori di mana kamu akan menaruh semua repositori. (contoh: `cd Documents/hacktiv8/phase-0/week-1`) - Copy `GIT HTTPS URL` dari halaman depan repositori. (`https://github.com/[USERNAME]/[USERNAME].github.io`) - Lakukan `git clone [GIT SSH URL]`. (`git clone https://github.com/[USERNAME]/[USERNAME].github.io.git`) - Pindah ke direktori hasil clone tersebut. (`cd [USERNAME].github.io`) ### 3. Membuat halaman website sederhana Oke saatnya beraksi secara lebih nyata! - Buatlah sebuah project website pribadi kamu dan buatlah ke dalam folder `[USERNAME].github.io`. **Sekarang saatnya kamu mengubah web dan desainnya sesukamu** karena ini akan ditampilkan di web, dan tentunya semakin bagus akan semakin menarik! - Add file-file tersebut ke Git dengan `git add .` atau `git add -A` (add semua file). - Commit dengan `git commit -m "Menambah file index.html"`. - Jika perlu, [ulas lagi alur merekam perubahan ke repositori ](https://git-scm.com/book/en/v2/Git-Basics-Recording-Changes-to-the-Repository). - Kirim atau push commit pertama kalinya ke GitHub dengan `git push -u origin master`. Perintah push berikutnya bisa cukup dengan `git push` saja. - Bukalah `[USERNAME].github.io`, lalu saksikanlah halaman website kamu! Selamat! :tada: Cek kembali `https://github.com/[USERNAME]/[USERNAME].github.io`, kamu dapat melihat file `index.html` yang juga sudah muncul di situ. ### 4. Beritahu website kamu - Share hasilnya di grup Slack yang memberi tahu kamu sudah punya website dengan URL `http://[USERNAME].github.io` ### 5. Submit di FoxHub - Submit tugas di platform FoxHub dalam bentuk link menuju github repositori. Contoh: `https://github.com/adhywiranata/adhywiranata.github.io`. ## References - [GitHub Pages](https://pages.github.com) - [Build a Web Portfolio from Scratch with GitHub Pages](https://dannguyen.github.io/github-for-portfolios) **Additional** - [Publishing your website, BY Mozilla Developer Network](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website) ================================================ FILE: modules/github-pages.md ================================================ # Create Free Website with GitHub Pages ## Objectives Saatnya membuat website sederhana yang akan ditaruh/di-host secara gratis dengan GitHub Pages. Kamu akan bisa melakukan clone, add, commit, pull, dan push dari/ke GitHub. Website sederhana ini akan kita update secara berkala seiring waktu, yang juga menjadi pusat mengumpulkan berbagai kegiatan yang sudah kamu kerjakan. **Catatan:** Perlu diketahui dan diingat selalu bahwa website di GitHub Page ini akan kamu gunakan sebagai salah satu bentuk portofolio atau profil online kamu. Jadi, kamu bisa mulai bayangkan dan rancang sebagai website pribadi. ## Directions ### 1. Membuat repositori untuk website di GitHub - ▢ [Sign in ke GitHub](https://github.com/login). - ▢ Buat repositori publik baru dengan format nama `[USERNAME].github.io` dan deskripsi sesukamu. - ▢ Centang "Initialize this project with a README". - ▢ Pilih "Create repository" Seperti yang telah kamu pelajari, repositori bersifat distributif, yang berarti bisa ada di berbagai komputer sekaligus. Sekarang repositori tersebut hanya ada di GitHub. Untuk menambahkan dan mengedit file/folder, kamu perlu menduplikasikannya ke komputermu. Hal ini disebut cloning repositori ke local. Repositori local adalah copy yang ada di komputer pribadi, sedangkan repositori remote ada di sebuah komputer lain atau server (misalnya GitHub). ### 2. Clone repositori dari GitHub ke local dengan command line - ▢ Di komputermu, bukalah terminal atau command prompt. - ▢ Pindah ke direktori di mana kamu akan menaruh semua repositori. (`cd Documents/hacktiv8/phase-0/week-1`) - ▢ Copy `GIT SSH URL` dari halaman depan repositori. (`https://github.com/[USERNAME]/[USERNAME].github.io`) - ▢ Lakukan `git clone [GIT SSH URL]`. (`git clone git@github.com:[USERNAME]/[USERNAME].github.io.git`) - ▢ Pindah ke direktori hasil clone tersebut. (`cd [USERNAME].github.io`) Mulai sekarang hingga seterusnya, kami menyarankan untuk kamu mengorganisir folder berdasarkan nomor phase dan pekan. ### 3. Membuat halaman website sederhana Oke saatnya beraksi secara lebih nyata! - ▢ Dalam code editormu, buatlah file `index.html` dalam folder `[USERNAME].github.io`. - ▢ Isilah file HTML tersebut sesukamu kemudian simpan. Bahkan isinya bisa seminimal `Hello World!`. - ▢ Add file tersebut ke Git dengan `git add index.html` atau `git add -A` (add semua file). - ▢ Commit dengan `git commit -m "Menambah file index.html"`. - ▢ Jika perlu, [ulas lagi alur merekam perubahan ke repositori ](https://git-scm.com/book/en/v2/Git-Basics-Recording-Changes-to-the-Repository). - ▢ Kirim atau push commit pertama kalinya ke GitHub dengan `git push -u origin master`. Perintah push berikutnya bisa cukup dengan `git push` saja. - ▢ Bukalah `[USERNAME].github.io`, lalu saksikanlah halaman website kamu! Selamat! :tada: Cek kembali `https://github.com/[USERNAME]/[USERNAME].github.io`, kamu dapat melihat file `index.html` yang juga sudah muncul di situ. ### 4. Beritahu website kamu - ▢ Share hasilnya di grup Slack yang memberi tahu kamu sudah punya website dengan URL `http://[USERNAME].github.io` ### 5. (Opsional) Generator Kamu bisa saja men-generate halaman website pada repositori dengan "Automatic Page Generator" yang terdapat di settings-nya. ( `https://github.com/[USERNAME]/[USERNAME].github.io/settings`). Di situ kamu bisa mengubah konten, memilih tema, kemudian mempublikasikannya ## References - [Naming files and folders, short guide by University of Leicester](http://www2.le.ac.uk/services/research-data/organise-data/naming-files) - [Naming Conventions, PDF guide from Harvard](http://library.harvard.edu/sites/default/files/NamingConventions.pdf) - [GitHub Pages](https://pages.github.com) - [Build a Web Portfolio from Scratch with GitHub Pages](https://dannguyen.github.io/github-for-portfolios) **Additional** - [Publishing your website, BY Mozilla Developer Network](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website) - [Build A Blog With Jekyll And GitHub Pages, by Barry Clark on Smashing Magazine](https://www.smashingmagazine.com/2014/08/build-blog-jekyll-github-pages) ================================================ FILE: modules/h8-challenge-checker.md ================================================ # Hacktiv8 Challenge Checker Hacktiv8 Challenge Checker adalah tools yang digunakan di Phase 0 untuk melakukan pengecekan tugas secara otomatis. Perlu diperhatikan bahwa pemahaman `function` sangatlah penting disini. ## Getting Started [Link Hacktiv8 Phase 0 Challenge Checker](http://bit.ly/hacktiv8-phase-0-challenges) Cara Penggunaan: 1. Kerjakan soal tantangan di text editor masing-masing dan pastikan test cases, atau beberapa test kemungkinan output yang diharapkan telah sesuai. **Pastikan kamu menyimpan salinan kode di komputer kamu!** 2. Dilarang mengubah template kode yang diberikan di setiap tantangan. 3. Pastikan mengisi informasi terlebih dahulu yaitu nama student dan nama challenge. 4. Paste kode solusi tantangan yang telah kamu selesaikan ke dalam textbox. Jangan mengubah kode di textbox setelah di paste. 5. Klik Submit Code untuk memulai proses pengecekan jawaban otomatis. 6. Kamu akan mendapatkan langsung jawaban dan score dari solusi kode. 7. Klik Save untuk mengirim nilai kamu. Kamu bisa clear code untuk memperbaiki jawaban apabila belum mencapai 100. **Berikut adalah demo proses penggunaan tool:** ![Demo](/assets/h8-challenge-checker-demo.gif) ## Pengecekan Histori Nilai Untuk mengecek apakah nilai sudah aman serta melihat histori nilai, kamu dapat membuka link berikut: [HACKTIV8 Score Dashboard](https://teaching-data.firebaseapp.com/dashboard.html) ## Kesulitan dan Isu Lainnya Apabila ada masalah dalam penggunakan Hacktiv8 Challenge Checker, segera hubungi instruktur phase 0. ================================================ FILE: modules/hinting-linting.md ================================================ # ## Objectives TODO ## Directions - ▢ - ▢ - ▢ ## References - ================================================ FILE: modules/html-css-code-style.md ================================================ # Learn Coding Style Guide ## Objectives Dalam menulis code yang profesional, diperlukan berbagai aturan atau standar yang sangat dianjurkan untuk diikuti. Selain code kita bisa lebih rapi, mudah dibaca, dan komprehensif; tentunya kita juga akan lebih produktif. ## Directions ### 1. Memahami cara penulisan HTML dan CSS yang baik - ▢ Pahami berbagai aturan penulisan HTML dan CSS di ini: [Writing Your Best Code](http://learn.shayhowe.com/html-css/writing-your-best-code) - ▢ Cek berbagai pedoman penulisan code berikut: - [Code Guide by @mdo](http://codeguide.co) - [CSS Style Guides, on CSS Tricks](https://css-tricks.com/css-style-guides) - [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.xml) ### 2. Memperhatikan meta data lebih lanjut Memberi data dan informasi yang berguna bagi browser bahkan juga pengguna adalah kegunaan meta data. Meta data dapat berupa judul website, deskripsi tentang website, kata kunci terkait, serta gambar icon. Modern ini terdapat meta data yang sangat bermanfaat bagi kita dan pengguna agar lebih memuat informasi yang jelas bagi platform media sosial serta search engine, seperti alamat, nomor telepon, foto-foto, dan lainnya. Untuk itu perlu disertakan tag meta data Facebook OpenGraph, Twitter Card, dan Google JSON-LD; namun akan kita bahas lain waktu saja. Contoh umum menggunakan meta data `title`, `description`, `author`, `icon`. ```html Hacktiv8 - Menjadi Full Stack Web Developer ``` ### 3. Merapikan penulisan code HTML dan CSS sebelumnya Update berbagai file HTML dan CSS yang sudah ada: - ▢ Struktur dokumen HTML harus lengkap. - ▢ Penulisan sintaks diorganisir dengan rapi. - Perhatikan indentasi ataupun spacing. - Sebaiknya quote yang digunakan semuanya adalah double quote. - Gunakan lowercase untuk penamaan element, attributes, dan values. - ▢ Update penamaan `id` dan `class` yang belum rapi. `id` tidak boleh ada yang redundant. - ▢ Pindahkan attribute `style` dari tag HTML, jadikan semua styling lewat `id` atau `class`. - ▢ Gunakan element secara semantic, tidak menyalahi aturan. - ▢ Gunakan attribute `alt` pada gambar. - ▢ Berilah komentar pada berbagai segmen element HTML dan rule CSS. - ▢ Aturan CSS ditulis secara multiline. Harap menyadari cara dan hasil penulisan code kamu. Pada berbagai kegiatan berikutnya, dianjurkan untuk udah bisa mengimplementasikannya secara alami. ### 4. Kirim berbagai perubahan yang ada ke website kamu - ▢ Add, commit, dan push perubahan ke GitHub. - `git add -A` - `git commit -m "Tidy up my code"` - `git push` - ▢ Cek halaman dan source code kamu yang sudah lebih rapi. - ▢ Share hasil kamu di Slack. ## References - [The Essential Meta Tags for Social Media, on CSS Tricks](https://css-tricks.com/essential-meta-tags-social-media) ================================================ FILE: modules/html5-basics.md ================================================ # Learn the Basics of HyperText Markup Language (HTML) ## Objectives - ▢ Mengulas dasar-dasar HTML. ## Learnings HTML adalah satu dari banyak bahasa markup yang menjadi bagian pembangun dasar sebuah halaman web (webpage). Saat ini versi terbarunya adalah versi 5.1, secara resmi disebut HTML5. Digunakan untuk membuat dan merepresentasikan secara visual sebuah webpage. HTML menentukan konten dari sebuah webpage, namun bukan fungsionalitasnya. Untuk mengetahui hubungan antara HTML, CSS, dan JavaScript dalam pembuatan website: - HTML adalah struktur penglihatan (view structure): header, paragraf, tombol, dll (heading, paragraph, button, etc) - CSS adalah gaya presentasi (presentational style): warna, ukuan, posisi, dll (color, size, position, etc) - JavaScript adalah sifat fungsionalnya (functional behavior): klik, masukan, perhitungan, dll (click, input, calculation, etc) Perlu diingat bahwa hanya mengetahui HTML dan CSS belum menjadikan kita sebagai programmer --karena HTML dan CSS bukan bahasa pemrograman-- melainkan hanya seorang coder atau developer yang dapat membuat dan mendesain website. Kita perlu bahasa pemrograman seperti JavaScript untuk menjadi programmer, dan ketiga-tiganya untuk menjadi web developer. _HyperText_ itu sendiri maksudnya adalah link (dalam hyperlink) yang menghubungkan berbagai halaman web satu sama lain, yang menjadikan World Wide Web (WWW) itu ada. Saat kita membuat dokumen HTML, sama saja membuat halaman web. Halaman web dapat diunggah (uploaded), dikirim (pushed), atau di-deploy ke server ataupun Internet. HTML mudah dipelajari karena hanya sebuah markup, memungkinkan kita untuk membuat website statis maupun dinamis. Dengan sintaks HTML juga, kita bisa mendeskripsikan apa-apa saja yang ada dalam sebuah website secara semantik (atau memiliki arti), dari konten yang ada di website tersebut. Kita sepertinya juga sudah tau bahwa apapun yang terlihat di browser ditentukan menggunakan HTML. Sintaks atau cara penulisan HTML biasanya terlihat seperti ini: ```html Website Saya

Halo, Heading!

Sebuah paragraf.

``` yang akan menghasilkan halaman web seperti ini jika di JSBin: ![Contoh HTML di JSBin](assets/html-jsbin.png) atau seperti ini jika di CodePen: ![Contoh HTML di Codepen](assets/html-codepen.png) Cobalah untuk mengetikkan contoh kode tersebut di dalam JSBin atau CodePen. Lihatlah secara langsung hasilnya di situ. Berikutnya kami akan menunjukkan hasilnya yang dihasilkan di JSBin saja. Sebagai pengetahuan umum, istilah sintaks merupakan kosa kata (vocabulary) dan tata bahasa (grammar) dari sebuah bahasa komputer, markup, dan pemrograman. Sama saja dengan kata-kata dan perintah-perintah ataupun instruksi untuk disusun sebagai sebuah hasil tertentu yang biasanya merupakan program aplikasi. Kita menggunakan sintaks tertentu untuk membuat pernyataan (statement) program, instruksi untuk bisa dieksekusi oleh browser, compiler, atau interpreter. Kembali ke HTML, biasanya setiap dokumen HTML yang bagus dan valid memiliki dua bagian utama berikut: - Head dan Meta Data (bagian kepala HTML dan meta data) - Body Sections (bagian-bagian badan HTML) ### Elemen Dasar dengan Tag dan Atribut (Tags dan Attributes) Dokumen atau konten HTML dalam sebuah halaman web dideskripsikan dengan elemen HTML atau tag seperti `head`, `title`, `body`, `article`, `section`, `p`, `div`, `span`, `img`, `picture`, dan banyak lainnya. Elemen-elemen ini membentuk bagian pembangun (building blocks) sebuah website. Website dapat memiliki sedikit atau banyak dari elemen-elemen tersebut. Tag HTML merupakan kata kunci (keywords) atau nama-nama tag (tag names), yang biasanya dikurung dengan tanda kurung siku (angle brackets) seperti `sebuah isi atau teks`. Kebanyakan tag HTML biasanya berpasangan seperti `
` dan `
`, tapi beberapa tidak seperti `
`. Tag pertama biasanya disebut tag awal atau pembuka, lalu tag kedua disebut tag akhir atau penutup. Tag penutup ditulis seperti tag pembuka, tapi disertakan tanda garis miring depan (forward slash) sebelum nama tag-nya. Dari contoh sebelumnya, beberapa teks terdapat di antara tag pembuka dan penutup: - `` menentukan tipe file/dokumen menjadi HTML - `` dan `` menyatakan dokumen HTML, yang berisi: - `` dan `` memuat meta data/information, yang berisi: - `` dan ``, judul dokumen - ``, data dan informasi tentang halaman ini - `` dan `` akan menunjukkan konten halaman, yang berisi: - `
` dan `
` adalah pembagi (divider) atau wadah (container), yang berisi: - `

` dan `

`, heading atau judul artikel misalnya - `

` dan `

`, paragraf teks Inilah ilustrasi atau visualisasi yang HTML strukturkan: ![HTML Visualization](assets/html-visual.png) Kita bisa menggabungkan atau mengumpulkan berbagai tag HTML yang berbeda di dalam satu sama lain. Dalam HTML, penyusunan tag sangat fleksibel. ```html

Hello! Welcome to this website.

``` Hati-hati untuk selalu menutup tag jika dibutuhkan, jangan sampai tumpang tindih satu sama lain. Berikut adalah contoh yang salah atau invalid. ```html

Bold Heading

Bold Heading

``` Beberapa tag HTML dapat memiliki atribut, seperti `href`, `src`, `alt`, dll: ```html Google Homepage Sample Caption ``` Ada cara lain untuk melihat berbagai contoh yang ada di berbagai website. Kita dapat melihat sumber halaman (page source) dari sebuah website (coba kunjungi http://hacktiv8.com misalnya), lalu klik kanan halaman tersebut, biasanya bekerja baik di area yang kosong (white space) atau bukan sebuah elemen HTML, lalu pilih "View page source"; atau bisa juga menggunakan shortcut `Ctrl+U`. Cara lain yang lebih lanjut juga dapat menggunakan "Inspect Element" (`Ctrl+Shift+I`) pada elemen apapun di layar. ![Chrome Dev Tools](assets/chrome-devtools.png) Untuk melatih kemampuan menulis HTML, cobalah gunakan JSBin atau CodePen sambil mendaftar sebuah akun, agar progress dapat disimpan secara online, bahkan juga dapat dibagikan ke siapapun. Dikarenakan juga bahasan HTML sangat banyak sekali, di sini kita hanya membahas sepintas hal-hal yang penting. Sehingga tujuannya mengenalkan seperlunya agar kamu dapat familiar. Silakan lihat [berbagai referensi di bawah](#references) untuk belajar lebih lanjut. ### Deklarasi Tipe Dokumen (Document Type declaration) Deklarasi `!DOCTYPE` di awal membantu browser untuk menampilkan halaman web secara benar. Secara formal, setiap dokumen HTML yang valid harus menyertakan ini (satu kali saja di atas) setiap dokumen. Ini juga termasuk mengatur tipe dokumen (yang mana adalah HTML) dan versinya sekaligus. Untuk sekarang kita hanya perlu HTML versi 5, atau disebut juga "HTML5". Deklarasinya tidak case sensitive, jadi kita bisa gunakan bentuk huruf apapun: ```html ``` ### Komentar (Comment) Kadang kala kita butuh menjelaskan apa yang terjadi atau menaruh penjelasan di beberapa tempat. Kita dapat gunakan komentar yang disertakan di baris sendiri atau di tempat yang tepat. Kita bisa juga gunakan ini sebagai teks sementara (placeholder). ```html

My cool story.

``` ### Meta Data/Information Meta data/information adalah sebuah cara untuk menyertakan hal penting tentang sebuah dokumen yang akan dibaca oleh komputer/browser, walau tidak terlalu diperhatikan pengunjung website pada umumnya, walaupun developer biasanya membacanya. Ada beberapa tag meta data umum yang digunakan seperti `head`, `meta`, `link`, `style`, dan `script`. Biasanya mereka ada di bagian `head`. ```html My Simple Website Title ``` Untuk sementara kita bisa mengabaikan tag `style` dan `script`. Karena kita hanya perlu memahami pengetahuan HTML untuk pertama kalli. Tapi di sini kita bisa lihat ada berbagai pilihan meta data yang tersedia. Setelah bagian head dan meta data, barulah kita lanjut ke berbagai elemen yang ada di `body`. ### Header dan Footer Untuk sebagian besar bagian teks, kita biasanya memerlukan header yang dapat berisi headings dan subheadings. Lalu di akhir halaman, bisa juga kita memerlukan footer. Ada enam varian heading, diurutkan (ranked) tergantung dari pentingnya dan ukurannya, menggunakan angka seperti `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, sementara footer tidak ada urutannya. Heading dapat disertakan dalam elemen `header` jika dibutuhkan. ```html

Heading One

Heading Two

Heading Two

Created by Me
``` ### Paragraf dan Varian/Format Teks Kamu sudah melihat paragraf, teks panjang yang berisi sebuah penjelasan atau cerita (apapun!), yang juga dapat terbagi ke beberapa bagian (section). Kita bisa gunakan paragraf untuk menyajikan teks polos apapun. ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` "Lorem ipsum bla bla bla" adalah teks bohongan atau sementara yang digunakan oleh berbagai developer dan desainer jika belum tahu apa yang harus disertakan ke dalam bagian tertentu. Kita hanya menunjukkan ini agar kita tahu saja. Namun diharapkan untuk proyek sungguhan, hindari pemakaian lorem ipsum karena seringkali tidak jelas maksudnya apa. Gunakanlah teks yang lebih jelas atau deskriptif seperti di bawah. ```html

Today I learn about HTML. It's a basic markup that structure a website. I also learn about "Lorem ipsum".

``` Ada beberapa elemen lain yang bisa kita cari tahu sendiri dalam membuat paragraf seperti `small`, `abbr`, `sub`, `sup`, dan lainnya. ### Penggayaan (Styling) Dalam paragraf atau heading, kita bisa gunakan strong (`strong`) untuk hal penting yang kuat dan emphasis (`em`) untuk penekanan. Ada juga styling umum lain seperti bold (`b`), italic (`i`), underline (`u`), dan strike-through (`s`). ```html

He is the strongest hero in Universe 7. "But I also need to compare with heroes in other universes, right?", said them him.

``` ### Kutipan Blok (Block Quote) Kutipan dari sumber lain, atau membuat teks kita terlihat keren seperti sebuah kutipan/quote. ```html
"There are only 10 types of people in this world—or universe—: those who understand binary, dan those who don't." — cliché computer joke
``` ### Jangkar (Anchor) untuk Tautan (Link) Jika kita butuh menautkan halaman ke halaman lain, gunakan _anchor_ dengan URL. Anchor ini juga disebut hyperlink (hypertext anchor). ```html Clickable but unknown link Go to Google ``` Beberapa atributnya yang bisa digunakan antara lain adalah `target`, `rel`, `media`, `hreflang`, dan `type`; juga mereka memerlukan atribut `href` agar bisa bekerja. ### Tombol (Button) Orang-orang biasanya suka mengklik sebuah tombol yang dapat melakukan sesuatu. Gunakan tombol untuk membuat masukan sekali (one-time input) atau bahkan saklar (switch) saat diklik. Tombol dapat diaktifkan atau dinon-aktifkan tergantung dari keinginan kita. ```html ``` ### Daftar (List) Ada dua jenis daftar, tidak berurutan (`ul`) dan berutuan (`ol`). Setiap butir daftar dideklarasikan dengan tag `li`. ```html
  • Alpha
  • Beta
    1. One
    2. Two
``` ### Figure dengan Gambar (Image), Video, atau Audio Sebuah gambar bermakna ribuan kata. Namun bukan hanya untuk gambar, figur dapat juga sebuah foto, ilustrasi, diagram, listing kode (code listings), video, lagu audio, dan lain-lain. Dalam HTML5, direkomendasikan untuk menggunakan `figure` yang dapat berisi berbagai informasi yang juga sejalan dengan sebuah judul/caption (`figcaption`) seperti gambar/image (`img`), video (`video`), dan audio (`audio`). ```html
My Photo
My latest photo.
``` Menggunakan video: ```html
``` Menggunakan audio: ```html
``` Tidak apa-apa menggunakan elemen-elemen tersebut tanpa `figure` jika tidak terlalu dibutuhkan. ```html