Beep8 Character Names

by Ben Gillbanks

HTML

<h1>Beep8 Character Names</h1>
	<div id="names"></div>

CSS

body {
			font-family: sans-serif;
			background: #111;
			color: #eee;
			padding: 20px;
		}
		.name {
			padding: 4px 0;
		}

JavaScript

const names = [
			// Genderless / Quirky
			"Terry","Pat","Jordan","Casey","Morgan","Alex","Stevie","Sam","Frankie","Max",
      "Pip","Jojo",

			// Plain & Mismatched
			"Nigel","Colin","Barry","Graham","Brenda","Doris","Keith","Dave","Bob","Geoff",
			"Linda","Clive","Sheila","Norman","Ethel",

			// Oddly Formal
			"Reginald","Percival","Mortimer","Beatrice","Winifred","Horace","Agatha","Cornelius",
			"Clementine","Archibald","Prudence","Edgar","Octavia",

			// Slightly Silly
			"Binky","Toodles","Pickle","Sprout","Muffin","Jingles","Pongo","Doodles","Wobbles","Niblet"
		];

		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]];
			}
			return array;
		}

		function showNames() {
			const shuffled = shuffle([...names]);
			const container = document.getElementById("names");
			container.innerHTML = "";
			shuffled.forEach(name => {
				const div = document.createElement("div");
				div.className = "name";
				div.textContent = name;
				container.appendChild(div);
			});
		}

		showNames();