eNVision Optik: Modern Design &
Precision Vision Website
Pengembangan website responsif berbasis Vanilla HTML, CSS, dan JavaScript untuk toko optik modern dengan 5 halaman utama, sistem validasi form interaktif, dan katalog produk berstandar global.
Ringkasan Eksekutif & Identitas
Developer
Christian Gerard
Platform & Stack
Vanilla HTML, CSS, & JavaScript
Fokus Utama
Desain Responsif, Prototyping Figma, & Validasi Form JS
Tujuan Proyek
Ekspansi global, meningkatkan pesanan online & brand outreach.
Tentang eNVision & Latar Belakang
eNVision adalah toko optik modern yang menyediakan bingkai berkualitas tinggi, lensa presisi, dan koleksi kacamata klasik pilihan. Setiap produk merupakan selebrasi desain modern dan material terbaik yang dikerjakan oleh optision ahli.
Untuk mendukung ambisi ekspansi global dan menjangkau lebih banyak pelanggan setia secara online, proyek ini dirancang guna menampilkan katalog produk secara elegan sekaligus merefleksikan filosofi optik modern perusahaan.
Filosofi & Slogan
“Modern Design, Precision Vision. Crafted by Experts.” Memadukan fungsi dan estetika agar kacamata memberikan kenyamanan maksimal sekaligus memancarkan karakter unik penggunanya.
Struktur & Halaman Website
Website ini terdiri dari 5 halaman utama yang dirancang secara konsisten dengan navigasi dan footer terintegrasi:
1. Home Page
Menampilkan slogan perusahaan serta sorotan produk terbaru yang baru saja ditambahkan ke dalam katalog (seperti koleksi Aero Titanium).
2. Product Page & Rewards Page
Product Page menampilkan daftar kacamata lengkap dengan gambar, deskripsi, harga, dan tombol Purchase. Sementara Rewards Page memuat galeri penukaran poin untuk item eksklusif seperti Premium Cleaning Kit.
3. About Us & Order Page
About Us menyajikan kisah asal-usul (origin story), filosofi, dan profil founder (James Gates & Anthony Musk). Order Page menyediakan form pemesanan interaktif dengan validasi kustom JavaScript.
Fitur & Validasi Form
Formulir pemesanan pada Order Page dilengkapi dengan validasi JavaScript ketat tanpa menggunakan Regular Expression (Regex):
Aturan Validasi
- Select Product: Wajib dipilih.
- Name: Minimal lebih dari 5 karakter.
- Email:Wajib memuat karakter “@” dan “.”.
- Address & Add-on: Tidak boleh kosong / wajib diisi.
- Terms & Conditions: Wajib dicentang (checked).
Dibangun sepenuhnya menggunakan Vanilla HTML, CSS, dan JavaScript dengan penerapan media queries untuk layar di bawah 768px.