Emoji Spinner in Vanilla JavaScript

This code creates an Emoji Spinner in Vanilla JavaScript. It generates a spinning wheel with emojis. You can customize the number of slices and emojis. The wheel spins randomly and stops on a winner. It’s interactive and visually engaging.

You can use this code on websites or web applications to add fun and interactive elements. It enhances user engagement by offering a playful experience with emojis. It’s versatile and can be integrated into various projects for entertainment or gamification purposes.

How to Create Emoji Spinner In Vanilla JavaScript

1. Begin by setting up the HTML structure. Include a <div> element with an ID where the spinner will be placed. Optionally, include an input field to adjust the number of emojis on the spinner.

<div id="s">
	<svg id="c" viewBox="0 0 100 100"></svg>
</div>
<div class="increaseNumbers">
	<label for="percent">Emojis:</label>
	<input type="number" placeholder="slices" value="12" max="1180" min="2" />
</div>

2. Apply CSS styles to make the spinner visually appealing. You can customize the size, colors, and animations to match your design preferences.

body{
	margin: 0 auto;
	background: #f5f5f5 !important;
	font-family: 'Roboto', sans-serif;
   position: relative;
  min-height: 720px;
}
#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;
}

3. Load the following script just before closing the body tag:

<script src='https://cdn.jsdelivr.net/gh/leimapapa/vectorfetti/vectorfettiBeta.min.js'></script>

4. Finally, add the following JavaScript code to create the Emoji Spinner functionality. This code dynamically generates the spinner based on the number of emojis specified and handles the spinning animation.

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 createSpinner(svgElt, slices = 12, list = emojis) {
	clearTimeout(spinTimeout);
	const percentC = 100 / slices;
	const ang = 270 - percentC * 1.8;
	const cx = 50;
	const cy = 50;
	const r = 25;
	const sw = 30;
	const startAngle = (ang * Math.PI) / 180; // convert to radians
	const angle = (percentC / 100) * (2 * Math.PI);
	const x = cx + r * Math.cos(startAngle + angle);
	const y = cy + r * Math.sin(startAngle + angle);
	const largeArc = percentC > 50 ? 1 : 0;
	let d = `M ${cx + r * Math.cos(startAngle)} ${cy + r * Math.sin(startAngle)} A ${r} ${r} 0 ${largeArc} 1 ${x} ${y}`;
	let textPath = `<defs><path id="wordPath" fill="none" stroke="red" d="M 43 16 q 7 -1 14 0 m -13 6 q 6 -1 12 0 m -11 7 q 5 -1 10 0 m -9 5 q 4 -1 8 0" /></defs>`;
	svgElt.insertAdjacentHTML("afterbegin", `<g class="slicesHere"></g>`);
	svgElt.insertAdjacentHTML("afterbegin", textPath);
	let sidewaysText = false;
	let sidewaysTextTransform = "";
	let textY = 15;
	let textSize = 200 / slices;
	if (textSize >= 20) {
		textSize = 20;
	}
	if (slices <= 8) {
		textY = 23;
	}
	if (sidewaysText) {
		sidewaysTextTransform = ` transform="rotate(-90 50 25)"`;
		textY = 25;
		textSize = 2;
	}
	for (let i = 0; i < slices; i++) {
		let sliceColor = `rgb(${((i + 1) * rr) % 255}, ${((i + 1) * gg) % 255}, ${((i + 1) * bb) % 255})`;
		let path = `<g transform="rotate(${(360 / slices) * i} ${cx} ${cy})" class="slice"  data-value="${i}"><path class="slicePath" d="${d}" stroke="${sliceColor}" stroke-width="${sw}" fill="none"/><text x="50" y="${textY}" font-size="${textSize}" text-anchor="middle" textLength="25" dominant-baseline="middle"${sidewaysTextTransform}>${list[i % list.length]}</text></g>`;
		svgElt.querySelector(".slicesHere").insertAdjacentHTML("beforeend", path);
	}
	let spinAnimation = `<animateTransform class="ballAnim" attributeName="transform" attributeType="XML" type="rotate" values="0 50 50; 3600 50 50" dur="4000ms" begin="indefinite" repeatCount="1" fill="freeze" keyTimes="0;1" keySplines="0.25 0.1 0.25 1" calcMode="spline" />`;
	svgElt.querySelector(".slicesHere").insertAdjacentHTML("afterbegin", spinAnimation);
	let spinner = `<g class="spinner"><circle cx="50" cy="50" r="8" /><path d="M50 38 l 2 5 h-4z" fill="#000" /></g>`;
	svgElt.insertAdjacentHTML("beforeend", spinner);
}
createSpinner(document.querySelector("#c"), 12);
let numSlices = 12;
const allInputs = document.querySelectorAll("input");
allInputs[0].addEventListener("input", () => {
	const svgElt = document.querySelector("#c");
	while (svgElt.firstChild) {
		svgElt.removeChild(svgElt.lastChild);
	}
	numSlices = allInputs[0].value * 1;
	createSpinner(svgElt, numSlices);
});

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);
});

That’s all! hopefully, you have successfully created Emoji Spinner In Vanilla Javascript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.