Show random cms item that updates every new day

Design help General
1

Hello Community!

I have a library of hundreds of golf drills. I want to create a “Drill of the Day” section on the site where a different drill is displayed with every new day, 365 days of the year.

My question is, how do I show random drill/cms item and how do I make the cms items change automatically as the days go by?

Thank you

2

Begin with creating your cms collection. Let’s say its called “Drills”.
Add all the fields as needed.

Then, design a section in your Webflow site where the drill of the day will be displayed. Name this section “dril of the day”
Bind this section to the “Drills” CMS collection.

Use Custom JavaScript for Daily Drill Selection
Add a Unique Identifier and ensure each drill in your CMS collection has a unique identifier, such as a “Drill Number” (e.g., 1 to 365).

Then, add the follwoing js code in your page. Go to pages > click the gear icon> and paste the code in the head tag.

The code:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Get today's date
    const today = new Date();
    const dayOfYear = Math.floor((today - new Date(today.getFullYear(), 0, 0)) / 86400000);

    // Select all CMS items
    const cmsItems = document.querySelectorAll(".cms-item");

    // Show the "Drill of the Day" based on dayOfYear
    cmsItems.forEach((item, index) => {
      if (index === dayOfYear % cmsItems.length) {
        item.style.display = "block"; // Show this drill
      } else {
        item.style.display = "none"; // Hide others
      }
    });
  });
</script>

Add a unique class to your CMS items (ex. cms-item) to target them with js.

This will not work in preview mode. Publish your site to check. Change your computer’s date to see if it works.

Hope it helps.

3

Just to add a note to Dahsh’s excellent solution;

Since you have 365 items, you’ll need 4 collection lists, all bound to your Drills collection and all setup with the same content ( components are excellent for this ).

Make certain sorting is the same for all lists, likely on Drill Number, and set the limits so that each list shows 100 of your range. 1-100 , 101-200, etc.