eRandomGenerator

<!-- Navigation -->
<nav>
    <div class="container">
        <ul>
            <li><a href="https://erandomgenerator.com">Home</a></li>
            <li><a href="https://erandomgenerator.com/tools">All Tools</a></li>
            <li><a href="https://erandomgenerator.com/categories">Categories</a></li>
            <li><a href="https://erandomgenerator.com/about">About</a></li>
            <li><a href="https://erandomgenerator.com/blog">Blog</a></li>
            <li><a href="https://erandomgenerator.com/contact">Contact</a></li>
        </ul>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <h1>Random Emoji Generator Wheel</h1>
        <p>Create fun emoji combinations instantly with our interactive wheel spinner. Customize, save, and share your emoji creations with just a few clicks!</p>
        <a href="#tool" class="cta-button">Generate Emojis Now</a>
    </div>
</section>

<!-- Tool Interface -->
<section class="tool-interface" id="tool">
    <div class="container">
        <div class="tool-container">
            <!-- Controls Panel -->
            <div class="controls-panel">
                <h2>Customize Your Emojis</h2>

                <div class="control-group">
                    <label for="quantity">Number of Emojis: <span class="range-value" id="quantity-value">5</span></label>
                    <input type="range" id="quantity" min="1" max="20" value="5">
                </div>

                <div class="control-group">
                    <label for="format">Output Format:</label>
                    <select id="format">
                        <option value="emoji">Emoji Only</option>
                        <option value="colon">Colon Format (:smile:)</option>
                        <option value="html">HTML Entity</option>
                        <option value="unicode">Unicode Code</option>
                    </select>
                </div>

                <div class="control-group">
                    <label>Emoji Categories:</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="smileys" checked>
                            <label for="smileys">Smileys</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="animals" checked>
                            <label for="animals">Animals</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="food" checked>
                            <label for="food">Food</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="activities" checked>
                            <label for="activities">Activities</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="travel" checked>
                            <label for="travel">Travel</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="objects" checked>
                            <label for="objects">Objects</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="symbols" checked>
                            <label for="symbols">Symbols</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="flags" checked>
                            <label for="flags">Flags</label>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label for="animation">Animation Speed:</label>
                    <select id="animation">
                        <option value="fast">Fast</option>
                        <option value="medium" selected>Medium</option>
                        <option value="slow">Slow</option>
                    </select>
                </div>

                <button class="cta-button" id="generate-btn" style="width: 100%; margin-top: 10px;">Generate Emojis</button>
            </div>

            <!-- Wheel Container -->
            <div class="wheel-container">
                <div class="wheel-wrapper">
                    <div class="wheel-pointer"></div>
                    <div class="wheel" id="emoji-wheel"></div>
                </div>
                <button class="spin-button" id="spin-btn">Spin the Wheel</button>

                <!-- History Section -->
                <div class="history-section">
                    <h3>Recent Generations</h3>
                    <div class="history-list" id="history-list">
                        <!-- History items will be added here -->
                    </div>
                </div>
            </div>

            <!-- Results Container -->
            <div class="results-container">
                <h2>Generated Emojis</h2>
                <div class="emoji-results" id="emoji-results">
                    <!-- Generated emojis will appear here -->
                </div>

                <div class="action-buttons">
                    <button class="action-button" id="copy-btn">
                        <i class="fas fa-copy"></i> Copy
                    </button>
                    <button class="action-button" id="save-btn">
                        <i class="fas fa-save"></i> Save
                    </button>
                    <button class="action-button" id="share-btn">
                        <i class="fas fa-share-alt"></i> Share
                    </button>
                    <button class="action-button secondary" id="export-txt">
                        <i class="fas fa-file-alt"></i> TXT
                    </button>
                    <button class="action-button secondary" id="export-csv">
                        <i class="fas fa-file-csv"></i> CSV
                    </button>
                    <button class="action-button secondary" id="export-json">
                        <i class="fas fa-file-code"></i> JSON
                    </button>
                </div>

                <!-- Favorites Section -->
                <div class="history-section" style="margin-top: 30px;">
                    <h3>Saved Favorites</h3>
                    <div class="history-list" id="favorites-list">
                        <!-- Favorite items will be added here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SEO Article -->
<section class="seo-article">
    <div class="container article-container">
        <h2>Random Emoji Generator: Create Fun and Unique Emoji Combinations</h2>

        <p>Emojis have become an integral part of our digital communication, adding emotion, personality, and context to our messages. Whether you're looking to spice up your social media posts, create engaging content, or simply have fun with digital expressions, our <strong>random emoji generator</strong> is the perfect tool for you. This innovative <strong>emoji wheel spinner</strong> allows you to generate random emoji combinations with just a click, offering endless possibilities for creative expression.</p>

        <p>Our <strong>emoji creator tool</strong> is designed with user experience in mind, providing a seamless interface that makes generating random emojis both fun and functional. Unlike other <strong>random emoji generators</strong> that simply display a list of emojis, our interactive wheel adds an element of excitement and surprise to the process. With the ability to customize categories, quantity, and output format, you have complete control over your <strong>emoji combinations</strong>.</p>

        <h3>The Benefits of Using a Random Emoji Generator</h3>

        <p>There are numerous advantages to using our <strong>emoji wheel spinner</strong> for your digital communication needs:</p>

        <ul>
            <li><strong>Creativity Enhancement:</strong> Break out of your emoji rut by discovering new and unexpected combinations that you might not have considered otherwise.</li>
            <li><strong>Time Efficiency:</strong> Quickly generate multiple emoji options without scrolling through endless lists, saving you valuable time.</li>
            <li><strong>Content Creation:</strong> Content creators, social media managers, and marketers can use our <strong>random emoji generator</strong> to add visual interest to posts and increase engagement.</li>
            <li><strong>Language Learning:</strong> Language learners can use emojis as visual aids to associate with vocabulary words or concepts.</li>
            <li><strong>Fun and Entertainment:</strong> Simply spinning the wheel can be an enjoyable activity, perfect for breaking the ice or starting conversations.</li>
        </ul>

        <h3>Practical Use Cases for Random Emoji Generation</h3>

        <p>Our <strong>emoji creator tool</strong> has a wide range of applications across various contexts:</p>

        <ul>
            <li><strong>Social Media Content:</strong> Enhance your posts, stories, and comments with unique emoji combinations that stand out in crowded feeds.</li>
            <li><strong>Marketing Campaigns:</strong> Create eye-catching promotional materials with emoji elements that resonate with your target audience.</li>
            <li><strong>Educational Materials:</strong> Teachers and educators can use emojis to make learning materials more engaging and memorable for students.</li>
            <li><strong>Team Building:</strong> Use the emoji wheel as a fun icebreaker activity in team meetings or virtual gatherings.</li>
            <li><strong>Personal Expression:</strong> Add personality to your messages, emails, and digital communications with carefully selected emoji combinations.</li>
        </ul>

        <h3>How to Use Our Random Emoji Generator Wheel</h3>

        <p>Using our <strong>emoji wheel spinner</strong> is simple and intuitive, even for first-time users. Follow these steps to create your own unique emoji combinations:</p>

        <ol>
            <li><strong>Customize Your Settings:</strong> Use the control panel to select the number of emojis you want to generate, choose your preferred output format, and select which emoji categories to include.</li>
            <li><strong>Spin the Wheel:</strong> Click the "Spin the Wheel" button to start the animation. The wheel will spin and gradually slow down before landing on a random emoji.</li>
            <li><strong>Generate Multiple Emojis:</strong> For multiple emojis, use the "Generate Emojis" button to create a set based on your preferences without spinning the wheel.</li>
            <li><strong>Copy, Save, or Share:</strong> Once you have your desired emojis, use the action buttons to copy them to your clipboard, save them to your favorites, or share them on social media.</li>
            <li><strong>Export Your Results:</strong> If you need your emojis in a specific format for further use, utilize our export options to download them as TXT, CSV, or JSON files.</li>
        </ol>

        <h3>Advanced Features for Power Users</h3>

        <p>Our <strong>random emoji generator</strong> includes several advanced features that set it apart from basic emoji tools:</p>

        <ul>
            <li><strong>Customizable Output Formats:</strong> Choose from emoji-only display, colon format for coding, HTML entities for web development, or Unicode codes for technical applications.</li>
            <li><strong>Category Filtering:</strong> Select specific emoji categories to focus on, such as smileys, animals, food, activities, travel, objects, symbols, or flags.</li>
            <li><strong>History Tracking:</strong> Keep track of your recent emoji generations with our built-in history feature, allowing you to revisit and reuse previous combinations.</li>
            <li><strong>Favorites System:</strong> Save your favorite emoji combinations for quick access later, perfect for emojis you use frequently or particularly enjoy.</li>
            <li><strong>Export Functionality:</strong> Export your generated emojis in multiple formats, making it easy to integrate them into various projects and workflows.</li>
        </ul>

        <p>Whether you're a casual user looking to add some fun to your messages or a professional seeking efficient ways to incorporate emojis into your work, our <strong>random emoji generator wheel</strong> provides the perfect balance of simplicity and functionality. With its intuitive interface, customizable options, and advanced features, it's the ultimate tool for all your emoji generation needs.</p>

        <p>Start exploring the world of emojis in a whole new way with our innovative <strong>emoji wheel spinner</strong>. Spin the wheel, discover new combinations, and let your creativity flow with endless possibilities at your fingertips!</p>
    </div>
</section>

<!-- Q&A Section -->
<section class="qa-section">
    <div class="container qa-container">
        <h2>Frequently Asked Questions</h2>

        <div class="qa-item">
            <div class="question">How does the Random Emoji Generator Wheel work?</div>
            <div class="answer">
                <p>Our Random Emoji Generator Wheel uses a sophisticated algorithm to randomly select emojis based on your chosen categories and preferences. When you spin the wheel, it applies physics-based animation to create a realistic spinning effect before gradually slowing down and landing on a random emoji. The "Generate Emojis" button creates multiple emojis at once without the spinning animation, perfect for when you need several emojis quickly.</p>
            </div>
        </div>

        <div class="qa-item">
            <div class="question">Can I save my favorite emoji combinations for later use?</div>
            <div class="answer">
                <p>Yes! Our tool includes a favorites feature that allows you to save your preferred emoji combinations. Simply click the "Save" button after generating emojis, and they'll be stored in your browser's local storage. This means your favorites will be available even after you close the browser, though they will only be accessible on the same device and browser where you saved them.</p>
            </div>
        </div>

        <div class="qa-item">
            <div class="question">What output formats are available for the generated emojis?</div>
            <div class="answer">
                <p>Our Random Emoji Generator offers four different output formats to suit various needs: Emoji Only (displays the actual emoji characters), Colon Format (shows emojis as :smile: which is useful for coding and markdown), HTML Entity (provides the HTML code for web development), and Unicode Code (displays the technical Unicode value of each emoji). You can easily switch between these formats using the dropdown menu in the control panel.</p>
            </div>
        </div>

        <div class="qa-item">
            <div class="question">Is there a limit to how many emojis I can generate at once?</div>
            <div class="answer">
                <p>You can generate between 1 and 20 emojis at a single time using our tool. This range was carefully chosen to balance usability with performance. Generating too many emojis at once could overwhelm the interface and make it difficult to work with the results, while too few might not meet your needs. If you require more than 20 emojis, you can simply generate multiple batches and combine them.</p>
            </div>
        </div>

        <div class="qa-item">
            <div class="question">How does the export functionality work, and what can I do with the exported files?</div>
            <div class="answer">
                <p>Our export functionality allows you to download your generated emojis in three different formats: TXT (plain text), CSV (comma-separated values), and JSON (JavaScript Object Notation). The TXT format is perfect for simple copying and pasting into documents or messages. The CSV format is ideal for importing into spreadsheet applications like Excel or Google Sheets for further analysis or organization. The JSON format is designed for developers who want to integrate the emoji data into applications or websites programmatically.</p>
            </div>
        </div>

        <div class="qa-item">
            <div class="question">Is my data private when using the Random Emoji Generator?</div>
            <div class="answer">
                <p>Absolutely. Our Random Emoji Generator operates entirely within your browser using client-side JavaScript. This means that no data about your emoji generations, favorites, or settings is sent to our servers or any third parties. Your privacy is important to us, and we've designed the tool to ensure that all your activity remains local to your device. The only exception is if you choose to share your emojis on social media, in which case only the specific content you choose to share will be sent to the respective social media platform.</p>
            </div>
        </div>

        <div class="qa-item">
            <div class="question">How does this tool compare to other emoji generators available online?</div>
            <div class="answer">
                <p>Our Random Emoji Generator Wheel stands out from other online emoji tools in several ways. First, the interactive wheel adds a fun, gamified element that makes generating emojis more engaging. Second, our tool offers more customization options, including category filtering, multiple output formats, and export functionality. Third, we provide features like history tracking and favorites that aren't commonly found in basic emoji generators. Finally, our tool is completely free to use, contains no advertisements, and respects your privacy by not collecting or storing any personal data.</p>
            </div>
        </div>
    </div>
</section>

<!-- Related Tools -->
<section class="related-tools">
    <div class="container">
        <h2>Related Tools</h2>
        <div class="tools-grid">
            <div class="tool-card">
                <i class="fas fa-palette"></i>
                <h3>Random Color Generator</h3>
                <p>Generate random colors in various formats for your design projects.</p>
                <a href="https://erandomgenerator.com/random-color-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-font"></i>
                <h3>Random Text Generator</h3>
                <p>Create random text for placeholder content or testing purposes.</p>
                <a href="https://erandomgenerator.com/random-text-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-hashtag"></i>
                <h3>Random Hashtag Generator</h3>
                <p>Generate trending hashtags for your social media posts.</p>
                <a href="https://erandomgenerator.com/random-hashtag-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-dice"></i>
                <h3>Random Number Generator</h3>
                <p>Generate random numbers within custom ranges for games or statistics.</p>
                <a href="https://erandomgenerator.com/random-number-generator">Try Now</a>
            </div>
        </div>
    </div>
</section>

<!-- Tool Directory -->
<section class="tool-directory">
    <div class="container">
        <h2>All Tools</h2>
        <div class="directory-categories">
            <div class="category-filter">
                <button class="active">All Tools</button>
                <button>Text Generators</button>
                <button>Number Generators</button>
                <button>Design Tools</button>
                <button>Web Development</button>
                <button>Games & Fun</button>
            </div>
        </div>
        <div class="tools-grid">
            <div class="tool-card">
                <i class="fas fa-dice"></i>
                <h3>Random Number Generator</h3>
                <p>Generate random numbers within custom ranges.</p>
                <a href="https://erandomgenerator.com/random-number-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-list-ol"></i>
                <h3>Random List Generator</h3>
                <p>Create randomized lists from your input items.</p>
                <a href="https://erandomgenerator.com/random-list-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-palette"></i>
                <h3>Random Color Generator</h3>
                <p>Generate random colors in various formats.</p>
                <a href="https://erandomgenerator.com/random-color-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-font"></i>
                <h3>Random Text Generator</h3>
                <p>Create random text for placeholder content.</p>
                <a href="https://erandomgenerator.com/random-text-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-hashtag"></i>
                <h3>Random Hashtag Generator</h3>
                <p>Generate trending hashtags for social media.</p>
                <a href="https://erandomgenerator.com/random-hashtag-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-quote-right"></i>
                <h3>Random Quote Generator</h3>
                <p>Get inspired with random quotes from famous people.</p>
                <a href="https://erandomgenerator.com/random-quote-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-image"></i>
                <h3>Random Image Generator</h3>
                <p>Generate placeholder images for your projects.</p>
                <a href="https://erandomgenerator.com/random-image-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-user"></i>
                <h3>Random Name Generator</h3>
                <p>Generate random names for characters or profiles.</p>
                <a href="https://erandomgenerator.com/random-name-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-map-marker-alt"></i>
                <h3>Random Address Generator</h3>
                <p>Create random addresses for testing purposes.</p>
                <a href="https://erandomgenerator.com/random-address-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-envelope"></i>
                <h3>Random Email Generator</h3>
                <p>Generate random email addresses for testing.</p>
                <a href="https://erandomgenerator.com/random-email-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-lock"></i>
                <h3>Random Password Generator</h3>
                <p>Create secure random passwords.</p>
                <a href="https://erandomgenerator.com/random-password-generator">Try Now</a>
            </div>
            <div class="tool-card">
                <i class="fas fa-calendar-alt"></i>
                <h3>Random Date Generator</h3>
                <p>Generate random dates within custom ranges.</p>
                <a href="https://erandomgenerator.com/random-date-generator">Try Now</a>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer>
    <div class="container">
        <div class="footer-container">
            <div class="footer-column">
                <h3>Tools</h3>
                <ul>
                    <li><a href="https://erandomgenerator.com/random-number-generator">Random Number Generator</a></li>
                    <li><a href="https://erandomgenerator.com/random-color-generator">Random Color Generator</a></li>
                    <li><a href="https://erandomgenerator.com/random-text-generator">Random Text Generator</a></li>
                    <li><a href="https://erandomgenerator.com/random-name-generator">Random Name Generator</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Categories</h3>
                <ul>
                    <li><a href="https://erandomgenerator.com/categories/text-generators">Text Generators</a></li>
                    <li><a href="https://erandomgenerator.com/categories/number-generators">Number Generators</a></li>
                    <li><a href="https://erandomgenerator.com/categories/design-tools">Design Tools</a></li>
                    <li><a href="https://erandomgenerator.com/categories/web-development">Web Development</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Company</h3>
                <ul>
                    <li><a href="https://erandomgenerator.com/about">About Us</a></li>
                    <li><a href="https://erandomgenerator.com/contact">Contact</a></li>
                    <li><a href="https://erandomgenerator.com/privacy">Privacy Policy</a></li>
                    <li><a href="https://erandomgenerator.com/terms">Terms of Service</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Connect</h3>
                <ul>
                    <li><a href="https://twitter.com/erandomgenerator"><i class="fab fa-twitter"></i> Twitter</a></li>
                    <li><a href="https://facebook.com/erandomgenerator"><i class="fab fa-facebook"></i> Facebook</a></li>
                    <li><a href="https://instagram.com/erandomgenerator"><i class="fab fa-instagram"></i> Instagram</a></li>
                    <li><a href="https://erandomgenerator.com/blog">Blog</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 eRandomGenerator. All rights reserved.</p>
        </div>
    </div>
</footer>

<!-- Toast Notification -->
<div class="toast" id="toast"></div>

<script>
    // Emoji data by category
    const emojiData = {
        smileys: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯', '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠'],
        animals: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐽', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔', '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐜', '🦟', '🦗', '🕷', '🕸', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠', '🐟', '🐬', '🐳', '🐋', '🦈', '🐊', '🐅', '🐆', '🦓', '🦍', '🦧', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🦬', '🐃', '🐂', '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩', '🦮', '🐈', '🐓', '🦃', '🦚', '🦜', '🦢', '🦩', '🕊', '🐇', '🦝', '🦨', '🦡', '🦫', '🦦', '🦥', '🐁', '🐀', '🐿'],
        food: ['🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬', '🥒', '🌶', '🫑', '🌽', '🥕', '🫒', '🧄', '🧅', '🥔', '🍠', '🥐', '🥯', '🍞', '🥖', '🥨', '🧀', '🥚', '🍳', '🧈', '🥞', '🧇', '🥓', '🥩', '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🥪', '🥙', '🧆', '🌮', '🌯', '🫔', '🥗', '🥘', '🫕', '🥫', '🍝', '🍜', '🍲', '🍛', '🍣', '🍱', '🥟', '🦪', '🍤', '🍙', '🍚', '🍘', '🍥', '🥠', '🥮', '🍢', '🍡', '🍧', '🍨', '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬', '🍫', '🍿', '🍩', '🍪', '🌰', '🥜', '🍯', '🥛', '🍼', '🫖', '☕', '🍵', '🧃', '🥤', '🧋', '🍶', '🍺', '🍻', '🥂', '🍷', '🥃', '🍸', '🍹', '🧉', '🍾', '🧊', '🥄', '🍴', '🍽', '🥣', '🥡', '🥢', '🧂'],
        activities: ['⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱', '🪀', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🪃', '🥅', '⛳', '🪁', '🏹', '🎣', '🤿', '🥊', '🥋', '🎽', '🛹', '🛼', '🛷', '⛸', '🥌', '🎿', '⛷', '🏂', '🪂', '🏋️', '🏋️‍♂️', '🏋️‍♀️', '🤼', '🤼‍♂️', '🤼‍♀️', '🤸', '🤸‍♂️', '🤸‍♀️', '⛹️', '⛹️‍♂️', '⛹️‍♀️', '🤺', '🤾', '🤾‍♂️', '🤾‍♀️', '🏌️', '🏌️‍♂️', '🏌️‍♀️', '🏇', '🧘', '🧘‍♂️', '🧘‍♀️', '🏄', '🏄‍♂️', '🏄‍♀️', '🏊', '🏊‍♂️', '🏊‍♀️', '🤽', '🤽‍♂️', '🤽‍♀️', '🚣', '🚣‍♂️', '🚣‍♀️', '🧗', '🧗‍♂️', '🧗‍♀️', '🚴', '🚴‍♂️', '🚴‍♀️', '🚵', '🚵‍♂️', '🚵‍♀️'],
        travel: ['🚗', '🚕', '🚙', '🚌', '🚎', '🏎', '🚓', '🚑', '🚒', '🚐', '🛻', '🚚', '🚛', '🚜', '🦯', '🦽', '🦼', '🛴', '🚲', '🛵', '🏍', '🛺', '🚨', '🚔', '🚍', '🚘', '🚖', '🚡', '🚠', '🚟', '🚃', '🚋', '🚞', '🚝', '🚄', '🚅', '🚈', '🚂', '🚆', '🚇', '🚊', '🚉', '✈️', '🛫', '🛬', '🛩', '💺', '🚁', '🚟', '🚀', '🛸', '🛶', '⛵', '🚤', '🛥', '🛳', '⛴', '🚢', '⚓', '⛽', '🚧', '🚦', '🚥', '🚏', '🗺', '🗿', '🗽', '🗼', '🏰', '🏯', '🏟', '🎡', '🎢', '🎠', '⛲', '⛱', '🏖', '🏝', '🏜', '🌋', '⛰', '🏔', '🗻', '🏕', '⛺', '🛖', '🏠', '🏡', '🏘', '🏚', '🏗', '🏭', '🏢', '🏬', '🏣', '🏤', '🏥', '🏦', '🏨', '🏪', '🏫', '🏩', '💒', '🏛', '⛪', '🕌', '🕍', '🛕', '🕋', '⛩', '🛤', '🛣', '🗾', '🎑', '🏞', '🌅', '🌄', '🌠', '🎇', '🎆', '🌇', '🌆', '🏙', '🌃', '🌌', '🌉', '🌁'],
        objects: ['⌚', '📱', '📲', '💻', '⌨️', '🖥', '🖨', '🖱', '🖲', '🕹', '🗜', '💽', '💾', '💿', '📀', '📼', '📷', '📸', '📹', '🎥', '📽', '🎞', '📞', '☎️', '📟', '📠', '📺', '📻', '🎙', '🎚', '🎛', '🧭', '⏱', '⏲', '⏰', '🕰', '⌛', '⏳', '📡', '🔋', '🔌', '💡', '🔦', '🕯', '🪔', '🧯', '🛢', '💸', '💵', '💴', '💶', '💷', '🪙', '💰', '💳', '💎', '⚖', '🪜', '🧰', '🪛', '🔧', '🔨', '⚒', '🛠', '⛏', '🪚', '🔩', '⚙', '🪤', '🧱', '⛓', '🧲', '🔫', '💣', '🧨', '🪓', '🔪', '🗡', '⚔', '🛡', '🚬', '⚰', '🪦', '⚱', '🏺', '🔮', '📿', '🧿', '💈', '⚗', '🔭', '🔬', '🕳', '🩹', '🩺', '💊', '💉', '🩸', '🧬', '🦠', '🧹', '🪠', '🧺', '🧻', '🚽', '🚰', '🚿', '🛁', '🛀', '🧼', '🪥', '🪒', '🧽', '🪣', '🧴', '🛎', '🔑', '🗝', '🚪', '🪑', '🛋', '🛏', '🛌', '🧸', '🪆', '🖼', '🪞', '🪟', '🛍', '🛒', '🎁', '🎈', '🎏', '🎀', '🪄', '🪅', '🎊', '🎉', '🎎', '🏮', '🎐', '🧧', '✉️', '📩', '📨', '📧', '💌', '📥', '📤', '📦', '🏷', '🪧', '📪', '📫', '📬', '📭', '📯', '📜', '📃', '📄', '📑', '🧾', '📊', '📈', '📉', '🗒', '🗓', '📆', '📅', '🗑', '📇', '🗃', '🗳', '🗄', '📋', '📁', '📂', '🗂', '🗞', '📰', '📓', '📔', '📒', '📕', '📗', '📘', '📙', '📚', '📖', '🔖', '🧷', '🔗', '📎', '🖇', '📐', '📏', '🧮', '📌', '✂️', '🖊', '🖋', '✒️', '🖌', '🖍', '📝', '✏️', '🔍', '🔎'],
        symbols: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮', '✝', '☪', '🕉', '☸', '✡', '🔯', '🕎', '☯', '☦', '🛐', '⛎', '♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐', '♑', '♒', '♓', '🆔', '⚛', '🉑', '☢', '☣', '📴', '📳', '🈶', '🈚', '🈸', '🈺', '🈷', '✴', '🆚', '💮', '🉐', '㊙', '㊗', '🈴', '🈵', '🈹', '🈲', '🅰', '🅱', '🆎', '🆑', '🅾', '🆘', '❌', '⭕', '🛑', '⛔', '📛', '🚫', '💯', '💢', '♨', '🚷', '🚯', '🚳', '🚱', '🔞', '📵', '🚭', '❗', '❕', '❓', '❔', '‼', '⁉', '🔅', '🔆', '〽', '⚠', '🚸', '🔱', '⚜', '🔰', '♻', '✅', '🈯', '💹', '❇', '✳', '❎', '🌐', '💠', 'Ⓜ', '🌀', '💤', '🏧', '🚾', '♿', '🅿', '🛗', '🛄', '🔣', '⚛', '🉑', '☢', '☣', '📴', '📳', '🈶', '🈚', '🈸', '🈺', '🈷', '✴', '🆚', '💮', '🉐', '㊙', '㊗', '🈴', '🈵', '🈹', '🈲', '🅰', '🅱', '🆎', '🆑', '🅾', '🆘', '❌', '⭕', '🛑', '⛔', '📛', '🚫', '💯', '💢', '♨', '🚷', '🚯', '🚳', '🚱', '🔞', '📵', '🚭', '❗', '❕', '❓', '❔', '‼', '⁉', '🔅', '🔆', '〽', '⚠', '🚸', '🔱', '⚜', '🔰', '♻', '✅', '🈯', '💹', '❇', '✳', '❎', '🌐', '💠', 'Ⓜ', '🌀', '💤', '🏧', '🚾', '♿', '🅿', '🛗', '🛄', '🔣', '🔤', '🅰', '🆎', '🆑', '🅾', '🆘', '❌', '⭕', '🛑', '⛔', '📛', '🚫', '💯', '💢', '♨', '🚷', '🚯', '🚳', '🚱', '🔞', '📵', '🚭', '❗', '❕', '❓', '❔', '‼', '⁉', '🔅', '🔆', '〽', '⚠', '🚸', '🔱', '⚜', '🔰', '♻', '✅', '🈯', '💹', '❇', '✳', '❎', '🌐', '💠', 'Ⓜ', '🌀', '💤', '🏧', '🚾', '♿', '🅿', '🛗', '🛄', '🔣'],
        flags: ['🏁', '🚩', '🎌', '🏴', '🏳️', '🏳️‍🌈', '🏳️‍⚧️', '🏴‍☠️', '🇦🇨', '🇦🇩', '🇦🇪', '🇦🇫', '🇦🇬', '🇦🇮', '🇦🇱', '🇦🇲', '🇦🇴', '🇦🇶', '🇦🇷', '🇦🇸', '🇦🇹', '🇦🇺', '🇦🇼', '🇦🇽', '🇦🇿', '🇧🇦', '🇧🇧', '🇧🇩', '🇧🇪', '🇧🇫', '🇧🇬', '🇧🇭', '🇧🇮', '🇧🇯', '🇧🇱', '🇧🇲', '🇧🇳', '🇧🇴', '🇧🇶', '🇧🇷', '🇧🇸', '🇧🇹', '🇧🇻', '🇧🇼', '🇧🇾', '🇧🇿', '🇨🇦', '🇨🇨', '🇨🇩', '🇨🇫', '🇨🇬', '🇨🇭', '🇨🇮', '🇨🇰', '🇨🇱', '🇨🇲', '🇨🇳', '🇨🇴', '🇨🇵', '🇨🇷', '🇨🇺', '🇨🇻', '🇨🇼', '🇨🇽', '🇨🇾', '🇨🇿', '🇩🇪', '🇩🇬', '🇩🇯', '🇩🇰', '🇩🇲', '🇩🇴', '🇩🇿', '🇪🇦', '🇪🇨', '🇪🇪', '🇪🇬', '🇪🇭', '🇪🇷', '🇪🇸', '🇪🇹', '🇪🇺', '🇫🇮', '🇫🇯', '🇫🇰', '🇫🇲', '🇫🇴', '🇫🇷', '🇬🇦', '🇬🇧', '🇬🇩', '🇬🇪', '🇬🇫', '🇬🇬', '🇬🇭', '🇬🇮', '🇬🇱', '🇬🇲', '🇬🇳', '🇬🇵', '🇬🇶', '🇬🇷', '🇬🇸', '🇬🇹', '🇬🇺', '🇬🇼', '🇬🇾', '🇭🇰', '🇭🇲', '🇭🇳', '🇭🇷', '🇭🇹', '🇭🇺', '🇮🇨', '🇮🇩', '🇮🇪', '🇮🇱', '🇮🇲', '🇮🇳', '🇮🇴', '🇮🇶', '🇮🇷', '🇮🇸', '🇮🇹', '🇯🇪', '🇯🇲', '🇯🇴', '🇯🇵', '🇰🇪', '🇰🇬', '🇰🇭', '🇰🇮', '🇰🇲', '🇰🇳', '🇰🇵', '🇰🇷', '🇰🇼', '🇰🇾', '🇰🇿', '🇱🇦', '🇱🇧', '🇱🇨', '🇱🇮', '🇱🇰', '🇱🇷', '🇱🇸', '🇱🇹', '🇱🇺', '🇱🇻', '🇱🇾', '🇲🇦', '🇲🇨', '🇲🇩', '🇲🇪', '🇲🇫', '🇲🇬', '🇲🇭', '🇲🇰', '🇲🇱', '🇲🇲', '🇲🇳', '🇲🇴', '🇲🇵', '🇲🇶', '🇲🇷', '🇲🇸', '🇲🇹', '🇲🇺', '🇲🇻', '🇲🇼', '🇲🇽', '🇲🇾', '🇲🇿', '🇳🇦', '🇳🇨', '🇳🇪', '🇳🇫', '🇳🇬', '🇳🇮', '🇳🇱', '🇳🇴', '🇳🇵', '🇳🇷', '🇳🇺', '🇳🇿', '🇴🇲', '🇵🇦', '🇵🇪', '🇵🇫', '🇵🇬', '🇵🇭', '🇵🇰', '🇵🇱', '🇵🇲', '🇵🇳', '🇵🇷', '🇵🇸', '🇵🇹', '🇵🇼', '🇵🇾', '🇶🇦', '🇷🇪', '🇷🇴', '🇷🇸', '🇷🇺', '🇷🇼', '🇸🇦', '🇸🇧', '🇸🇨', '🇸🇩', '🇸🇪', '🇸🇬', '🇸🇭', '🇸🇮', '🇸🇯', '🇸🇰', '🇸🇱', '🇸🇲', '🇸🇳', '🇸🇴', '🇸🇷', '🇸🇸', '🇸🇹', '🇸🇻', '🇸🇽', '🇸🇾', '🇸🇿', '🇹🇨', '🇹🇩', '🇹🇫', '🇹🇬', '🇹🇭', '🇹🇯', '🇹🇰', '🇹🇱', '🇹🇲', '🇹🇳', '🇹🇴', '🇹🇷', '🇹🇹', '🇹🇻', '🇹🇼', '🇹🇿', '🇺🇦', '🇺🇬', '🇺🇲', '🇺🇳', '🇺🇸', '🇺🇾', '🇺🇿', '🇻🇦', '🇻🇨', '🇻🇪', '🇻🇬', '🇻🇮', '🇻🇳', '🇻🇺', '🇼🇫', '🇼🇸', '🇽🇰', '🇾🇪', '🇾🇹', '🇿🇦', '🇿🇲', '🇿🇼']
    };

    // Emoji to colon format mapping
    const emojiToColon = {
        '😀': ':grinning_face:',
        '😃': ':grinning_face_with_big_eyes:',
        '😄': ':grinning_face_with_smiling_eyes:',
        '😁': ':beaming_face_with_smiling_eyes:',
        '😆': ':grinning_squinting_face:',
        '😅': ':grinning_face_with_sweat:',
        '😂': ':face_with_tears_of_joy:',
        '🤣': ':rolling_on_the_floor_laughing:',
        '😊': ':smiling_face_with_smiling_eyes:',
        '😇': ':smiling_face_with_halo:',
        '🙂': ':slightly_smiling_face:',
        '🙃': ':upside-down_face:',
        '😉': ':winking_face:',
        '😌': ':relieved_face:',
        '😍': ':smiling_face_with_heart-eyes:',
        '🥰': ':smiling_face_with_hearts:',
        '😘': ':face_blowing_a_kiss:',
        '😗': ':kissing_face:',
        '😙': ':kissing_face_with_smiling_eyes:',
        '😚': ':kissing_face_with_closed_eyes:',
        '😋': ':face_savoring_food:',
        '😛': ':face_with_tongue:',
        '😝': ':squinting_face_with_tongue:',
        '😜': ':winking_face_with_tongue:',
        '🤪': ':zany_face:',
        '🤨': ':face_with_raised_eyebrow:',
        '🧐': ':face_with_monocle:',
        '🤓': ':nerd_face:',
        '😎': ':smiling_face_with_sunglasses:',
        '🤩': ':star-struck:',
        '🥳': ':partying_face:',
        '😏': ':smirking_face:',
        '😒': ':unamused_face:',
        '😞': ':disappointed_face:',
        '😔': ':pensive_face:',
        '😟': '😟',
        '😕': ':confused_face:',
        '🙁': ':slightly_frowning_face:',
        '☹️': ':frowning_face:',
        '😣': ':persevering_face:',
        '😖': ':confounded_face:',
        '😫': ':tired_face:',
        '😩': ':weary_face:',
        '🥺': ':pleading_face:',
        '😢': ':crying_face:',
        '😭': ':loudly_crying_face:',
        '😤': ':face_with_steam_from_nose:',
        '😠': ':angry_face:',
        '😡': ':pouting_face:',
        '🤬': ':face_with_symbols_on_mouth:',
        '🤯': ':exploding_head:',
        '😳': ':flushed_face:',
        '🥵': ':hot_face:',
        '🥶': ':cold_face:',
        '😱': ':face_screaming_in_fear:',
        '😨': ':fearful_face:',
        '😰': ':anxious_face_with_sweat:',
        '😥': ':sad_but_relieved_face:',
        '😓': ':downcast_face_with_sweat:',
        '🤗': ':hugging_face:',
        '🤔': ':thinking_face:',
        '🤭': ':face_with_hand_over_mouth:',
        '🤫': ':shushing_face:',
        '🤥': ':lying_face:',
        '😶': ':neutral_face:',
        '😐': ':expressionless_face:',
        '😑': ':face_without_mouth:',
        '😬': ':grimacing_face:',
        '🙄': ':face_with_rolling_eyes:',
        '😯': ':hushed_face:',
        '😦': ':frowning_face_with_open_mouth:',
        '😧': ':anguished_face:',
        '😮': ':face_with_open_mouth:',
        '😲': ':astonished_face:',
        '🥱': ':yawning_face:',
        '😴': ':sleeping_face:',
        '🤤': ':drooling_face:',
        '😪': ':sleepy_face:',
        '😵': ':dizzy_face:',
        '🤐': ':zipper-mouth_face:',
        '🥴': ':nauseated_face:',
        '🤢': ':face_vomiting:',
        '🤮': ':vomiting_face:',
        '🤧': ':sneezing_face:',
        '😷': ':face_with_medical_mask:',
        '🤒': ':face_with_thermometer:',
        '🤕': ':face_with_head-bandage:',
        '🤑': ':money-mouth_face:',
        '🤠': ':cowboy_hat_face:'
    };

    // Get DOM elements
    const quantitySlider = document.getElementById('quantity');
    const quantityValue = document.getElementById('quantity-value');
    const formatSelect = document.getElementById('format');
    const animationSelect = document.getElementById('animation');
    const generateBtn = document.getElementById('generate-btn');
    const spinBtn = document.getElementById('spin-btn');
    const emojiWheel = document.getElementById('emoji-wheel');
    const emojiResults = document.getElementById('emoji-results');
    const copyBtn = document.getElementById('copy-btn');
    const saveBtn = document.getElementById('save-btn');
    const shareBtn = document.getElementById('share-btn');
    const exportTxtBtn = document.getElementById('export-txt');
    const exportCsvBtn = document.getElementById('export-csv');
    const exportJsonBtn = document.getElementById('export-json');
    const historyList = document.getElementById('history-list');
    const favoritesList = document.getElementById('favorites-list');
    const toast = document.getElementById('toast');
    const themeToggle = document.getElementById('theme-toggle');

    // State variables
    let isSpinning = false;
    let currentEmojis = [];
    let history = JSON.parse(localStorage.getItem('emojiHistory')) || [];
    let favorites = JSON.parse(localStorage.getItem('emojiFavorites')) || [];

    // Initialize the app
    function init() {
        updateQuantityDisplay();
        createWheel();
        updateHistory();
        updateFavorites();

        // Event listeners
        quantitySlider.addEventListener('input', updateQuantityDisplay);
        generateBtn.addEventListener('click', generateEmojis);
        spinBtn.addEventListener('click', spinWheel);
        copyBtn.addEventListener('click', copyToClipboard);
        saveBtn.addEventListener('click', saveToFavorites);
        shareBtn.addEventListener('click', shareEmojis);
        exportTxtBtn.addEventListener('click', () => exportEmojis('txt'));
        exportCsvBtn.addEventListener('click', () => exportEmojis('csv'));
        exportJsonBtn.addEventListener('click', () => exportEmojis('json'));
        themeToggle.addEventListener('click', toggleTheme);

        // Category checkboxes
        const checkboxes = document.querySelectorAll('.checkbox-group input');
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', createWheel);
        });

        // Check for dark mode preference
        if (localStorage.getItem('theme') === 'dark' || 
            (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.setAttribute('data-theme', 'dark');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }
    }

    // Update quantity display
    function updateQuantityDisplay() {
        quantityValue.textContent = quantitySlider.value;
    }

    // Create the emoji wheel
    function createWheel() {
        const selectedCategories = [];
        const checkboxes = document.querySelectorAll('.checkbox-group input:checked');

        checkboxes.forEach(checkbox => {
            selectedCategories.push(checkbox.id);
        });

        let allEmojis = [];
        selectedCategories.forEach(category => {
            if (emojiData[category]) {
                allEmojis = [...allEmojis, ...emojiData[category]];
            }
        });

        // Remove duplicates
        allEmojis = [...new Set(allEmojis)];

        // Clear the wheel
        emojiWheel.innerHTML = '';

        if (allEmojis.length === 0) {
            emojiWheel.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.2rem;">Select at least one category</div>';
            return;
        }

        // Create wheel segments
        const segmentAngle = 360 / allEmojis.length;
        const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#8AC926', '#1982C4', '#6A4C93', '#F15BB5'];

        allEmojis.forEach((emoji, index) => {
            const segment = document.createElement('div');
            segment.className = 'wheel-segment';
            segment.style.transform = `rotate(${index * segmentAngle}deg)`;
            segment.style.clipPath = `polygon(50% 50%, 50% 0%, ${50 + 50 * Math.tan((segmentAngle * Math.PI) / 180)}% 0%)`;
            segment.style.backgroundColor = colors[index % colors.length];
            segment.innerHTML = `<div style="position: absolute; top: 20%; left: 50%; transform: translateX(-50%) rotate(${segmentAngle / 2}deg); font-size: 1.5rem;">${emoji}</div>`;
            emojiWheel.appendChild(segment);
        });

        // Store emojis for spinning
        emojiWheel.dataset.emojis = JSON.stringify(allEmojis);
    }

    // Generate emojis without spinning the wheel
    function generateEmojis() {
        const quantity = parseInt(quantitySlider.value);
        const format = formatSelect.value;
        const selectedCategories = [];
        const checkboxes = document.querySelectorAll('.checkbox-group input:checked');

        checkboxes.forEach(checkbox => {
            selectedCategories.push(checkbox.id);
        });

        let allEmojis = [];
        selectedCategories.forEach(category => {
            if (emojiData[category]) {
                allEmojis = [...allEmojis, ...emojiData[category]];
            }
        });

        // Remove duplicates
        allEmojis = [...new Set(allEmojis)];

        if (allEmojis.length === 0) {
            showToast('Please select at least one emoji category');
            return;
        }

        // Generate random emojis
        currentEmojis = [];
        for (let i = 0; i < quantity; i++) {
            const randomIndex = Math.floor(Math.random() * allEmojis.length);
            const emoji = allEmojis[randomIndex];
            // Ensure we don't add blank/undefined emojis
            if (emoji && emoji.trim() !== '') {
                currentEmojis.push(emoji);
            }
        }

        // If we still don't have enough emojis (due to filtering out blanks), add more
        while (currentEmojis.length < quantity && allEmojis.length > 0) {
            const randomIndex = Math.floor(Math.random() * allEmojis.length);
            const emoji = allEmojis[randomIndex];
            if (emoji && emoji.trim() !== '' && !currentEmojis.includes(emoji)) {
                currentEmojis.push(emoji);
            }
        }

        displayEmojis(currentEmojis, format);
        addToHistory(currentEmojis);
    }

    // Spin the wheel
    function spinWheel() {
        if (isSpinning) return;

        const emojis = JSON.parse(emojiWheel.dataset.emojis || '[]');
        if (emojis.length === 0) {
            showToast('Please select at least one emoji category');
            return;
        }

        isSpinning = true;
        spinBtn.disabled = true;

        // Get the quantity of emojis to generate
        const quantity = parseInt(quantitySlider.value);

        // Random spin amount (multiple full rotations plus random segment)
        const minSpins = 5;
        const maxSpins = 10;
        const spins = Math.floor(Math.random() * (maxSpins - minSpins + 1)) + minSpins;
        const segmentAngle = 360 / emojis.length;

        // Generate multiple random segments
        const randomSegments = [];
        for (let i = 0; i < quantity; i++) {
            randomSegments.push(Math.floor(Math.random() * emojis.length));
        }

        // Use the first random segment for the wheel spin
        const finalRotation = spins * 360 + (randomSegments[0] * segmentAngle);

        // Apply animation
        const animationDuration = animationSelect.value === 'fast' ? 2 : 
                                animationSelect.value === 'medium' ? 4 : 6;

        emojiWheel.style.transition = `transform ${animationDuration}s cubic-bezier(0.2, 0.8, 0.2, 1)`;
        emojiWheel.style.transform = `rotate(${finalRotation}deg)`;

        // Handle animation end
        setTimeout(() => {
            isSpinning = false;
            spinBtn.disabled = false;

            // Get the selected emojis
            const format = formatSelect.value;
            currentEmojis = [];

            // Add the first emoji from the wheel spin
            const firstEmoji = emojis[randomSegments[0]];
            if (firstEmoji && firstEmoji.trim() !== '') {
                currentEmojis.push(firstEmoji);
            }

            // Generate the remaining emojis
            for (let i = 1; i < quantity; i++) {
                const randomIndex = Math.floor(Math.random() * emojis.length);
                const emoji = emojis[randomIndex];
                if (emoji && emoji.trim() !== '') {
                    currentEmojis.push(emoji);
                }
            }

            // Display the result
            displayEmojis(currentEmojis, format);
            addToHistory(currentEmojis);

            // Reset transition for next spin
            emojiWheel.style.transition = 'none';
            const currentRotation = finalRotation % 360;
            emojiWheel.style.transform = `rotate(${currentRotation}deg)`;

            // Force reflow to apply the reset
            void emojiWheel.offsetWidth;

            // Restore transition
            emojiWheel.style.transition = '';
        }, animationDuration * 1000);
    }

    // Display emojis in the results area
    function displayEmojis(emojis, format) {
        emojiResults.innerHTML = '';

        if (emojis.length === 0) {
            emojiResults.innerHTML = '<div style="width: 100%; text-align: center; color: var(--gray-color);">No emojis generated</div>';
            return;
        }

        emojis.forEach((emoji, index) => {
            if (!emoji || emoji.trim() === '') return;

            const emojiItem = document.createElement('div');
            emojiItem.className = 'emoji-item';

            // Format the emoji based on selection
            let displayEmoji = emoji;
            if (format === 'colon' && emojiToColon[emoji]) {
                displayEmoji = emojiToColon[emoji];
            } else if (format === 'html') {
                displayEmoji = `&#${emoji.codePointAt(0)};`;
            } else if (format === 'unicode') {
                displayEmoji = `U+${emoji.codePointAt(0).toString(16).toUpperCase()}`;
            }

            emojiItem.textContent = displayEmoji;
            emojiItem.style.animationDelay = `${index * 0.1}s`;
            emojiResults.appendChild(emojiItem);
        });
    }

    // Copy emojis to clipboard
    function copyToClipboard() {
        if (currentEmojis.length === 0) {
            showToast('No emojis to copy');
            return;
        }

        const format = formatSelect.value;
        let textToCopy = '';

        currentEmojis.forEach(emoji => {
            if (!emoji || emoji.trim() === '') return;

            if (format === 'colon' && emojiToColon[emoji]) {
                textToCopy += emojiToColon[emoji] + ' ';
            } else if (format === 'html') {
                textToCopy += `&#${emoji.codePointAt(0)}; `;
            } else if (format === 'unicode') {
                textToCopy += `U+${emoji.codePointAt(0).toString(16).toUpperCase()} `;
            } else {
                textToCopy += emoji + ' ';
            }
        });

        navigator.clipboard.writeText(textToCopy.trim()).then(() => {
            showToast('Emojis copied to clipboard!');
        }).catch(err => {
            console.error('Failed to copy: ', err);
            showToast('Failed to copy emojis');
        });
    }

    // Save emojis to favorites
    function saveToFavorites() {
        if (currentEmojis.length === 0) {
            showToast('No emojis to save');
            return;
        }

        // Filter out any blank/undefined emojis
        const validEmojis = currentEmojis.filter(emoji => emoji && emoji.trim() !== '');

        if (validEmojis.length === 0) {
            showToast('No valid emojis to save');
            return;
        }

        const format = formatSelect.value;
        const favoriteItem = {
            emojis: [...validEmojis],
            format: format,
            timestamp: new Date().toISOString()
        };

        favorites.unshift(favoriteItem);

        // Limit favorites to 20 items
        if (favorites.length > 20) {
            favorites = favorites.slice(0, 20);
        }

        localStorage.setItem('emojiFavorites', JSON.stringify(favorites));
        updateFavorites();
        showToast('Saved to favorites!');
    }

    // Share emojis
    function shareEmojis() {
        if (currentEmojis.length === 0) {
            showToast('No emojis to share');
            return;
        }

        // Filter out any blank/undefined emojis
        const validEmojis = currentEmojis.filter(emoji => emoji && emoji.trim() !== '');

        if (validEmojis.length === 0) {
            showToast('No valid emojis to share');
            return;
        }

        const format = formatSelect.value;
        let shareText = 'Check out these emojis I generated:\n\n';

        validEmojis.forEach(emoji => {
            if (format === 'colon' && emojiToColon[emoji]) {
                shareText += emojiToColon[emoji] + ' ';
            } else if (format === 'html') {
                shareText += `&#${emoji.codePointAt(0)}; `;
            } else if (format === 'unicode') {
                shareText += `U+${emoji.codePointAt(0).toString(16).toUpperCase()} `;
            } else {
                shareText += emoji + ' ';
            }
        });

        shareText += '\n\nGenerated with the Random Emoji Generator Wheel at eRandomGenerator.com';

        if (navigator.share) {
            navigator.share({
                title: 'Random Emoji Generator',
                text: shareText
            }).catch(err => {
                console.error('Error sharing:', err);
                fallbackShare(shareText);
            });
        } else {
            fallbackShare(shareText);
        }
    }

    // Fallback share method
    function fallbackShare(text) {
        const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
        window.open(shareUrl, '_blank');
    }

    // Export emojis
    function exportEmojis(format) {
        if (currentEmojis.length === 0) {
            showToast('No emojis to export');
            return;
        }

        // Filter out any blank/undefined emojis
        const validEmojis = currentEmojis.filter(emoji => emoji && emoji.trim() !== '');

        if (validEmojis.length === 0) {
            showToast('No valid emojis to export');
            return;
        }

        let content = '';
        let filename = 'emojis';
        let mimeType = 'text/plain';

        if (format === 'txt') {
            filename += '.txt';
            validEmojis.forEach(emoji => {
                content += emoji + '\n';
            });
        } else if (format === 'csv') {
            filename += '.csv';
            mimeType = 'text/csv';
            content = 'Emoji,Unicode,Colon Format\n';
            validEmojis.forEach(emoji => {
                const unicode = `U+${emoji.codePointAt(0).toString(16).toUpperCase()}`;
                const colonFormat = emojiToColon[emoji] || '';
                content += `${emoji},${unicode},"${colonFormat}"\n`;
            });
        } else if (format === 'json') {
            filename += '.json';
            mimeType = 'application/json';
            const emojiData = validEmojis.map(emoji => {
                return {
                    emoji: emoji,
                    unicode: `U+${emoji.codePointAt(0).toString(16).toUpperCase()}`,
                    colonFormat: emojiToColon[emoji] || '',
                    htmlEntity: `&#${emoji.codePointAt(0)};`
                };
            });
            content = JSON.stringify(emojiData, null, 2);
        }

        const blob = new Blob([content], { type: mimeType });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);

        showToast(`Emojis exported as ${format.toUpperCase()} file`);
    }

    // Add to history
    function addToHistory(emojis) {
        // Filter out any blank/undefined emojis
        const validEmojis = emojis.filter(emoji => emoji && emoji.trim() !== '');

        if (validEmojis.length === 0) {
            return;
        }

        const format = formatSelect.value;
        const historyItem = {
            emojis: [...validEmojis],
            format: format,
            timestamp: new Date().toISOString()
        };

        // Add to beginning of history
        history.unshift(historyItem);

        // Remove duplicates
        history = history.filter((item, index, self) =>
            index === self.findIndex((t) => (
                JSON.stringify(t.emojis) === JSON.stringify(item.emojis) && t.format === item.format
            ))
        );

        // Limit history to 20 items
        if (history.length > 20) {
            history = history.slice(0, 20);
        }

        localStorage.setItem('emojiHistory', JSON.stringify(history));
        updateHistory();
    }

    // Update history display
    function updateHistory() {
        historyList.innerHTML = '';

        if (history.length === 0) {
            historyList.innerHTML = '<div style="width: 100%; text-align: center; color: var(--gray-color);">No history yet</div>';
            return;
        }

        history.forEach((item, index) => {
            const historyItem = document.createElement('div');
            historyItem.className = 'history-item';
            historyItem.textContent = item.emojis.join(' ');
            historyItem.title = `Generated: ${new Date(item.timestamp).toLocaleString()}`;
            historyItem.addEventListener('click', () => {
                currentEmojis = [...item.emojis];
                formatSelect.value = item.format;
                displayEmojis(currentEmojis, item.format);
            });
            historyList.appendChild(historyItem);
        });
    }

    // Update favorites display
    function updateFavorites() {
        favoritesList.innerHTML = '';

        if (favorites.length === 0) {
            favoritesList.innerHTML = '<div style="width: 100%; text-align: center; color: var(--gray-color);">No favorites yet</div>';
            return;
        }

        favorites.forEach((item, index) => {
            const favoriteItem = document.createElement('div');
            favoriteItem.className = 'history-item';
            favoriteItem.textContent = item.emojis.join(' ');
            favoriteItem.title = `Saved: ${new Date(item.timestamp).toLocaleString()}`;
            favoriteItem.addEventListener('click', () => {
                currentEmojis = [...item.emojis];
                formatSelect.value = item.format;
                displayEmojis(currentEmojis, item.format);
            });

            // Add remove button
            const removeBtn = document.createElement('span');
            removeBtn.innerHTML = ' ×';
            removeBtn.style.color = 'var(--danger-color)';
            removeBtn.style.cursor = 'pointer';
            removeBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                favorites.splice(index, 1);
                localStorage.setItem('emojiFavorites', JSON.stringify(favorites));
                updateFavorites();
                showToast('Removed from favorites');
            });

            favoriteItem.appendChild(removeBtn);
            favoritesList.appendChild(favoriteItem);
        });
    }

    // Show toast notification
    function showToast(message) {
        toast.textContent = message;
        toast.classList.add('show');

        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    // Toggle theme
    function toggleTheme() {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);

        if (newTheme === 'dark') {
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        } else {
            themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
        }
    }

    // Initialize the app when DOM is loaded
    document.addEventListener('DOMContentLoaded', init);
</script>