▍Cabaran
Cabaran
Masalah kecil dengan ujian sebenar. Pilih kategori atau tahap kesukaran.
18 / 18
- CSS
Letak Kad di Tengah
Sunting `style.css` supaya `.card` berada betul-betul di tengah `.stage` — mendatar **dan** menegak — tanpa meregangkannya.
Pemula 10 minit
- CSS
Tukar CSS kepada Flexbox
Gantikan layout float dalam `style.css` dengan flexbox: tiga kad dalam satu baris, **lebar sama, tinggi sama**, jarak sekurang-kurangnya 16px antara kad — tiada float dan tiada clearfix.
Pemula 15 minit
- Algoritma
Kira Huruf Vokal
Lengkapkan `countVowels(text)` supaya ia memulangkan bilangan huruf vokal (`a e i o u`, huruf besar atau kecil) dalam `text` — sebagai nombor.
Pemula 10 minit
- Kebolehcapaian
Baiki Kontras Warna
Tukar warna dalam `style.css` supaya teks butiran, pautan, butang dan lencana semuanya mencapai nisbah kontras sekurang-kurangnya **4.5:1** berbanding latar belakangnya (WCAG AA).
Pemula 12 minit
- React
Baiki Pengira
Baiki pengira teh tarik: **+1** tambah satu, **−1** tolak satu (tetapi tidak kurang daripada 0), dan **Reset** kembali ke 0 — dengan nombor di skrin dikemas kini setiap kali.
Pemula 10 minit
- JavaScript
FizzBuzz di Halaman
Lengkapkan `fizzbuzz(n)` supaya ia memulangkan jujukan FizzBuzz dari 1 hingga `n` sebagai array string, kemudian paparkan `fizzbuzz(15)` di halaman sebagai 15 item `<li>` di dalam `#output`.
Pemula 15 minit
- Kebolehcapaian
Labelkan Setiap Input
Beri setiap kawalan borang `<label>` yang kelihatan dan bersambung (placeholder tidak dikira), kumpulkan dua butang radio dalam `<fieldset>` dengan `<legend>`, dan pastikan klik pada "I agree…" menanda checkbox.
Pemula 12 minit
- Debugging
Baiki Butang yang Rosak
Baiki butang **Add to cart** supaya setiap klik menambah tepat 1 pada kiraan troli (1, 2, 3…). Ada tiga bug berasingan — cari kesemuanya.
Pemula 10 minit
- Algoritma
Terbalikkan String
Lengkapkan `reverseString(text)` dalam `script.js` supaya ia memulangkan aksara `text` dalam susunan terbalik — termasuk string kosong dan emoji.
Pemula 10 minit
- HTML
Catatan Blog Semantik
Tulis semula `index.html` yang penuh dengan `<div>` menggunakan HTML semantik: `header` + `nav`, `main` + `article`, satu `h1`, satu `h2`, `p`, `time datetime`, `figure` + `figcaption` (dengan `alt`), dan `footer`.
Pemula 15 minit
- Debugging
Hentikan Loop Tanpa Henti
Baiki `yearsToTarget(balance, target, rate)` supaya loop-nya sentiasa tamat: pulangkan bilangan tahun untuk capai matlamat, `0` jika sudah tercapai, dan `-1` jika baki tidak akan bertambah (rate atau baki ≤ 0).
Pemula 12 minit
- CSS
Bina Navbar Responsif
Jadikan header responsif: pada skrin **600px dan lebih lebar**, logo di kiri dengan pautan dalam satu baris di sebelahnya; **bawah 600px**, pautan bersusun dalam satu lajur di bawah logo.
Pertengahan 20 minit
- JavaScript
Debounce Carian
Lengkapkan `debounce(fn, delay)` dan gunakannya supaya kotak carian memanggil `renderResults` **sekali sahaja, 300 ms selepas pengguna berhenti menaip**, dengan teks terkini.
Pertengahan 25 minit
- Debugging
Cari Bug dalam Array
`topThree(scores)` sepatutnya memulangkan tiga skor tertinggi, yang tertinggi dahulu, **tanpa mengubah array asal**. Ia memulangkan skor yang salah dan merosakkan input — cari dan baiki bug tersebut.
Pertengahan 15 minit
- React
Baiki State yang Basi
Baiki pengira pesanan supaya **+3 family pack** benar-benar menambah 3, dan pesanan online yang tiba selepas tempoh singkat tidak pernah hilang — walaupun butang lain diklik pada masa itu. Guna kemas kini state berbentuk function.
Pertengahan 15 minit
- Algoritma
Penyemak Palindrom
Baiki `isPalindrome(text)` supaya ia memulangkan `true` apabila `text` dibaca sama dari depan dan belakang **tanpa mengira huruf besar/kecil, ruang dan tanda baca**, dan `false` jika tidak.
Pertengahan 15 minit
- JavaScript
Susun Pelajar Mengikut Markah
Baiki `sortStudents(list)` supaya ia memulangkan array **baharu** objek pelajar yang disusun mengikut `score` (tertinggi dahulu), dengan markah sama disusun mengikut `name` A–Z, tanpa mengubah array asal.
Pertengahan 15 minit
- Kebolehcapaian
Jadikan Modal Mudah Diakses
Jadikan `#settings-modal` dialog yang benar-benar mudah diakses: `role="dialog"`, `aria-modal="true"`, dilabel oleh tajuknya, fokus masuk ke dalam apabila ia dibuka, **Escape** dan butang tutup sebenar menutupnya, dan fokus kembali ke **Open settings**.
Lanjutan 25 minit