<div class="input-section">

        <h2>Add Participants</h2>

        <div class="input-group">

            <input type="text" id="username" placeholder="Username">

            <button id="addUserBtn"><i class="fas fa-user-plus"></i> Add</button>

        </div>

        <ul id="userList"></ul>

    </div>



    <div class="input-section">

        <h2>Select a Prize</h2>

        <div class="input-group">

            <input type="text" id="prize" placeholder="Prize Description">

            <button id="setPrizeBtn"><i class="fas fa-gift"></i> Set Prize</button>

        </div>

        <p id="selectedPrize">Selected Prize: None</p>

    </div>



    <div class="wheel-container">

        <div class="wheel-wrapper">

            <canvas id="raffleWheel" width="500" height="500"></canvas>

            <div class="pointer">

                <i class="fas fa-arrow-down"></i>

            </div>

        </div>

        <button id="spinBtn"><i class="fas fa-play"></i> Spin the Wheel</button>

    </div>



    <div id="winnerModal" class="modal">

        <div class="modal-content">

            <span class="close-button">&times;</span>

            <h2>🎊 Congratulations! 🎊</h2>

            <p id="winnerText"></p>

            <button id="shareBtn"><i class="fab fa-twitter"></i> Share on Twitter</button>

        </div>

    </div>

</div>



<!-- Footer Section -->

<footer class="footer">

    <div class="footer-container">

        <div class="footer-links">

            <a href="https://gladiatorsbattle.com" target="_blank" aria-label="Website">

                <i class="fas fa-globe"></i> Website

            </a>

            <a href="https://www.linkedin.com/in/pierre-romain-lopez/" target="_blank" aria-label="LinkedIn">

                <i class="fab fa-linkedin"></i> LinkedIn

            </a>

            <a href="https://x.com/GladiatorsBT" target="_blank" aria-label="Twitter">

                <i class="fab fa-twitter"></i> Twitter

            </a>

        </div>

        <div class="footer-donate">

            <!-- Buy Me a Coffee Button -->

            <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" 

                data-name="bmc-button" 

                data-slug="GladiatorsBattle" 

                data-color="#FFDD00" 

                data-emoji="" 

                data-font="Cookie" 

                data-text="Buy me a coffee" 

                data-outline-color="#000000" 

                data-font-color="#000000" 

                data-coffee-color="#ffffff">

            </script>

        </div>

    </div>

</footer>



<script src="script.js"></script>

🎨 CSS (styles.css)

The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

list-style: none;

max-height: 120px;

overflow-y: auto;

text-align: left;

padding: 0 20%;

width: 100%;

padding: 8px 0;

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

font-size: 1rem;

font-size: 1.2rem;

font-weight: 500;

margin-top: 10px;

padding: 15px 35px;

border: none;

border-radius: 50px;

background-color: #32cd32;

color: #fff;

font-size: 1.25rem;

font-weight: 600;

cursor: pointer;

box-shadow: 0 6px 20px rgba(0,0,0,0.3);

transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;

display: flex;

align-items: center;

gap: 10px;

margin: 0 auto;

background-color: #28a428;

transform: translateY(-3px);

box-shadow: 0 8px 25px rgba(0,0,0,0.4);

transform: translateY(0);

box-shadow: 0 4px 15px rgba(0,0,0,0.2);

padding: 12px 25px;

background-color: #1DA1F2;

border: none;

border-radius: 30px;

color: #fff;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

display: flex;

align-items: center;

gap: 8px;

transition: background-color 0.3s ease, transform 0.2s ease;

background-color: #0d95e8;

transform: translateY(-2px);

🧩 Step-by-Step Development



1. Setting Up the HTML Structure

I began by outlining the basic structure of the application in index.html. This includes:



- Header: Displays the title of the raffle.

- Input Sections: Two main sections for adding participants and selecting a prize.

- Raffle Wheel: A canvas element where the wheel is drawn and animated.

- Modal: A popup that announces the winner.

- Footer: Promotes my website, LinkedIn, Twitter, and includes a Buy Me a Coffee button.



2. Styling with CSS



Using styles.css, I implemented a modern and sleek design:



- Glassmorphism: Achieved with semi-transparent backgrounds and backdrop-filter for a frosted glass effect.

- Animations: Added fadeIn for the container and bounce for the pointer to enhance interactivity.

- Responsive Design: Ensured that the layout adapts gracefully across various screen sizes using Flexbox and media queries.

- Accessibility: Incorporated focus states and high-contrast colors for better usability.



3. Adding Interactivity with JavaScript



In script.js, the core functionalities were implemented:



- Adding Participants: Users can input and add unique usernames to the raffle.

- Setting Prizes: Define the prize that participants can win.

- Drawing the Raffle Wheel: Utilized the Canvas API to draw a wheel divided into segments, each representing a participant.

- Spinning the Wheel: Implemented smooth spinning animations with easing functions to determine the winner.

- Announcing the Winner: Displayed the winner in a modal with an option to share the result on Twitter.



4. Integrating the Footer for Promotion



The footer serves as a promotional tool, connecting users to my online presence and providing a means to support the project financially:



- Social Links: Direct links to my website, LinkedIn, and Twitter profiles.

- Buy Me a Coffee: Encourages users to support my work through donations.

- 🧱 Challenges Faced and Solutions



1. Creating a Dynamic and Interactive Raffle Wheel



Challenge: Drawing and animating a responsive raffle wheel where each segment corresponds to a participant.



Solution: Leveraged the Canvas API to programmatically draw segments based on the number of participants. Each segment is assigned a distinct color for visual differentiation. JavaScript handles the rotation logic, ensuring smooth animations and accurately determining the winning segment based on the final angle.



2. Ensuring Smooth Animations and Performance



Challenge: Maintaining fluid animations, especially on devices with limited processing power.



Solution: Optimized JavaScript code to minimize computational overhead during animations. Utilized requestAnimationFrame for synchronized and efficient rendering of animation frames. Additionally, kept the canvas size reasonable and optimized the drawing functions to enhance performance.



3. Maintaining Accessibility and Usability



Challenge: Making the application accessible to users with different needs and ensuring an intuitive user experience.



Solution: Incorporated focus states for all interactive elements, ensuring keyboard navigability. Chose high-contrast color schemes to enhance readability. Structured the HTML semantically to assist screen readers in conveying information effectively.



📈 Results and Feedback

Since launching Modern Raffle 2024, the feedback has been overwhelmingly positive. Users appreciate the intuitive interface, the visually appealing design, and the seamless interactivity of the raffle wheel. The ability to share results on Twitter has also helped increase the visibility of giveaways, attracting more participants and fostering a sense of community engagement.



🔗 Useful Links



View the Project in Action: Modern Raffle 2024 on https://codepen.io/HanGPIIIErr/pen/eYqqEeW

Website: https://gladiatorsbattle.com

LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/

Twitter: https://x.com/GladiatorsBT

Buy Me a Coffee: https://www.buymeacoffee.com/GladiatorsBattle



🎉 Conclusion



Creating Modern Raffle 2024 was an enriching experience that combined modern web design principles with interactive functionalities. By leveraging HTML, CSS, and JavaScript, I developed a tool that not only serves its primary purpose of managing raffles but also engages users with its sleek design and smooth interactivity.



I encourage you to explore the project on CodePen, try it out for your own giveaways, and customize it to fit your specific needs. Whether you're a developer looking to enhance your portfolio or a community manager aiming to boost engagement, this raffle wheel is a versatile and effective solution.



Feel free to connect with me on my Website, LinkedIn, Twitter, or support my work through Buy Me a Coffee.



Happy Coding and Best of Luck with Your Raffles! 🎮✨