#quran-container {
width: 800px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#surah-select {
width: 100%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
#quran-ayah {
font-size: 18px;
line-height: 1.5;
}
// Fungsi untuk mengambil data surah dari API
function getSurahData() {
fetch(‘https://quran-api.santrikoding.com/api/surah’)
.then(response => response.json())
.then(data => {
// Tambahkan opsi surah ke dalam select
const surahSelect = document.getElementById(‘surah-select’);
data.data.forEach(surah => {
const option = document.createElement(‘option’);
option.value = surah.nomor;
option.text = surah.nama;
surahSelect.appendChild(option);
});
});
}
// Fungsi untuk mengambil data ayat dari API
function getAyahData(surahNomor) {
fetch(`https://quran-api.santrikoding.com/api/surah/${surahNomor}`)
.then(response => response.json())
.then(data => {
// Tampilkan ayat Qur’an
const quranAyah = document.getElementById(‘quran-ayah’);
quranAyah.innerHTML = ”;
data.ayat.forEach(ayah => {
const ayahText = document.createElement(‘p’);
ayahText.textContent = ayah.ar;
quranAyah.appendChild(ayahText);
});
});
}
// Jalankan fungsi untuk mengambil data surah
getSurahData();
// Tambahkan event listener untuk mengambil data ayat ketika surah dipilih
const surahSelect = document.getElementById(‘surah-select’);
surahSelect.addEventListener(‘change’, () => {
const surahNomor = surahSelect.value;
getAyahData(surahNomor);
});
“`
[wpcode id=”7287″]
[wpcode id="7287"]
[wpcode id=”7287″]