Random CMS Collection Page Button

Quick tutorial on how to write some code that: When a button is clicked, send the user to a random CMS Collection Template Page. Great little guide to get familiar with custom code in Webflow including the window.location property, querySelector, and Math.random()

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

Inside </body> tag

<script>
const randomButton = document.querySelector('#random-button')
const slugs = document.querySelectorAll('.slug')
const randomIndex = Math.floor(Math.random() * slugs.length)
const randomSlug = slugs[randomIndex].textContent

const url = "https://" + window.location.host + '/tips/' + randomSlug;

randomButton.addEventListener('click', () => {
	window.location = url
})
</script>