Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
	margin: 0 auto;
	background: #f5f5f5;
	font-family: 'Roboto', sans-serif;
}
#s,
#p {
	min-height: 200px;
	min-width: 200px;
}
#s {
	height: 95vh;
	width: 95vw;
	max-height: 100vw;
	max-width: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 	border:1px solid #ccc; */
	border-radius: 50%;
}
#c {
	height: 100%;
	width: 100%;
}
input {
	min-width: 100px;
}
.slice:hover > path,
.slice:hover > text {
	transition: 300ms;
	transform: translate(-3.125%, -3.125%) scale(1.0625);
}
.winner > path {
	transition: 300ms;
	transform: translate(-12.5%, -12.5%) scale(1.25);
}

.winner > text {
	transition: 300ms;
/* 	transform: translate(-5%, -5%) scale(1.1); */
	transform: translate(-10%, -10%) scale(1.2);
/* 	transform: translate(-12.5%, -12.5%) scale(1.25); */
}
.spinner {
	transition: 100ms;
	cursor: pointer;
}
.spinner:hover {
	transform: translate(-3.125%, -3.125%) scale(1.0625);
}
.spinner:active {
	transition: 50ms;
	transform: translate(-12.5%, -12.5%) scale(1.25);
}
.increaseNumbers {
	position: fixed;
	right: 15px;
	top: 10px;
}

console.log("Event Fired")
let emojis = ["😀", "😁", "😂", "😃", "😄", "😅", "😆", "😇", "😈", "👿", "😉", "😊", "😋", "😌", "😍", "😎", "😏", "😐", "😑", "😒", "😓", "😔", "😕", "😖", "😗", "😘", "😙", "😚", "😛", "😜", "😝", "😞", "😟", "😠", "😡", "😢", "😣", "😤", "😥", "😦", "😧", "😨", "😩", "😪", "😫", "😬", "😭", "😮", "😯", "😰", "😱", "😲", "😳", "😴", "😵", "😶", "😷", "😸", "😹", "😺", "😻", "😼", "😽", "😾", "😿", "🙀", "👣", "👤", "👥", "👶", "👶🏻", "👶🏼", "👶🏽", "👶🏾", "👶🏿", "👦", "👦🏻", "👦🏼", "👦🏽", "👦🏾", "👦🏿", "👧", "👧🏻", "👧🏼", "👧🏽", "👧🏾", "👧🏿", "👨", "👨🏻", "👨🏼", "👨🏽", "👨🏾", "👨🏿", "👩", "👩🏻", "👩🏼", "👩🏽", "👩🏾", "👩🏿", "👪", "👨‍👩‍👧", "👨‍👩‍👧‍👦", "👨‍👩‍👦‍👦", "👨‍👩‍👧‍👧", "👩‍👩‍👦", "👩‍👩‍👧", "👩‍👩‍👧‍👦", "👩‍👩‍👦‍👦", "👩‍👩‍👧‍👧", "👨‍👨‍👦", "👨‍👨‍👧", "👨‍👨‍👧‍👦", "👨‍👨‍👦‍👦", "👨‍👨‍👧‍👧", "👫", "👬", "👭", "👯", "👰", "👰🏻", "👰🏼", "👰🏽", "👰🏾", "👰🏿", "👱", "👱🏻", "👱🏼", "👱🏽", "👱🏾", "👱🏿", "👲", "👲🏻", "👲🏼", "👲🏽", "👲🏾", "👲🏿", "👳", "👳🏻", "👳🏼", "👳🏽", "👳🏾", "👳🏿", "👴", "👴🏻", "👴🏼", "👴🏽", "👴🏾", "👴🏿", "👵", "👵🏻", "👵🏼", "👵🏽", "👵🏾", "👵🏿", "👮", "👮🏻", "👮🏼", "👮🏽", "👮🏾", "👮🏿", "👷", "👷🏻", "👷🏼", "👷🏽", "👷🏾", "👷🏿", "👸", "👸🏻", "👸🏼", "👸🏽", "👸🏾", "👸🏿", "💂", "💂🏻", "💂🏼", "💂🏽", "💂🏾", "💂🏿", "👼", "👼🏻", "👼🏼", "👼🏽", "👼🏾", "👼🏿", "🎅", "🎅🏻", "🎅🏼", "🎅🏽", "🎅🏾", "🎅🏿", "👻", "👹", "👺", "💩", "💀", "👽", "👾", "🙇", "🙇🏻", "🙇🏼", "🙇🏽", "🙇🏾", "🙇🏿", "💁", "💁🏻", "💁🏼", "💁🏽", "💁🏾", "💁🏿", "🙅", "🙅🏻", "🙅🏼", "🙅🏽", "🙅🏾", "🙅🏿", "🙆", "🙆🏻", "🙆🏼", "🙆🏽", "🙆🏾", "🙆🏿", "🙋", "🙋🏻", "🙋🏼", "🙋🏽", "🙋🏾", "🙋🏿", "🙎", "🙎🏻", "🙎🏼", "🙎🏽", "🙎🏾", "🙎🏿", "🙍", "🙍🏻", "🙍🏼", "🙍🏽", "🙍🏾", "🙍🏿", "💆", "💆🏻", "💆🏼", "💆🏽", "💆🏾", "💆🏿", "💇", "💇🏻", "💇🏼", "💇🏽", "💇🏾", "💇🏿", "💑", "👩‍❤️‍👩", "👨‍❤️‍👨", "💏", "👩‍❤️‍💋‍👩", "👨‍❤️‍💋‍👨", "🙌", "🙌🏻", "🙌🏼", "🙌🏽", "🙌🏾", "🙌🏿", "👏", "👏🏻", "👏🏼", "👏🏽", "👏🏾", "👏🏿", "👂", "👂🏻", "👂🏼", "👂🏽", "👂🏾", "👂🏿", "👀", "👃", "👃🏻", "👃🏼", "👃🏽", "👃🏾", "👃🏿", "👄", "💋", "👅", "💅", "💅🏻", "💅🏼", "💅🏽", "💅🏾", "💅🏿", "👋", "👋🏻", "👋🏼", "👋🏽", "👋🏾", "👋🏿", "👍", "👍🏻", "👍🏼", "👍🏽", "👍🏾", "👍🏿", "👎", "👎🏻", "👎🏼", "👎🏽", "👎🏾", "👎🏿", "☝", "☝🏻", "☝🏼", "☝🏽", "☝🏾", "☝🏿", "👆", "👆🏻", "👆🏼", "👆🏽", "👆🏾", "👆🏿", "👇", "👇🏻", "👇🏼", "👇🏽", "👇🏾", "👇🏿", "👈", "👈🏻", "👈🏼", "👈🏽", "👈🏾", "👈🏿", "👉", "👉🏻", "👉🏼", "👉🏽", "👉🏾", "👉🏿", "👌", "👌🏻", "👌🏼", "👌🏽", "👌🏾", "👌🏿", "✌", "✌🏻", "✌🏼", "✌🏽", "✌🏾", "✌🏿", "👊", "👊🏻", "👊🏼", "👊🏽", "👊🏾", "👊🏿", "✊", "✊🏻", "✊🏼", "✊🏽", "✊🏾", "✊🏿", "✋", "✋🏻", "✋🏼", "✋🏽", "✋🏾", "✋🏿", "💪", "💪🏻", "💪🏼", "💪🏽", "💪🏾", "💪🏿", "👐", "👐🏻", "👐🏼", "👐🏽", "👐🏾", "👐🏿", "🙏", "🙏🏻", "🙏🏼", "🙏🏽", "🙏🏾", "🙏🏿", "🌱", "🌲", "🌳", "🌴", "🌵", "🌷", "🌸", "🌹", "🌺", "🌻", "🌼", "💐", "🌾", "🌿", "🍀", "🍁", "🍂", "🍃", "🍄", "🌰", "🐀", "🐁", "🐭", "🐹", "🐂", "🐃", "🐄", "🐮", "🐅", "🐆", "🐯", "🐇", "🐰", "🐈", "🐱", "🐎", "🐴", "🐏", "🐑", "🐐", "🐓", "🐔", "🐤", "🐣", "🐥", "🐦", "🐧", "🐘", "🐪", "🐫", "🐗", "🐖", "🐷", "🐽", "🐕", "🐩", "🐶", "🐺", "🐻", "🐨", "🐼", "🐵", "🙈", "🙉", "🙊", "🐒", "🐉", "🐲", "🐊", "🐍", "🐢", "🐸", "🐋", "🐳", "🐬", "🐙", "🐟", "🐠", "🐡", "🐚", "🐌", "🐛", "🐜", "🐝", "🐞", "🐾", "⚡️", "🔥", "🌙", "☀️", "⛅️", "☁️", "💧", "💦", "☔️", "💨", "❄️", "🌟", "⭐️", "🌠", "🌄", "🌅", "🌈", "🌊", "🌋", "🌌", "🗻", "🗾", "🌐", "🌍", "🌎", "🌏", "🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘", "🌚", "🌝", "🌛", "🌜", "🌞", "🍅", "🍆", "🌽", "🍠", "🍇", "🍈", "🍉", "🍊", "🍋", "🍌", "🍍", "🍎", "🍏", "🍐", "🍑", "🍒", "🍓", "🍔", "🍕", "🍖", "🍗", "🍘", "🍙", "🍚", "🍛", "🍜", "🍝", "🍞", "🍟", "🍡", "🍢", "🍣", "🍤", "🍥", "🍦", "🍧", "🍨", "🍩", "🍪", "🍫", "🍬", "🍭", "🍮", "🍯", "🍰", "🍱", "🍲", "🍳", "🍴", "🍵", "☕️", "🍶", "🍷", "🍸", "🍹", "🍺", "🍻", "🍼", "🎀", "🎁", "🎂", "🎃", "🎄", "🎋", "🎍", "🎑", "🎆", "🎇", "🎉", "🎊", "🎈", "💫", "✨", "💥", "🎓", "👑", "🎎", "🎏", "🎐", "🎌", "🏮", "💍", "❤️", "💔", "💌", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "💜", "💛", "💚", "💙", "🏃", "🏃🏻", "🏃🏼", "🏃🏽", "🏃🏾", "🏃🏿", "🚶", "🚶🏻", "🚶🏼", "🚶🏽", "🚶🏾", "🚶🏿", "💃", "💃🏻", "💃🏼", "💃🏽", "💃🏾", "💃🏿", "🚣", "🚣🏻", "🚣🏼", "🚣🏽", "🚣🏾", "🚣🏿", "🏊", "🏊🏻", "🏊🏼", "🏊🏽", "🏊🏾", "🏊🏿", "🏄", "🏄🏻", "🏄🏼", "🏄🏽", "🏄🏾", "🏄🏿", "🛀", "🛀🏻", "🛀🏼", "🛀🏽", "🛀🏾", "🛀🏿", "🏂", "🎿", "⛄️", "🚴", "🚴🏻", "🚴🏼", "🚴🏽", "🚴🏾", "🚴🏿", "🚵", "🚵🏻", "🚵🏼", "🚵🏽", "🚵🏾", "🚵🏿", "🏇", "🏇🏻", "🏇🏼", "🏇🏽", "🏇🏾", "🏇🏿", "⛺️", "🎣", "⚽️", "🏀", "🏈", "⚾️", "🎾", "🏉", "⛳️", "🏆",	"🎽",	"🏁",	"🎹",	"🎸",	"🎻",	"🎷",	"🎺",	"🎵",	"🎶",	"🎼",	"🎧",	"🎤",	"🎭",	"🎫",	"🎩",	"🎪",	"🎬",	"🎨",	"🎯",	"🎱",	"🎳",	"🎰",	"🎲",	"🎮",	"🎴",	"🃏",	"🀄️",	"🎠",	"🎡",	"🎢",	"🚃",	"🚞",	"🚂",	"🚋",	"🚝",	"🚄",	"🚅",	"🚆",	"🚇",	"🚈",	"🚉",	"🚊",	"🚌",	"🚍",	"🚎",	"🚐",	"🚑",	"🚒",	"🚓",	"🚔",	"🚨",	"🚕",	"🚖",	"🚗",	"🚘",	"🚙",	"🚚",	"🚛",	"🚜",	"🚲",	"🚏",	"⛽️",	"🚧",	"🚦",	"🚥",	"🚀",	"🚁",	"✈️",	"💺",	"⚓️",	"🚢",	"🚤",	"⛵️",	"🚡",	"🚠",	"🚟",	"🛂",	"🛃",	"🛄",	"🛅",	"💴",	"💶",	"💷",	"💵",	"🗽",	"🗿",	"🌁",	"🗼",	"⛲️",	"🏰",	"🏯",	"🌇",	"🌆",	"🌃",	"🌉",	"🏠",	"🏡",	"🏢",	"🏬",	"🏭",	"🏣",	"🏤",	"🏥",	"🏦",	"🏨",	"🏩",	"💒",	"⛪️",	"🏪",	"🏫",	"🇦🇺",	"🇦🇹",	"🇧🇪",	"🇧🇷",	"🇨🇦",	"🇨🇱",	"🇨🇳",	"🇨🇴",	"🇩🇰",	"🇫🇮",	"🇫🇷",	"🇩🇪",	"🇭🇰",	"🇮🇳",	"🇮🇩",	"🇮🇪",	"🇮🇱",	"🇮🇹",	"🇯🇵",	"🇰🇷",	"🇲🇴",	"🇲🇾",	"🇲🇽",	"🇳🇱",	"🇳🇿",	"🇳🇴",	"🇵🇭",	"🇵🇱",	"🇵🇹",	"🇵🇷",	"🇷🇺",	"🇸🇦",	"🇸🇬",	"🇿🇦",	"🇪🇸",	"🇸🇪",	"🇨🇭",	"🇹🇷",	"🇬🇧",	"🇺🇸",	"🇦🇪",	"🇻🇳",	"⌚️",	"📱",	"📲",	"💻",	"⏰",	"⏳",	"⌛️",	"📷",	"📹",	"🎥",	"📺",	"📻",	"📟",	"📞",	"☎️",	"📠",	"💽",	"💾",	"💿",	"📀",	"📼",	"🔋",	"🔌",	"💡",	"🔦",	"📡",	"💳",	"💸",	"💰",	"💎",	"🌂",	"👝",	"👛",	"👜",	"💼",	"🎒",	"💄",	"👓",	"👒",	"👡",	"👠",	"👢",	"👞",	"👟",	"👙",	"👗",	"👘",	"👚",	"👕",	"👔",	"👖",	"🚪",	"🚿",	"🛁",	"🚽",	"💈",	"💉",	"💊",	"🔬",	"🔭",	"🔮",	"🔧",	"🔪",	"🔩",	"🔨",	"💣",	"🚬",	"🔫",	"🔖",	"📰",	"🔑",	"✉️",	"📩",	"📨",	"📧",	"📥",	"📤",	"📦",	"📯",	"📮",	"📪",	"📫",	"📬",	"📭",	"📄",	"📃",	"📑",	"📈",	"📉",	"📊",	"📅",	"📆",	"🔅",	"🔆",	"📜",	"📋",	"📖",	"📓",	"📔",	"📒",	"📕",	"📗",	"📘",	"📙",	"📚",	"📇",	"🔗",	"📎",	"📌",	"✂️",	"📐",	"📍",	"📏",	"🚩",	"📁",	"📂",	"✒️",	"✏️",	"📝", "🔏",	"🔐",	"🔒",	"🔓",	"📣",	"📢",	"🔈",	"🔉",	"🔊",	"🔇",	"💤",	"🔔",	"🔕",	"💭",	"💬",	"🚸",	"🔍",	"🔎",	"🚫",	"⛔️",	"📛",	"🚷",	"🚯",	"🚳",	"🚱",	"📵",	"🔞",	"🉑",	"🉐",	"💮",	"㊙️",	"㊗️",	"🈴",	"🈵",	"🈲",	"🈶",	"🈚️",	"🈸",	"🈺",	"🈷",	"🈹",	"🈳",	"🈂",	"🈁",	"🈯️",	"💹",	"❇️",	"✳️",	"❎",	"✅",	"✴️",	"📳",	"📴",	"🆚",	"🅰",	"🅱",	"🆎",	"🆑",	"🅾",	"🆘",	"🆔",	"🅿️",	"🚾",	"🆒",	"🆓",	"🆕",	"🆖",	"🆗",	"🆙",	"🏧",	"♈️",	"♉️",	"♊️",	"♋️",	"♌️",	"♍️",	"♎️",	"♏️",	"♐️",	"♑️",	"♒️",	"♓️",	"🚻",	"🚹",	"🚺",	"🚼",	"♿️",	"🚰",	"🚭",	"🚮",	"▶️",	"◀️",	"🔼",	"🔽",	"⏩",	"⏪",	"⏫",	"⏬",	"➡️",	"⬅️",	"⬆️",	"⬇️",	"↗️",	"↘️",	"↙️",	"↖️",	"↕️",	"↔️",	"🔄",	"↪️",	"↩️",	"⤴️",	"⤵️",	"🔀",	"🔁",	"🔂",	"#⃣",	"0⃣",	"1⃣",	"2⃣",	"3⃣",	"4⃣",	"5⃣",	"6⃣",	"7⃣",	"8⃣",	"9⃣",	"🔟",	"🔢",	"🔤",	"🔡",	"🔠",	"ℹ️",	"📶",	"🎦",	"🔣",	"➕",	"➖",	"〰",	"➗",	"✖️",	"✔️",	"🔃",	"™",	"©",	"®",	"💱",	"💲",	"➰",	"➿",	"〽️",	"❗️",	"❓",	"❕",	"❔",	"‼️",	"⁉️",	"❌",	"⭕️",	"💯",	"🔚",	"🔙",	"🔛",	"🔝",	"🔜",	"🌀",	"Ⓜ️",	"⛎",	"🔯",	"🔰",	"🔱",	"⚠️",	"♨️",	"♻️",	"💢",	"💠",	"♠️",	"♣️",	"♥️",	"♦️",	"☑️",	"⚪️",	"⚫️",	"🔘",	"🔴",	"🔵",	"🔺",	"🔻",	"🔸",	"🔹",	"🔶",	"🔷",	"▪️",	"▫️",	"⬛️",	"⬜️",	"◼️",	"◻️",	"◾️",	"◽️",	"🔲",	"🔳",	"🕐",	"🕑",	"🕒",	"🕓",	"🕔",	"🕕",	"🕖",	"🕗",	"🕘",	"🕙",	"🕚",	"🕛",	"🕜",	"🕝",	"🕞",	"🕟",	"🕠",	"🕡",	"🕢",	"🕣",	"🕤",	"🕥",	"🕦",	"🕧"];
const randInt = (min, max) => {
	return Math.floor(Math.random() * (max - min + 1)) + min;
};
let rr = randInt(55, 255);
let gg = randInt(55, 255);
let bb = randInt(55, 255);
// store the timeout so we can cancel it if we spin again or change the number of emojis mid-spin
let spinTimeout = false;

function spin(len = 12) {
	clearTimeout(spinTimeout);
	let segments = len;
	// give us a random angle to end on between 5 and 10 spins
	const winAngle = randInt(1800, 3600);
	const time = randInt(3000, 5000);

// set the animation attribute values to the win angle
	document.querySelector(".ballAnim").setAttribute("values", `0 50 50; ${winAngle} 50 50`);
	document.querySelector(".ballAnim").setAttribute("dur", `${time}ms`);
	const index = (segments - Math.round((winAngle % 360) / (360 / segments))) % segments;
	const winner =  document.querySelector(`[data-value="${index}"] > text`);
	const winName = winner.textContent.trim();
	let slicess = document.querySelectorAll(`.slice`);
	for (let i = 0; i < slicess.length; i++) {
		slicess[i].classList.remove("winner");
	}
	// start the animation
	document.querySelector(".ballAnim").beginElement();

spinTimeout = setTimeout(() => {
		confetti(document.querySelector("#c"), {type: [winName], flakes: 50, spin: false, fadeout: true, colors: ["gold", "goldenrod", "#000"], scale: 0.8, angle: 180, angleEmoji: 180});
		document.querySelector(`[data-value="${index}"]`).classList.add("winner");
	}, time);
}
document.querySelector("#c").addEventListener("click", () => {
	spin(numSlices);
});

Frontend Forever App