There’s this reading plan: [https://sohmer.net/media/professor\_grant\_horners\_bible\_reading\_system.pdf]) that is quite confusing to follow. I’d like to make a webpage that tells the reader each day which chapters to read.
I’m trying to make something that will display 10 different items. Each item will be one entry from a different list. The items need to change to the next item in their respective list each day, so the app needs to know when a new day begins and automatically tick over.
I also need 10 different lists. For now I’m trying to just get one working.
Here’s what I’ve tried so far.
An html snippet that just says:
<div id=”item-container”>
<div class=”item” id=”list1″>List 1: Matthew 1</div>
<div class=”item” id=”list2″>List 2: Genesis 1</div>
<!– Add items for other lists if needed –>
</div>
And a script, added with the WP Code Snippet plugin:
// Define chapters for each list (section)
const lists = [
[“Matthew 1”, “Matthew 2”, “Matthew 3”, “Matthew 4”, “Matthew 5”, “Matthew 6”, “Matthew 7”, “Matthew 8”, “Matthew 9”, “Matthew 10”,
“Matthew 11”, “Matthew 12”, “Matthew 13”, “Matthew 14”, “Matthew 15”, “Matthew 16”, “Matthew 17”, “Matthew 18”, “Matthew 19”, “Matthew 20”,
“Matthew 21”, “Matthew 22”, “Matthew 23”, “Matthew 24”, “Matthew 25”, “Matthew 26”, “Matthew 27”, “Matthew 28”,
“Mark 1”, “Mark 2”, “Mark 3”, “Mark 4”, “Mark 5”, “Mark 6”, “Mark 7”, “Mark 8”, “Mark 9”, “Mark 10”,
“Mark 11”, “Mark 12”, “Mark 13”, “Mark 14”, “Mark 15”, “Mark 16”,
“Luke 1”, “Luke 2”, “Luke 3”, “Luke 4”, “Luke 5”, “Luke 6”, “Luke 7”, “Luke 8”, “Luke 9”, “Luke 10”,
“Luke 11”, “Luke 12”, “Luke 13”, “Luke 14”, “Luke 15”, “Luke 16”, “Luke 17”, “Luke 18”, “Luke 19”, “Luke 20”,
“Luke 21”, “Luke 22”, “Luke 23”, “Luke 24”,
“John 1”, “John 2”, “John 3”, “John 4”, “John 5”, “John 6”, “John 7”, “John 8”, “John 9”, “John 10”,
“John 11”, “John 12”, “John 13”, “John 14”, “John 15”, “John 16”, “John 17”, “John 18”, “John 19”, “John 20”,
“John 21”],
// Add chapters for other lists
];
// Initialize the counters for each list
const listCounters = Array(lists.length).fill(0);
// Function to update the items daily
function updateItemsDaily() {
for (let i = 0; i < listCounters.length; i++) {
const currentItem = document.getElementById(`list${i + 1}`);
currentItem.textContent = `List ${i + 1}: ${lists[i][listCounters[i]]}`;
}
// Increment the counters for each list for the next day
for (let i = 0; i < listCounters.length; i++) {
listCounters[i] = (listCounters[i] + 1) % lists[i].length;
}
// Schedule the function to run at the start of the next day
const currentDate = new Date();
const nextDay = new Date(currentDate);
nextDay.setDate(currentDate.getDate() + 1);
nextDay.setHours(0, 0, 0, 0);
const timeUntilNextDay = nextDay – currentDate;
setTimeout(updateItemsDaily, timeUntilNextDay);
}
// Initial call to start the update
updateItemsDaily();
As far as I see, this should work, but it won’t. Am I being dumb? I’ve tried adding it as both a sitewide header and with shortcode to no avail. Also, I’m just using the 2023 theme because surely I can rely on it to not have any JS errors. Does my explanation of what I’m trying to do make sense?
[ad_2]