Daftar Sekarang Lihat Instruksi Lihat Rubrik
Ujian
Harap buat antarmuka desktop interaktif sempurna-piksel dan browser seluler dari mockup desain berikut.
- Harus menggunakan React.js, Flexbox, dan kerangka pustaka komponen React UI.
- Hosting sebagai halaman statis (tanpa back-end) di Firebase atau solusi gratis alternatif.
Desktop UI
Mobile UI
Persyaratan
- RWD. Desain Web Responsif untuk seluler dan web.
- Harus menggunakan JavaScript.
- Harus menggunakan React.js.
- Harus menggunakan CSS Flexbox
- Harus menggunakan kerangka UI React dari daftar ini:
- Material UI
- Semantic UI
- React Bootstrap
- React Toolbox
- Elemental UI
- Harus menghosting situs Anda sebagai halaman statis langsung.
- Gunakan layanan hosting gratis seperti Heroku, Firebase, ZEIT, atau Netilfy untuk menghosting situs Anda sebagai halaman statis langsung.
- Ini bukan ujian back-end. Interaksi halaman web semuanya harus dari sisi klien.
Pengingat
- Kami lebih suka Anda melakukan beberapa fitur dengan baik, daripada semua fitur dengan buruk.
- Harap pastikan untuk mengunggah kode ke GitHub / GitLab.
- Pada tanda 2,5 jam:
- Harap kirimkan sebanyak apa pun yang telah Anda selesaikan, terlepas dari apakah Anda telah selesai atau belum.
- Pastikan situs Anda aktif, dan kirimkan URL.
- Pastikan untuk melengkapi [Formulir Pengiriman Ujian] (https://docs.google.com/document/d/15tA1qlVOg14cmpX0DbIPPnUQa9GYlSXcb9haRCojVEU/edit).
Menampilkan Rubrik
- Pixel perfect pada:
- Desktop (Chrome)
- Seluler (Android, iOS)
- Isi celah, bukan pada maket desain dengan cara yang dipoles
- Efek
- Hover
- Selection
- Disable
- Keyboard and mouse events
Skor | Fiture |
---|---|
50 | Nomor Kotak Masuk |
50 | Diagram Radial dan Panel Statistik |
60 | Filter Pencarian dan Menu Dropdown (20 poin per jenis selektor) |
40 | Panel Utama dan Hashtag |
Daftar Fiture
Pilih salah satu fitur berikut untuk diterapkan. Tidak ada pemesanan yang diperlukan.
1. Nomor Kotak Masuk
- Hanya angka (0-9), titik (.), Dan garis miring terbalik (/) yang diperbolehkan dalam kotak angka.
- Panah kanan dan kiri dinonaktifkan untuk kotak angka.
- Mengklik dinonaktifkan untuk kotak angka.
- Keyboard secara otomatis fokus pada kotak angka pada pemuatan halaman. Tidak perlu mengklik kotak angka untuk memfokuskannya.
- Teks “Tekan Enter” dan tombol “Kirim” menjadi aktif hanya jika angka dimasukkan ke kotak angka.
2. Diagram Radial dan Panel Statistik
- Pixel desktop dan seluler yang sempurna
- Bukan gambar statis, tetapi grafik nyata yang dapat diperbarui jika halaman terhubung ke sisi server.
Desktop UI
UI Seluler
3. Filter Pencarian dan Menu Dropdown
- Pixel desktop dan seluler yang sempurna
- 3 jenis filter
- Pemilih Sederhana
- Beberapa Selector
- Kotak centang
Pemilih Sederhana
Pemilih Ganda
Pemilih Kotak Centang
4. Panel Utama dan Hashtag
- Pixel desktop dan seluler yang sempurna