📖 Fetch API Al-Qur'an - Vanilla JavaScript
Project ini merupakan implementasi Fetch API menggunakan Vanilla JavaScript, HTML, dan CSS untuk mengambil data dari API Al-Qur'an dan menampilkannya di browser dengan UI sederhana yang dioptimalkan untuk tampilan mobile.
🔗 API Sumber Data
Data diambil dari API berikut:
api
✨ Fitur Utama
🔍 Check API di Console – Mengecek response data API melalui console browser.
📜 Ambil Satu Surat (Al-Fatihah) – Mengambil data surat Al-Fatihah secara spesifik dari API.
🌐 Tampilkan Data ke Browser – Menampilkan nama surat, ayat, dan teks Arab ke halaman web.
📱 Responsive Mobile UI – Tampilan antarmuka yang ramah di perangkat mobile.
📂 Struktur Folder
.
├── index.html # File utama HTML
├── assets/
│ ├── css/
│ │ └── style.css # File CSS
│ ├── js/
│ │ └── main.js # File JavaScript
│ └── img/
│ └── preview-ui.png # Gambar Preview UI di README
🚀 Cara Menjalankan Project
Clone Repository
bash
Salin
Edit
git clone https://github.com/alwan2398/alquran-fetch-api-vanillajs.git
Buka Folder Project
bash
Salin
Edit
cd alquran-fetch-api-vanillajs
Buka index.html di Browser
Anda bisa langsung klik dua kali file index.html atau menggunakan live server di VS Code.
🛠️ Teknologi yang Digunakan
HTML5 – Struktur halaman.
CSS3 – Styling UI dan responsivitas.
Vanilla JavaScript – Fetch API dan manipulasi DOM.
API Al-Qur'an – Data ayat dan surat.
📜 Lisensi
Project ini dibuat untuk tujuan pembelajaran.
Sumber data API: Santri Koding - API Al-Qur'an