Emoji Spinner in Vanilla JavaScript

Emoji Spinner in Vanilla JavaScript
Code Snippet:Emoji Spinner
Author: leimapapa
Published: March 31, 2024
Last Updated: March 31, 2024
Downloads: 90
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X