Script Random Ayat 30 Juz - XWAPPER

Script Random Ayat Al-Qur'an 30 Juz

Silakan copy dan paste di side bar blog anda, letakkan script di area tata letak.

<!-- Widget Random Ayat by difan Engine -->
<div id="difan-display" style="border:1px solid #ddd; padding:15px; text-align:center; background:#f9f9f9;">
    <div id="difan-loader">Memuat ayat...</div>
    <div id="difan-result" style="display:none;">
        <p id="difan-text" style="font-style:italic;"></p>
        <b id="difan-info"></b>
    </div>
    <button onclick="difan_app.muatUlang()" style="margin-top:10px;">Acak Ayat</button>
</div>

<script>
class difan {
    constructor() {
        this.api = "https://api.alquran.cloud/v1/ayah/";
    }
    async ambilAyat() {
        const id = Math.floor(Math.random() * 6236) + 1;
        try {
            const res = await fetch(`${this.api}${id}/id.indonesian`);
            const json = await res.json();
            return json.data;
        } catch (e) { return null; }
    }
    render(data) {
        const resDiv = document.getElementById('difan-result');
        const loadDiv = document.getElementById('difan-loader');
        if (data) {
            document.getElementById('difan-text').innerText = `"${data.text}"`;
            document.getElementById('difan-info').innerText = `(QS. ${data.surah.englishName}: ${data.numberInSurah})`;
            loadDiv.style.display = 'none';
            resDiv.style.display = 'block';
        }
    }
    async muatUlang() {
        document.getElementById('difan-loader').style.display = 'block';
        document.getElementById('difan-result').style.display = 'none';
        const data = await this.ambilAyat();
        this.render(data);
    }
}
const difan_app = new difan();
difan_app.muatUlang();
</script>