77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
|
+++
|
||
|
|
title = "places_to_eat_out"
|
||
|
|
+++
|
||
|
|
<ul id="randomize-list">
|
||
|
|
<li>Olive Garden</li>
|
||
|
|
<li>La Hacienda Mexicana</li>
|
||
|
|
<li>Wings on Fire</li>
|
||
|
|
<li>La 45</li>
|
||
|
|
<li>El Higuerón</li>
|
||
|
|
<li>La Casona de Laly</li>
|
||
|
|
<li>Pizza Hut</li>
|
||
|
|
<li>Spoon</li>
|
||
|
|
<li>Casa Rojas</li>
|
||
|
|
<li>Neko Sushi</li>
|
||
|
|
<li>Fitos</li>
|
||
|
|
<li>Cosí</li>
|
||
|
|
<li>La Caverna de Monto</li>
|
||
|
|
<li>Cantón</li>
|
||
|
|
<li>Ichiraku Sushi</li>
|
||
|
|
<li>Taquería Taquitos</li>
|
||
|
|
<li>95 Grados</li>
|
||
|
|
<li>Ciros</li>
|
||
|
|
<li>Family Pizza</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Function to randomize an array using the Fisher-Yates algorithm
|
||
|
|
function shuffleArray(array) {
|
||
|
|
for (let i = array.length - 1; i > 0; i--) {
|
||
|
|
const j = Math.floor(Math.random() * (i + 1));
|
||
|
|
[array[i], array[j]] = [array[j], array[i]];
|
||
|
|
}
|
||
|
|
return array;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Get the list element by its ID
|
||
|
|
const listElement = document.getElementById('randomize-list');
|
||
|
|
|
||
|
|
// Function to randomize the list
|
||
|
|
function randomizeList() {
|
||
|
|
// Get the list items from the list element
|
||
|
|
const listItems = Array.from(listElement.getElementsByTagName('li'));
|
||
|
|
|
||
|
|
// Randomize the order of list items
|
||
|
|
const randomizedList = shuffleArray(listItems);
|
||
|
|
|
||
|
|
// Clear the existing list
|
||
|
|
listElement.innerHTML = '';
|
||
|
|
|
||
|
|
// Append the randomized list items back to the list element
|
||
|
|
randomizedList.forEach((item) => {
|
||
|
|
listElement.appendChild(item);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Create a button element
|
||
|
|
const button = document.createElement('button');
|
||
|
|
button.textContent = 'Randomize!';
|
||
|
|
button.style.background = 'none';
|
||
|
|
button.style.border = 'none';
|
||
|
|
button.style.color = 'rgb(252, 147, 0)';
|
||
|
|
button.style.textDecoration = 'bold';
|
||
|
|
button.style.cursor = 'pointer';
|
||
|
|
button.style.padding = '5';
|
||
|
|
button.style.fontSize = '18px';
|
||
|
|
button.style.border = '1px solid rgb(252, 147, 0)';
|
||
|
|
button.style.borderRadius = '0';
|
||
|
|
button.style.fontFamily = 'Liberation Mono';
|
||
|
|
button.addEventListener('click', randomizeList);
|
||
|
|
|
||
|
|
// Insert the button before the list element
|
||
|
|
listElement.parentNode.insertBefore(button, listElement);
|
||
|
|
|
||
|
|
// Randomize the list initially
|
||
|
|
randomizeList();
|
||
|
|
</script>
|