Apr 29 • 🔵 #general
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);
digitElements.tens.push(digit);
}
// Create digits for ones (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');
onesContainer.appendChild(digit);
digitElements.ones.push(digit);
}
}
// Show a specific digit in a container
function showDigit(container, index) {
const digits = digitElements[container];
// Hide all digits
digits.forEach(digit => digit.classList.remove('visible'));
// Show the selected digit
digits[index].classList.add('visible');
}
// Generate random number between 1 and 999
function generateRandomNumber() {
return Math.floor(Math.random() * 999) + 1;
}
// Spin animation for a single digit
function animateDigit(container, finalDigit, duration, delay) {
return new Promise(resolve => {
let startTime = null;
const totalFrames = duration / 16.67; // approx 60fps
let frame = 0;
function showRandomDigit() {
const randomDigit = Math.floor(Math.random() * 10);
showDigit(container, randomDigit);
}
function animate() {
if (frame < totalFrames) {
// Show random digits during animation
showRandomDigit();
frame++;
requestAnimationFrame(animate);
} else {
// Show final digit
showDigit(container, finalDigit);
resolve();
}
}
// Start animation after delay
setTimeout(() => {
animate();
}, delay);
});
}
// Spin the wheel
async function spinWheel() {
if (spinning) return;
spinning = true;
// Disable button during spin
spinButton.disabled = true;
winnerDisplay.classList.remove('show');
// Generate winning number
const winningNumber = generateRandomNumber();
console.log("Winning number:", winningNumber);
// Split into digits
const hundreds = Math.floor(winningNumber / 100);
const tens = Math.floor((winningNumber % 100) / 10);
const ones = winningNumber % 10;
// Start animations with different durations and delays
const hundredsPromise = animateDigit('hundreds', hundreds, 2000, 0);
const tensPromise = animateDigit('tens', tens, 2500, 200);
const onesPromise = animateDigit('ones', ones, 3000, 400);
// Wait for all animations to complete
await Promise.all([hundredsPromise, tensPromise, onesPromise]);
// Show result
spinButton.disabled = false;
winnerDisplay.textContent = `Winner: ${winningNumber.toString().padStart(3, '0')}`;
winnerDisplay.classList.add('show');
spinning = false;
}
// Initialize
createDigits();
// Add event listener to spin button
spinButton.addEventListener('click', spinWheel);
});
</script>
<style>
.raffle-container {
max-width: 500px;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.wheel-container {
background: linear-gradient(to right, #3f51b5, #7e57c2);
border-radius: 16px;
padding: 30px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.wheel {
display: flex;
justify-content: center;
margin: 0 auto;
height: 150px;
position: relative;
}
.digit-container {
width: 100px;
height: 150px;
margin: 0 5px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.digit {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.1s ease;
}
.digit.visible {
opacity: 1;
}
.marker {
position: absolute;
left: 0;
right: 0;
height: 4px;
background-color: #ff9800;
top: 50%;
transform: translateY(-50%);
z-index: 10;
box-shadow: 0 0 10px #ff9800;
}
.button {
background-color: #ff5722;
color: white;
border: none;
border-radius: 30px;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.button:hover {
background-color: #e64a19;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.button:disabled {
background-color: #bdbdbd;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.winner-number {
font-size: 36px;
margin-top: 20px;
font-weight: bold;
color: #333;
opacity: 0;
transition: opacity 0.5s ease;
}
opacity: 1;
}
@media (max-width: 480px) {
.digit-container {
width: 80px;
}
.digit {
font-size: 80px;
}
.button {
padding: 12px 24px;
font-size: 16px;
}
}
</style>
10
6 comments
Random Number Raffle Widget
skool.com/chatbot-challenge
🤖 Learn how to make powerful AI chatbots for voice, web, sms, FB, IG, and more using affordable tools anyone can master in less than 30 days...FREE!
Leaderboard (30-day)
1
+4
2
+2
3
+2
4
+2
5
+2
Powered by