Random Number Raffle Widget
Ever wanted to have a little raffle during a live event or webinar? I got you! In order to create a random number and make it visual, I created this code snippet that is completely self-contained and ready to go. Feel free to edit the colors, etc. Just paste in to the BODY tag wherever you want it to appear. π <!-- COPY PASTE BELOW --> <div class="raffle-container"> <h1>Raffle Number Generator</h1> <div class="wheel-container"> <div class="wheel"> <div class="digit-container" id="hundreds-container"> <div class="marker"></div> </div> <div class="digit-container" id="tens-container"> <div class="marker"></div> </div> <div class="digit-container" id="ones-container"> <div class="marker"></div> </div> </div> </div> <button class="button" id="spin-button">Spin the Wheel</button> <div class="winner-number" id="winner-display"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Elements const hundredsContainer = document.getElementById('hundreds-container'); const tensContainer = document.getElementById('tens-container'); const onesContainer = document.getElementById('ones-container'); const spinButton = document.getElementById('spin-button'); const winnerDisplay = document.getElementById('winner-display'); // Variables let spinning = false; let digitElements = { hundreds: [], tens: [], ones: [] }; // Create all possible digits (0-9) for each position function createDigits() { // Create digits for hundreds (0-9) for (let i = 0; i < 10; i++) { const digit = document.createElement('div'); digit.className = 'digit'; digit.textContent = i; if (i === 0) digit.classList.add('visible'); hundredsContainer.appendChild(digit); digitElements.hundreds.push(digit); } // Create digits for tens (0-9) for (let i = 0; i < 10; i++) { const digit = document.createElement('div'); digit.className = 'digit'; digit.textContent = i; if (i === 0) digit.classList.add('visible'); tensContainer.appendChild(digit);