MealPal - Roll button

rollmeal.js

let parent = $$('[infinite-scroll]')[0]; parent.style='display: flex;';let children = [...parent.children]; parent.textContent = ""; let btn = document.createElement('button'); btn.textContent = 'Roll!';btn.style = 'background: #4992dc;border: 1px solid #75a1ce;border-radius: 5px;color: white;font-size: 40px;width: 25%;height: 356.56px;'; btn.onclick = () => {parent.children.length === 1 ? parent.appendChild(children[Math.floor((Math.random()*children.length) + 1)]) : parent.replaceChild(children[Math.floor((Math.random()*children.length) + 1)], parent.lastChild)}; parent.appendChild(btn);

Replaces menu list content with Roll button and by pressing - displays one random item from the list.
It's better to scroll list to the end of the page to load all items.

Helps chose when you have too many to chose.