✍️ Script Al Qur'an online

hasil pencarian Script Al Qur'an online

kode Script membuat Al Qur'an online terbaru!

Salin dan tempel kode Script Al Qur'an online ini di blog kamu,lihat kode script di bawah..

https://gowmovie.blogspot.com/2025/08/al-quran-online.html

<!-- Mulai Script Al-Qur'an Online --> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; margin: 0; padding: 0; } #quran-app { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; color: #0066cc; } select, input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; } .ayah { background: #f9f9f9; padding: 15px; border-radius: 5px; margin-bottom: 15px; } .ayah p { margin: 5px 0; } .ayah p.arabic { text-align: right; font-size: 20px; color: #2c3e50; } </style> <div id="quran-app"></div> <script> async function loadQuran() { try { const response = await fetch("https://equran.id/api/v2/surat"); const data = await response.json(); const surahs = data.data; let app = document.getElementById("quran-app"); app.innerHTML = ` <h2>📖 Al-Qur'an Online</h2> <input type="text" id="search-surah" placeholder="Cari Surah (contoh: Al-Fatihah)"> <select id="surah-select"> <option value="">Pilih Surah</option> </select> <div id="ayah-list"></div> `; const surahSelect = document.getElementById("surah-select"); const searchSurah = document.getElementById("search-surah"); surahs.forEach(surah => { const option = document.createElement("option"); option.value = surah.nomor; option.textContent = `${surah.nomor}. ${surah.namaLatin} (${surah.nama})`; surahSelect.appendChild(option); }); searchSurah.addEventListener("input", function () { const searchText = this.value.toLowerCase(); for (let i = 0; i < surahSelect.options.length; i++) { const option = surahSelect.options[i]; if (option.text.toLowerCase().includes(searchText)) { option.style.display = ""; } else { option.style.display = "none"; } } }); surahSelect.addEventListener("change", async function () { const surahNumber = this.value; if (!surahNumber) return; const response = await fetch(`https://equran.id/api/v2/surat/${surahNumber}`); const data = await response.json(); const surahData = data.data; const ayahList = document.getElementById("ayah-list"); ayahList.innerHTML = `<h3>${surahData.namaLatin} - ${surahData.nama}</h3><br>`; surahData.ayat.forEach(verse => { const ayahDiv = document.createElement("div"); ayahDiv.className = "ayah"; ayahDiv.innerHTML = ` <p class="arabic">${verse.teksArab}</p> <p><strong>Artinya:</strong> ${verse.teksIndonesia}</p> `; ayahList.appendChild(ayahDiv); }); }); } catch (error) { document.getElementById("quran-app").innerHTML = "<p>Gagal memuat data Al-Qur'an. Coba lagi nanti.</p>"; } } loadQuran(); </script> <!-- Akhir Script Al-Qur'an Online -->

🕵️ Preview Code disana
👇