Saat membuat fitur login atau register, sering kita lihat tombol “show/hide password” (ikon mata 👁️). Fitur ini sangat berguna agar pengguna bisa mengecek password yang mereka ketik.

Di artikel ini, kamu akan belajar cara membuat fitur tersebut dengan HTML + CSS + JavaScript sederhana — tanpa library tambahan.

📁 1. Struktur Folder Project

Buat struktur seperti ini:

📌 Penjelasan:

• index.html → halaman utama
• style.css → styling
• script.js → logic toggle

🧱 2. Membuat HTML (Struktur Utama)

🎨 3. CSS (Agar Terlihat Professional)

⚙️ 4. JavaScript (Logic Utama)

🧪 5. Cara Menjalankan (Practical Step-by-Step)

1. Buat folder show-hide-password
2. Masukkan semua file sesuai struktur
3. Buka index.html di browser
4. Coba:
   • Ketik password
   • Klik ikon 👁️
   • Lihat perubahan

👉 Ini sudah 100% working feature seperti aplikasi nyata

🔥 6. Pengembangan Lanjutan (Upgrade Level)

Kalau mau lebih advance:

• Ganti ikon pakai Font Awesome
• Tambahkan animasi
• Integrasi ke:
  • Laravel login system
  • Android (EditText + drawable icon)
• Tambahkan validasi password

🎯 Kesimpulan

Dengan project sederhana ini kamu sudah:

• Menggunakan DOM manipulation
• Membuat fitur real-world
• Punya mini project untuk portfolio