` dengan `id="quote"` | | Area Pesan | Menampilkan status dan pesan keberhasilan | `

` dengan `id="message"` | | Input Teks | Tempat pemain mengetik kutipan | `` dengan `id="typed-value"` | | Tombol Mulai | Memulai game | `` dengan `id="start"` | **Memahami struktur UI:** - **Mengorganisasi** konten secara logis dari atas ke bawah - **Menetapkan** ID unik untuk elemen agar dapat ditargetkan oleh JavaScript - **Memberikan** hierarki visual yang jelas untuk pengalaman pengguna yang lebih baik - **Menyertakan** elemen HTML semantik untuk aksesibilitas Setiap elemen tersebut membutuhkan ID agar kita dapat bekerja dengannya di JavaScript kita. Kita juga akan menambahkan referensi ke file CSS dan JavaScript yang akan kita buat. Buat file baru bernama `index.html`. Tambahkan HTML berikut: ```html

Typing game!

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

Start ``` **Penjelasan tentang apa yang dicapai oleh struktur HTML ini:** - **Menautkan** stylesheet CSS di `` untuk styling - **Membuat** heading yang jelas dan instruksi untuk pengguna - **Membuat** paragraf placeholder dengan ID spesifik untuk konten dinamis - **Menyertakan** bidang input dengan atribut aksesibilitas - **Menyediakan** tombol mulai untuk memulai game - **Memuat** file JavaScript di akhir untuk kinerja optimal ### Meluncurkan aplikasi Menguji aplikasi Anda secara berkala selama pengembangan membantu Anda menemukan masalah lebih awal dan melihat kemajuan Anda secara real-time. Live Server adalah alat yang sangat berharga yang secara otomatis menyegarkan browser Anda setiap kali Anda menyimpan perubahan, membuat pengembangan jauh lebih efisien. Selalu lebih baik untuk mengembangkan secara bertahap untuk melihat bagaimana semuanya terlihat. Mari kita luncurkan aplikasi kita. Ada ekstensi yang luar biasa untuk Visual Studio Code yang disebut [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) yang akan meng-host aplikasi Anda secara lokal dan menyegarkan browser setiap kali Anda menyimpan. **Instal [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) dengan mengikuti tautan dan klik Install:** **Begini yang terjadi selama instalasi:** - **Meminta** browser Anda untuk membuka Visual Studio Code - **Membimbing** Anda melalui proses instalasi ekstensi - **Mungkin memerlukan** restart Visual Studio Code untuk menyelesaikan pengaturan **Setelah terinstal, di Visual Studio Code, klik Ctrl-Shift-P (atau Cmd-Shift-P) untuk membuka command palette:** **Memahami command palette:** - **Memberikan** akses cepat ke semua perintah VS Code - **Mencari** perintah saat Anda mengetik - **Menawarkan** pintasan keyboard untuk pengembangan lebih cepat **Ketik "Live Server: Open with Live Server":** **Apa yang dilakukan Live Server:** - **Memulai** server pengembangan lokal untuk proyek Anda - **Secara otomatis** menyegarkan browser saat Anda menyimpan file - **Melayani** file Anda dari URL lokal (biasanya `localhost:5500`) **Buka browser dan navigasikan ke `https://localhost:5500`:** Sekarang Anda seharusnya melihat halaman yang Anda buat! Mari tambahkan beberapa fungsionalitas. ## Tambahkan CSS Sekarang mari kita buat tampilannya menarik! Umpan balik visual sangat penting untuk antarmuka pengguna sejak awal era komputasi. Pada tahun 1980-an, para peneliti menemukan bahwa umpan balik visual langsung secara dramatis meningkatkan kinerja pengguna dan mengurangi kesalahan. Itulah yang akan kita buat. Game kita perlu sangat jelas tentang apa yang sedang terjadi. Pemain harus segera tahu kata mana yang harus mereka ketik, dan jika mereka membuat kesalahan, mereka harus melihatnya langsung. Mari kita buat beberapa gaya yang sederhana namun efektif: Buat file baru bernama `style.css` dan tambahkan sintaks berikut. ```css /* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; } ``` **Memahami kelas CSS ini:** - **Menyoroti** kata saat ini dengan latar belakang kuning untuk panduan visual yang jelas - **Menandai** kesalahan mengetik dengan warna latar belakang coral muda - **Memberikan** umpan balik langsung tanpa mengganggu alur mengetik pengguna - **Menggunakan** warna kontras untuk aksesibilitas dan komunikasi visual yang jelas ✅ Untuk CSS, Anda dapat mengatur tata letak halaman sesuai keinginan Anda. Luangkan sedikit waktu dan buat halaman terlihat lebih menarik: - Pilih font yang berbeda - Warnai header - Ubah ukuran elemen ## JavaScript Di sinilah semuanya menjadi menarik! 🎉 Kita sudah memiliki struktur HTML dan gaya CSS, tetapi saat ini game kita seperti mobil cantik tanpa mesin. JavaScript akan menjadi mesin itu - inilah yang membuat semuanya benar-benar bekerja dan merespons apa yang dilakukan pemain. Di sini Anda akan melihat kreasi Anda menjadi hidup. Kita akan mengatasi langkah ini satu per satu agar tidak terasa terlalu membingungkan: | Langkah | Tujuan | Apa yang Akan Anda Pelajari | |---------|--------|-----------------------------| | [Buat konstanta](../../../../4-typing-game/typing-game) | Menyiapkan kutipan dan referensi DOM | Manajemen variabel dan seleksi DOM | | [Event listener untuk memulai game](../../../../4-typing-game/typing-game) | Menangani inisialisasi game | Penanganan event dan pembaruan UI | | [Event listener untuk mengetik](../../../../4-typing-game/typing-game) | Memproses input pengguna secara real-time | Validasi input dan umpan balik dinamis | **Pendekatan terstruktur ini membantu Anda:** - **Mengorganisasi** kode Anda ke dalam bagian yang logis dan mudah dikelola - **Membangun** fungsionalitas secara bertahap untuk debugging yang lebih mudah - **Memahami** bagaimana bagian-bagian berbeda dari aplikasi Anda bekerja bersama - **Membuat** pola yang dapat digunakan kembali untuk proyek di masa depan Namun pertama-tama, buat file baru bernama `script.js`. ### Tambahkan konstanta Sebelum kita masuk ke aksi, mari kita kumpulkan semua sumber daya kita! Seperti bagaimana pusat kendali NASA menyiapkan semua sistem pemantauan mereka sebelum peluncuran, jauh lebih mudah saat Anda memiliki semuanya siap dan tersedia. Ini menghemat waktu dari mencari-cari sesuatu nanti dan membantu mencegah kesalahan ketik. Berikut yang perlu kita siapkan terlebih dahulu: | Jenis Data | Tujuan | Contoh | |------------|--------|--------| | Array of quotes | Simpan semua kutipan yang mungkin untuk permainan | `['Quote 1', 'Quote 2', ...]` | | Word array | Pecah kutipan saat ini menjadi kata-kata individu | `['When', 'you', 'have', ...]` | | Word index | Lacak kata mana yang sedang diketik oleh pemain | `0, 1, 2, 3...` | | Start time | Hitung waktu yang berlalu untuk penilaian | `Date.now()` | **Kita juga membutuhkan referensi ke elemen UI kita:** | Elemen | ID | Tujuan | |--------|----|--------| | Input teks | `typed-value` | Tempat pemain mengetik | | Tampilan kutipan | `quote` | Menampilkan kutipan untuk diketik | | Area pesan | `message` | Menampilkan pembaruan status | ```javascript // inside script.js // all of our quotes const quotes = [ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', 'There is nothing more deceptive than an obvious fact.', 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', 'I never make exceptions. An exception disproves the rule.', 'What one man can invent another can discover.', 'Nothing clears up a case so much as stating it to another person.', 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', ]; // store the list of words and the index of the word the player is currently typing let words = []; let wordIndex = 0; // the starting time let startTime = Date.now(); // page elements const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message'); const typedValueElement = document.getElementById('typed-value'); ``` **Memecah apa yang dilakukan oleh kode pengaturan ini:** - **Menyimpan** array kutipan Sherlock Holmes menggunakan `const` karena kutipan tidak akan berubah - **Menginisialisasi** variabel pelacakan dengan `let` karena nilai-nilai ini akan diperbarui selama permainan - **Menangkap** referensi ke elemen DOM menggunakan `document.getElementById()` untuk akses yang efisien - **Menyiapkan** dasar untuk semua fungsi permainan dengan nama variabel yang jelas dan deskriptif - **Mengorganisasi** data dan elemen terkait secara logis untuk mempermudah pemeliharaan kode ✅ Silakan tambahkan lebih banyak kutipan ke permainan Anda > 💡 **Tips Pro**: Kita dapat mengambil elemen kapan saja dalam kode dengan menggunakan `document.getElementById()`. Karena kita akan sering merujuk elemen-elemen ini, kita dapat menghindari kesalahan ketik dengan literal string menggunakan konstanta. Framework seperti [Vue.js](https://vuejs.org/) atau [React](https://reactjs.org/) dapat membantu Anda mengelola sentralisasi kode dengan lebih baik. > **Mengapa pendekatan ini sangat efektif:** - **Mencegah** kesalahan ejaan saat merujuk elemen berkali-kali - **Meningkatkan** keterbacaan kode dengan nama konstanta yang deskriptif - **Memungkinkan** dukungan IDE yang lebih baik dengan autocomplete dan pemeriksaan kesalahan - **Mempermudah** refactoring jika ID elemen berubah di kemudian hari Luangkan waktu untuk menonton video tentang penggunaan `const`, `let`, dan `var` [](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis variabel") > 🎥 Klik gambar di atas untuk video tentang variabel. ### Tambahkan logika mulai Di sinilah semuanya mulai berjalan! 🚀 Anda akan menulis pendengar acara pertama Anda, dan ada sesuatu yang sangat memuaskan tentang melihat kode Anda merespons klik tombol. Pikirkan ini: di suatu tempat di luar sana, seorang pemain akan mengklik tombol "Start", dan kode Anda harus siap untuk mereka. Kita tidak tahu kapan mereka akan mengkliknya - bisa langsung, bisa setelah mereka mengambil kopi - tetapi ketika mereka melakukannya, permainan Anda akan hidup. Ketika pengguna mengklik `start`, kita perlu memilih kutipan, mengatur antarmuka pengguna, dan mengatur pelacakan untuk kata saat ini dan waktu. Di bawah ini adalah JavaScript yang perlu Anda tambahkan; kita akan membahasnya setelah blok skrip. ```javascript // at the end of script.js document.getElementById('start').addEventListener('click', () => { // get a quote const quoteIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[quoteIndex]; // Put the quote into an array of words words = quote.split(' '); // reset the word index for tracking wordIndex = 0; // UI updates // Create an array of span elements so we can set a class const spanWords = words.map(function(word) { return `${word} `}); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML = spanWords.join(''); // Highlight the first word quoteElement.childNodes[0].className = 'highlight'; // Clear any prior messages messageElement.innerText = ''; // Setup the textbox // Clear the textbox typedValueElement.value = ''; // set focus typedValueElement.focus(); // set the event handler // Start the timer startTime = new Date().getTime(); }); ``` **Mari kita pecah kode menjadi bagian logis:** **📊 Pengaturan Pelacakan Kata:** - **Memilih** kutipan acak menggunakan `Math.floor()` dan `Math.random()` untuk variasi - **Mengonversi** kutipan menjadi array kata-kata individu menggunakan `split(' ')` - **Mengatur ulang** `wordIndex` ke 0 karena pemain mulai dengan kata pertama - **Mempersiapkan** status permainan untuk putaran baru **🎨 Pengaturan dan Tampilan UI:** - **Membuat** array elemen ``, membungkus setiap kata untuk penataan individu - **Menggabungkan** elemen span menjadi satu string untuk pembaruan DOM yang efisien - **Menyoroti** kata pertama dengan menambahkan kelas CSS `highlight` - **Menghapus** pesan permainan sebelumnya untuk memberikan awal yang bersih **⌨️ Persiapan Kotak Teks:** - **Menghapus** teks yang ada di bidang input - **Mengatur fokus** ke kotak teks sehingga pemain dapat mulai mengetik segera - **Mempersiapkan** area input untuk sesi permainan baru **⏱️ Inisialisasi Timer:** - **Menangkap** cap waktu saat ini menggunakan `new Date().getTime()` - **Memungkinkan** perhitungan kecepatan mengetik dan waktu penyelesaian yang akurat - **Memulai** pelacakan kinerja untuk sesi permainan ### Tambahkan logika mengetik Di sinilah kita menangani inti dari permainan kita! Jangan khawatir jika ini terlihat banyak pada awalnya - kita akan membahas setiap bagian, dan pada akhirnya, Anda akan melihat betapa logisnya semuanya. Apa yang kita bangun di sini cukup canggih: setiap kali seseorang mengetikkan huruf, kode kita akan memeriksa apa yang mereka ketik, memberikan umpan balik, dan memutuskan apa yang harus dilakukan selanjutnya. Ini mirip dengan bagaimana pengolah kata awal seperti WordStar di tahun 1970-an memberikan umpan balik waktu nyata kepada pengetik. ```javascript // at the end of script.js typedValueElement.addEventListener('input', () => { // Get the current word const currentWord = words[wordIndex]; // get the current value const typedValue = typedValueElement.value; if (typedValue === currentWord && wordIndex === words.length - 1) { // end of sentence // Display success const elapsedTime = new Date().getTime() - startTime; const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; messageElement.innerText = message; } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { // end of word // clear the typedValueElement for the new word typedValueElement.value = ''; // move to the next word wordIndex++; // reset the class name for all elements in quote for (const wordElement of quoteElement.childNodes) { wordElement.className = ''; } // highlight the new word quoteElement.childNodes[wordIndex].className = 'highlight'; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word typedValueElement.className = ''; } else { // error state typedValueElement.className = 'error'; } }); ``` **Memahami alur logika mengetik:** Fungsi ini menggunakan pendekatan waterfall, memeriksa kondisi dari yang paling spesifik hingga yang paling umum. Mari kita pecah setiap skenario: ```mermaid flowchart TD A[Player types character] --> B[Get current word and typed value] B --> C{Quote complete?} C -->|Yes| D[Show completion message with time] C -->|No| E{Word complete with space?} E -->|Yes| F[Clear input, move to next word, update highlight] E -->|No| G{Typing correctly so far?} G -->|Yes| H[Remove error styling] G -->|No| I[Show error styling] ``` **🏁 Kutipan Selesai (Skenario 1):** - **Memeriksa** apakah nilai yang diketik cocok dengan kata saat ini DAN kita berada di kata terakhir - **Menghitung** waktu yang berlalu dengan mengurangi waktu mulai dari waktu saat ini - **Mengonversi** milidetik ke detik dengan membagi dengan 1.000 - **Menampilkan** pesan selamat dengan waktu penyelesaian **✅ Kata Selesai (Skenario 2):** - **Mendeteksi** penyelesaian kata saat input diakhiri dengan spasi - **Memvalidasi** bahwa input yang dipangkas cocok dengan kata saat ini secara tepat - **Menghapus** bidang input untuk kata berikutnya - **Melanjutkan** ke kata berikutnya dengan menambah `wordIndex` - **Memperbarui** penyorotan visual dengan menghapus semua kelas dan menyoroti kata baru **📝 Proses Mengetik (Skenario 3):** - **Memverifikasi** bahwa kata saat ini dimulai dengan apa yang telah diketik sejauh ini - **Menghapus** gaya kesalahan untuk menunjukkan bahwa input benar - **Memungkinkan** kelanjutan mengetik tanpa gangguan **❌ Status Kesalahan (Skenario 4):** - **Memicu** saat teks yang diketik tidak cocok dengan awal kata yang diharapkan - **Menerapkan** kelas CSS kesalahan untuk memberikan umpan balik visual langsung - **Membantu** pemain dengan cepat mengidentifikasi dan memperbaiki kesalahan ## Uji aplikasi Anda Lihat apa yang telah Anda capai! 🎉 Anda baru saja membangun permainan mengetik yang nyata dan berfungsi dari awal menggunakan pemrograman berbasis acara. Luangkan waktu sejenak untuk menghargai itu - ini bukanlah pencapaian kecil! Sekarang saatnya fase pengujian! Apakah ini bekerja seperti yang diharapkan? Apakah kita melewatkan sesuatu? Begini: jika ada sesuatu yang tidak bekerja dengan sempurna langsung, itu sangat normal. Bahkan pengembang berpengalaman sering menemukan bug dalam kode mereka. Itu semua adalah bagian dari proses pengembangan! Klik `start`, dan mulailah mengetik! Seharusnya terlihat seperti animasi yang kita lihat sebelumnya.  **Apa yang harus diuji dalam aplikasi Anda:** - **Memverifikasi** bahwa mengklik Start menampilkan kutipan acak - **Mengonfirmasi** bahwa mengetik menyoroti kata saat ini dengan benar - **Memeriksa** bahwa gaya kesalahan muncul untuk mengetik yang salah - **Memastikan** bahwa menyelesaikan kata-kata memajukan penyorotan dengan benar - **Menguji** bahwa menyelesaikan kutipan menunjukkan pesan penyelesaian dengan waktu **Tips debugging umum:** - **Periksa** konsol browser (F12) untuk kesalahan JavaScript - **Verifikasi** bahwa semua nama file cocok persis (case-sensitive) - **Pastikan** Live Server berjalan dan menyegarkan dengan benar - **Uji** kutipan yang berbeda untuk memverifikasi pemilihan acak berfungsi --- ## Tantangan GitHub Copilot Agent 🎮 Gunakan mode Agent untuk menyelesaikan tantangan berikut: **Deskripsi:** Perluas permainan mengetik dengan menerapkan sistem kesulitan yang menyesuaikan permainan berdasarkan kinerja pemain. Tantangan ini akan membantu Anda berlatih penanganan acara tingkat lanjut, analisis data, dan pembaruan UI dinamis. **Prompt:** Buat sistem penyesuaian kesulitan untuk permainan mengetik yang: 1. Melacak kecepatan mengetik pemain (kata per menit) dan persentase akurasi 2. Secara otomatis menyesuaikan ke tiga tingkat kesulitan: Mudah (kutipan sederhana), Sedang (kutipan saat ini), Sulit (kutipan kompleks dengan tanda baca) 3. Menampilkan tingkat kesulitan saat ini dan statistik pemain di UI 4. Menerapkan penghitung streak yang meningkatkan kesulitan setelah 3 performa baik berturut-turut 5. Menambahkan umpan balik visual (warna, animasi) untuk menunjukkan perubahan kesulitan Tambahkan elemen HTML, gaya CSS, dan fungsi JavaScript yang diperlukan untuk menerapkan fitur ini. Sertakan penanganan kesalahan yang tepat dan pastikan permainan tetap dapat diakses dengan label ARIA yang sesuai. Pelajari lebih lanjut tentang [mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) di sini. ## 🚀 Tantangan Siap membawa permainan mengetik Anda ke tingkat berikutnya? Cobalah menerapkan fitur-fitur canggih ini untuk memperdalam pemahaman Anda tentang penanganan acara dan manipulasi DOM: **Tambahkan lebih banyak fungsi:** | Fitur | Deskripsi | Keterampilan yang Akan Anda Latih | |-------|-----------|----------------------------------| | **Kontrol Input** | Nonaktifkan pendengar acara `input` saat selesai, dan aktifkan kembali saat tombol diklik | Manajemen acara dan kontrol status | | **Manajemen Status UI** | Nonaktifkan kotak teks saat pemain menyelesaikan kutipan | Manipulasi properti DOM | | **Dialog Modal** | Tampilkan kotak dialog modal dengan pesan keberhasilan | Pola UI tingkat lanjut dan aksesibilitas | | **Sistem Skor Tertinggi** | Simpan skor tertinggi menggunakan `localStorage` | API penyimpanan browser dan persistensi data | **Tips implementasi:** - **Pelajari** `localStorage.setItem()` dan `localStorage.getItem()` untuk penyimpanan yang persisten - **Latih** menambahkan dan menghapus pendengar acara secara dinamis - **Jelajahi** elemen dialog HTML atau pola modal CSS - **Pertimbangkan** aksesibilitas saat menonaktifkan dan mengaktifkan kontrol formulir ## Kuis Pasca-Kuliah [Kuis pasca-kuliah](https://ff-quizzes.netlify.app/web/quiz/22) ## Tinjauan & Studi Mandiri Baca tentang [semua acara yang tersedia](https://developer.mozilla.org/docs/Web/Events) untuk pengembang melalui browser web, dan pertimbangkan skenario di mana Anda akan menggunakan masing-masing acara tersebut. ## Tugas [Buat permainan keyboard baru](assignment.md) --- **Penafian**: Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.