انجمن متا: طراحی سایت و سئو - دانلود قالب و تم - کریپتو

کد HTML + JavaScript برای نمایش شاخص Fear & Greed:

div id="fear-greed-index" style="font-family: Arial, sans-serif; padding: 10px; border: 1px solid #ccc; width: 250px; text-align: center;">
    <h3>Fear & Greed Index</h3>
    <p>وضعیت فعلی: <span id="fg-value">در حال بارگذاری...</span></p>
    <p>توضیح: <span id="fg-text">...</span></p>
</div>

<script>
    async function fetchFearGreedIndex() {
        try {
            let response = await fetch('https://api.alternative.me/fng/');
            let data = await response.json();
            let index = data.data[0].value;
            let status = data.data[0].value_classification;
           
            document.getElementById('fg-value').innerText = index;
            document.getElementById('fg-text').innerText = status;

            // تغییر رنگ بر اساس مقدار شاخص
            let color = "#ccc";
            if (index < 25) color = "red";         // Extreme Fear
            else if (index < 50) color = "orange"; // Fear
            else if (index < 75) color = "yellow"; // Neutral
            else color = "green";                  // Greed

            document.getElementById('fear-greed-index').style.borderColor = color;
        } catch (error) {
            console.error("Error fetching Fear & Greed Index:", error);
        }
    }

    fetchFearGreedIndex();
</script>
مراحل قرار دادن کد در جوملا ۴:

1. وارد ادمین جوملا شوید.

2. از منوی محتوا، گزینه ماژول‌ها را انتخاب کنید.

3. روی دکمه جدید کلیک کنید و نوع ماژول را Custom (HTML سفارشی) انتخاب کنید.

4. ویرایشگر را به حالت Code (کد خام) تغییر دهید.

5. کد بالا را در بخش محتوا جای‌گذاری کنید.

6. ذخیره کرده و موقعیت نمایش ماژول را در سایت تعیین کنید.

نتیجه:

این کد به‌صورت خودکار شاخص ترس و طمع را از API سایت Alternative.me دریافت کرده و مقدار و توضیحات آن را نمایش می‌دهد. همچنین، رنگ کادر بسته به مقدار شاخص تغییر می‌کند.