Assalamu Alaikum! Get the code for your website to showcase the Hadees of the Day and display it on your website.
Hadees of the day
Example 3:
To display the Hadees of the Day widget on your website, follow these steps:
- Go to the widget section of your website.
- Add an HTML widget to the desired location on your webpage.
- Paste the following code into the HTML widget:
<div id="hadees-widget-container"></div>
<script>
// Select the widget container
var widgetContainer = document.querySelector('#hadees-widget-container');
// Check if Hadees data is already stored in local storage
var cachedHadeesData = localStorage.getItem('hadeesData');
// Check if the cached data is still valid (less than 24 hours old)
var cacheTimestamp = localStorage.getItem('cacheTimestamp');
var currentTimestamp = Math.floor(Date.now() / 1000); // Current timestamp in seconds
var cacheDuration = 24 * 60 * 60; // 24 hours in seconds
if (cachedHadeesData && cacheTimestamp && currentTimestamp - cacheTimestamp < cacheDuration) {
// Use the cached Hadees data
widgetContainer.innerHTML = cachedHadeesData;
} else {
// Fetch Hadees data from the API endpoint
fetch('https://ummat-e-nabi.com/wp-admin/hod-with-push-api-v2.php')
.then(response => response.text())
.then(widgetHTML => {
// Insert the Hadees widget HTML into the widget container
widgetContainer.innerHTML = widgetHTML;
// Store the fetched Hadees data in local storage
localStorage.setItem('hadeesData', widgetHTML);
// Store the current timestamp in local storage
localStorage.setItem('cacheTimestamp', currentTimestamp);
})
.catch(error => {
console.error('Error fetching Hadees widget:', error);
});
}
</script>