dprevite · April 5, 2023 15:30
diff --git a/stand-up.html b/stand-up.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shuffle Names</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .big { font-size: 2rem; }
        .unselectable {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
    </style>
 </head>
 <body class="bg-gray-800 text-white min-h-screen flex flex-col items-center justify-center unselectable">
    <h1 class="text-4xl">Export Team Stand Up</h1>
    <h2 class="text-2xl mb-8" id="date">Good Morning!</h2>

    <button id="shuffleButton" class="bg-red-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
        Shuffle
    </button>
    <div id="namesContainer" class="mt-8"></div>

    <script>
        const names = [
            'Avery Bullock',
            'Barry Robinson',
            'Debbie Hyman',
            'Francine Smith',
            'Greg Corbin',
            'Hayley Smith',
            'Jack Smith',
            'Jeff Fischer',
            'Klaus Heisler',
            'Linda Memari',
            'Lisa Silver',
            'Mertz',
            'Principal Lewis',
            'Roger Smith',
            'Snot Lonstein',
            'Stan Smith',
            'Steve Smith',
            'Terry Bates',
            'Toshi Yoshida',
            'Tuttle',
        ];

        const shuffleButton  = document.getElementById('shuffleButton');
        const namesContainer = document.getElementById('namesContainer');
        const dateElement    = document.getElementById('date');

        function shuffle(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]];
            }
        }

        async function animatedShuffle(times, delay) {
            for (let i = 0; i < times; i++) {
                await new Promise(resolve => setTimeout(resolve, delay));
                shuffle(names);
                displayNames();
            }
        }
        
        function displayNames() {
            namesContainer.innerHTML = '';
            names.forEach(name => {
                const nameElement = document.createElement('div');
                nameElement.classList.add('text-center', 'mx-2', 'my-1', 'cursor-pointer');
                nameElement.textContent = name;
                nameElement.addEventListener('click', () => {
                    if (nameElement.classList.contains('big')) {
                        nameElement.classList.remove('big');
                    } else {
                        namesContainer.querySelectorAll('div.text-center').forEach(el => el.classList.remove('big'));
                        nameElement.classList.add('big');
                    }
                });
                namesContainer.appendChild(nameElement);
            });
        }

        shuffleButton.addEventListener('click', () => {
            animatedShuffle(10, 100);
        });

        function formatDate(date) {
            const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            const day = days[date.getDay()];
            const month = months[date.getMonth()];
            const ordinal = ['th', 'st', 'nd', 'rd'][(date.getDate() % 10 < 4) ? (date.getDate() % 10) : 0];
            return `${day} ${month} ${date.getDate()}${ordinal}`;
        }

        dateElement.textContent = formatDate(new Date());
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Shuffle Names</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
	<style>
	.big { font-size: 2rem; }
	.unselectable {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	}
	</style>
	</head>
	<body class="bg-gray-800 text-white min-h-screen flex flex-col items-center justify-center unselectable">
	<h1 class="text-4xl">Export Team Stand Up</h1>
	<h2 class="text-2xl mb-8" id="date">Good Morning!</h2>

	<button id="shuffleButton" class="bg-red-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
	Shuffle
	</button>
	<div id="namesContainer" class="mt-8"></div>

	<script>
	const names = [
	'Avery Bullock',
	'Barry Robinson',
	'Debbie Hyman',
	'Francine Smith',
	'Greg Corbin',
	'Hayley Smith',
	'Jack Smith',
	'Jeff Fischer',
	'Klaus Heisler',
	'Linda Memari',
	'Lisa Silver',
	'Mertz',
	'Principal Lewis',
	'Roger Smith',
	'Snot Lonstein',
	'Stan Smith',
	'Steve Smith',
	'Terry Bates',
	'Toshi Yoshida',
	'Tuttle',
	];

	const shuffleButton = document.getElementById('shuffleButton');
	const namesContainer = document.getElementById('namesContainer');
	const dateElement = document.getElementById('date');

	function shuffle(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]];
	}
	}

	async function animatedShuffle(times, delay) {
	for (let i = 0; i < times; i++) {
	await new Promise(resolve => setTimeout(resolve, delay));
	shuffle(names);
	displayNames();
	}
	}

	function displayNames() {
	namesContainer.innerHTML = '';
	names.forEach(name => {
	const nameElement = document.createElement('div');
	nameElement.classList.add('text-center', 'mx-2', 'my-1', 'cursor-pointer');
	nameElement.textContent = name;
	nameElement.addEventListener('click', () => {
	if (nameElement.classList.contains('big')) {
	nameElement.classList.remove('big');
	} else {
	namesContainer.querySelectorAll('div.text-center').forEach(el => el.classList.remove('big'));
	nameElement.classList.add('big');
	}
	});
	namesContainer.appendChild(nameElement);
	});
	}

	shuffleButton.addEventListener('click', () => {
	animatedShuffle(10, 100);
	});

	function formatDate(date) {
	const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
	const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	const day = days[date.getDay()];
	const month = months[date.getMonth()];
	const ordinal = ['th', 'st', 'nd', 'rd'][(date.getDate() % 10 < 4) ? (date.getDate() % 10) : 0];
	return `${day} ${month} ${date.getDate()}${ordinal}`;
	}

	dateElement.textContent = formatDate(new Date());
	</script>
	</body>
	</html>