Judul Proyek:
“Member Registration Portal”
Deskripsi Proyek:
Aplikasi web yang memungkinkan pengguna untuk mendaftar sebagai member melalui formulir online. Sistem akan menampilkan validasi input, memberikan konfirmasi pendaftaran, dan menyimpan data secara sementara (menggunakan JavaScript dan localStorage).
Tujuan Pembelajaran:
-
Menguasai struktur form HTML untuk input data user
-
Mengimplementasikan validasi data dengan JavaScript
-
Mengatur tampilan form yang responsif dan menarik
-
Menyimpan dan menampilkan data member secara lokal
Fitur-Fitur yang Harus Diimplementasikan:
1. Formulir Pendaftaran
-
Input: Nama lengkap, Email, Nomor HP, Gender (radio button), Tanggal Lahir, Alamat
-
Validasi: semua field wajib diisi, email dan nomor HP harus valid
-
Konfirmasi pendaftaran dalam bentuk modal atau alert
2. Tampilan Daftar Member
-
Menampilkan list member yang telah mendaftar (dari
localStorage) -
Gunakan tabel atau card untuk daftar member
-
Tambahkan tombol untuk hapus satu data atau hapus semua
3. Responsive Layout
-
Gunakan Flexbox/Grid dan media queries
-
Tampilan tetap bagus di layar mobile maupun desktop
4. Interaktivitas
-
Validasi form secara real-time atau saat submit
-
Tampilkan pesan error dan highlight field jika ada yang salah
-
Bersihkan form setelah submit
Teknologi yang Digunakan:
-
HTML: struktur form, daftar, dan elemen navigasi
-
CSS: styling form, table/card, efek responsif
-
JavaScript: validasi input, menyimpan dan mengambil data dari
localStorage, interaksi DOM
No comments:
Post a Comment