Saya meminta perhatian warga Khabrovsk dan tamu Habr untuk pengembangan diri di sisi depan pembangunan. Tugas ini ditujukan untuk pemain yang mulai berurusan dengan pemrograman frontend dan diatur untuk menjadi terbiasa dengan mekanisme pemrograman dasar di browser. Teknologi yang diperlukan: HTML, CSS, JavaScript (Vanilla).
Tugas ini dirancang khusus agar sebanyak mungkin memahami teknologi dasar dengan koneksi minimal dari setiap alat tambahan. Pada dasarnya, hanya diperlukan peramban dan editor kode; tidak ada manipulasi awal, tanpa perlu diproses di sisi backend. Siapa yang peduli untuk berkenalan dengan produksi - Selamat datang di kucing!
Rekomendasi untuk penampilan
Buat formulir yang terdiri dari daftar garis dan panel filter. Contoh bentuk:
Fitur formulir dari contoh:
• formulir adalah
blok dengan lebar tetap di tengah jendela ;
• panel filtrasi memiliki
ketinggian tetap ; margin panel diatur
secara horizontal dalam satu atau dua garis;
• daftar garis
diregangkan ke seluruh ketinggian jendela yang tersisa , ketika jumlah garis lebih besar dari tinggi daftar yang diberikan,
bilah gulir muncul
di dalam daftar itu sendiri (tampilan bilah gulir global di jendela peramban dihindarkan).
Persyaratan fungsional
Baris daftar dan isinya dihasilkan saat membuka halaman (angka acak lebih dari 200). Markup dan konten setiap baris harus dikumpulkan secara acak dari properti yang sebelumnya terdaftar dalam koleksi konstan dalam kode sumber, koleksi sesuai dengan filter seleksi lanjutan bernomor 1, 2, 3, 4 (dijelaskan lebih terinci di bawah ini, nilai-nilai elemen dan jumlah mereka dalam koleksi diatur oleh pelaksana). Pilihan acak dari item koleksi untuk merakit string didasarkan pada generasi nomor acak (acak).
Berikan pengidentifikasi unik dan dua tag pada setiap baris daftar:
1. tulis nilai pengenal dalam atribut pengenal dan tampilkan di awal isi string (Anda dapat membungkusnya dengan tag terpisah);
2. tag pertama adalah untuk memilih secara acak, dari yang disediakan oleh filter, misalnya, label, rentang, div, p atau sejenisnya, dengan kelas acak, dapat dibedakan secara visual (misalnya, dengan warna latar belakang, font, atau sejenisnya, kelas-kelas harus ditentukan sebelumnya dalam css dan terdaftar dalam kumpulan konstanta untuk filter yang sesuai), dalam konten menampilkan nama tag dan kelasnya; disambut secara acak beberapa kelas yang berbeda sekaligus, dalam jumlah yang berbeda, tidak kurang dari 1, disambut;
3. Tag kedua adalah input dengan tipe acak (atribut tipe), nilai acak (nilai duplikat dalam judul), ada / tidak adanya tanda blok secara acak, ada / tidak adanya tanda baca-saja secara acak.
Pada panel pemfilteran, sediakan untuk beralih mode antara
seleksi dengan pengidentifikasi dan
seleksi lanjutan . Setelah memilih nilai pada formulir pemfilteran, hanya entri yang cocok yang akan tetap ada dalam daftar:
dalam mode
pemilihan oleh pengidentifikasi - garis dengan pencocokan pengidentifikasi;
dalam mode
pemilihan lanjutan - baris, yang masing-masing secara langsung berhubungan dengan semua opsi yang dipilih: tag pertama, kelas tag pertama, jenis tag input, nilai tag input, tanda tag input yang diblokir, tag akses read-only menandakan.
Ketika bidang pemfilteran diubah lagi, daftar harus menampilkan entri dari daftar sumber yang cocok untuk konfigurasi filter yang baru dipilih (pemfilteran daftar sumber harus terjadi lagi, catatan sumber tidak boleh hilang).
Dalam mode
pemilihan berdasarkan pengidentifikasi , panel filter harus memiliki bidang pemilihan menurut pengidentifikasi baris (bidang input).
Dalam mode
pemilihan lanjutan , filter berikut harus berada di panel filter:
1. oleh tag pertama (pemilihan dari koleksi);
2. oleh kelas dari tag pertama (pemilihan dari koleksi);
3. menurut jenis tag input (pemilihan dari koleksi);
4. dengan nilai tag input (pemilihan dari koleksi);
5. dengan memblokir tag input (pilihan nilai ya / tidak);
6. dengan ketersediaan hanya untuk membaca tag input (pilihan nilai ya / tidak).
Opsional
* Disarankan agar filter
bereaksi terhadap perubahan dengan segera , tanpa perlu klik terpisah pada tombol pencarian.
* Dianjurkan untuk melakukan semuanya dengan hati-hati, berurusan dengan properti css dan menyediakan sedemikian rupa sehingga
tata letak setiap baris daftar tidak berjalan karena perbedaan dalam tag yang terkandung di dalamnya.
** Terapkan pemilihan semua elemen yang diperlukan dengan
satu pemilih - pilih konten baris yang diperlukan sekaligus, dan jangan centang setiap baris untuk keberadaan opsi yang dipilih dalam filter.
*** Cobalah untuk menyediakan
pemilihan beberapa nilai untuk filter berdasarkan tag pertama, berdasarkan kelas dari tag pertama, berdasarkan jenis tag input, berdasarkan nilai tag input. Filter berdasarkan tag pertama, jenis tag input atau nilai tag input harus memilih string dengan nilai apa pun yang dipilih di dalamnya (di setiap filter secara individual; persyaratan umum mode lanjutan untuk string yang cocok untuk semua filter sekaligus dipertahankan).
Saya harap pembaca akan menemukan tugas yang dijelaskan akan bermanfaat dalam pengembangan diri atau akan tampak cocok untuk rekomendasi kepada seseorang.
Saya berharap Anda semua sukses dalam karier profesional Anda!