<ul><li>Alfa</li><li>Bravo</li><li>Charlie</li><li>Delta</li><li>Echo</li><li>Foxtrot</li><li>Golf</li><li>Hotel</li></ul>
<button onClick=${shuffleAllUL}>Shuffle all ULs on page</button>
function shuffleAllUL() {
const uls = document.querySelectorAll("ul");
for (const ul of uls) {
shuffleUL(ul);
}
}
// Fisher-Yates https://stackoverflow.com/a/2450976/120290
function shuffleUL(ul) {
const array = Array.from(ul.querySelectorAll("li"));
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle.
while (currentIndex != 0) {
// Pick a remaining element.
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
const currentSibling = array[currentIndex].nextSibling;
ul.insertBefore(array[currentIndex], array[randomIndex]);
ul.insertBefore(array[randomIndex], currentSibling);
}
return array;
}
import {tweet} from "@mbostock/tweet"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
