How to Create a Random Number Generator for Contests, Giveaways or Bingo Thanks to Artificial Intelligence, Without Knowing a Line of Code
Easily generate random numbers for games and more with a simple HTML tool thanks to Google Gemini 2.0, no programming skills required.
Hey everyone!
Today, I'm excited to show you how you can create your very own random number generator, and how it’s all made possible with the help of artificial intelligence – and you don't even need to write a single line of code! Yes, you heard that right – no programming skills needed! This is perfect if you need to draw numbers for a raffle, play bingo, or for anything else where you need a random element.
Why This Generator Is For You
Have you ever been in a situation where you needed to pick numbers at random? Maybe you're hosting a small raffle, organizing a family bingo night, or just trying to make a decision in a fun way. A random number generator is the perfect tool for these moments.
And it’s not just for games:
Easy Raffles: Create fair and random draws for contests or giveaways.
Perfect for Bingo: Generate random bingo numbers for your family games.
Random Choices: Use it to make random decisions when you can't choose between options.
Simple Simulations: Great for any quick test where you need to simulate random events.
The Magic of Simple HTML (and a Little AI Help!)
I’ve created two versions of a random number generator for you, which you can use directly in this newsletter, or save as an HTML file. Plus, you can choose whether or not to allow repeated numbers in your draws. Thanks to the assistance of Google Gemini 2.0, this process has become even easier!
Standalone Version (single HTML file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Number Generator</title>
<style>
body { font-family: sans-serif; text-align: left; padding: 20px; }
input[type="number"] { padding: 8px; margin: 5px; border: 1px solid #ccc; }
button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; margin: 10px; }
#result { font-size: 24px; margin-top: 20px; }
.error { color: red; margin-top: 10px; }
.checkbox-container { display: flex; align-items: center; justify-content: center; margin: 10px; }
#generated-numbers { margin-top: 20px; }
.number-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
margin: 3px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
font-size: 16px;
}
</style>
</head>
<body>
<h2>Random Number Generator</h2>
<div>
<label for="min">Minimum Number:</label>
<input type="number" id="min" value="1">
</div>
<div>
<label for="max">Maximum Number:</label>
<input type="number" id="max" value="10">
</div>
<div class="checkbox-container">
<input type="checkbox" id="uniqueNumbers">
<label for="uniqueNumbers">Generate Unique Numbers</label>
</div>
<button onclick="generateNumber()">Generate Random Number</button>
<div id="result"></div>
<div id="error-message" class="error"></div>
<div id="generated-numbers"></div>
<script>
let generatedNumbers = [];
let allGeneratedNumbers = [];
function generateNumber() {
const minInput = document.getElementById('min');
const maxInput = document.getElementById('max');
const resultDiv = document.getElementById('result');
const errorDiv = document.getElementById('error-message');
const uniqueNumbersCheckbox = document.getElementById('uniqueNumbers');
const generatedNumbersDiv = document.getElementById('generated-numbers');
errorDiv.textContent = '';
const min = parseInt(minInput.value, 10);
const max = parseInt(maxInput.value, 10);
const generateUnique = uniqueNumbersCheckbox.checked;
if (isNaN(min) || isNaN(max)) {
errorDiv.textContent = 'Please enter valid numbers.';
resultDiv.textContent = '';
return;
}
if(min > max){
errorDiv.textContent = 'The minimum value must be less than the maximum.';
resultDiv.textContent = '';
return;
}
if (generateUnique) {
if (generatedNumbers.length >= (max - min + 1)) {
errorDiv.textContent = 'All unique numbers have been generated. Please reset.';
resultDiv.textContent ='';
return;
}
let randomNumber;
do {
randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
} while (generatedNumbers.includes(randomNumber));
generatedNumbers.push(randomNumber);
allGeneratedNumbers.push(randomNumber);
resultDiv.textContent = `Random Number: ${randomNumber}`;
} else {
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
allGeneratedNumbers.push(randomNumber);
resultDiv.textContent = `Random Number: ${randomNumber}`;
}
generatedNumbersDiv.innerHTML = `Generated Numbers: ${allGeneratedNumbers.map(num => `<span class="number-circle">${num}</span>`).join('')}`;
}
function resetUniqueNumbers() {
generatedNumbers = [];
allGeneratedNumbers = [];
document.getElementById('error-message').textContent = '';
document.getElementById('result').textContent = '';
document.getElementById('generated-numbers').innerHTML = '';
}
</script>
<button onclick="resetUniqueNumbers()">Reset Numbers</button>
</body>
</html>WordPress Version (HTML block)
<div style="font-family: sans-serif; text-align: center; padding: 20px;">
<h2>Random Number Generator</h2>
<div>
<label for="min_embed">Minimum Number:</label>
<input type="number" id="min_embed" value="1" style="padding: 8px; margin: 5px; border: 1px solid #ccc;">
</div>
<div>
<label for="max_embed">Maximum Number:</label>
<input type="number" id="max_embed" value="10" style="padding: 8px; margin: 5px; border: 1px solid #ccc;">
</div>
<div style="display: flex; align-items: center; justify-content: center; margin: 10px;">
<input type="checkbox" id="uniqueNumbers_embed">
<label for="uniqueNumbers_embed">Generate Unique Numbers</label>
</div>
<button onclick="generateNumberEmbed()" style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; margin: 10px;">Generate Random Number</button>
<div id="result_embed" style="font-size: 24px; margin-top: 20px;"></div>
<div id="error-message-embed" class="error" style="color: red; margin-top: 10px;"></div>
<div id="generated-numbers-embed" style="margin-top: 20px;"></div>
<style>
.number-circle-embed {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
margin: 3px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
font-size: 16px;
}
</style>
<script>
let generatedNumbersEmbed = [];
let allGeneratedNumbersEmbed = [];
function generateNumberEmbed() {
const minInput = document.getElementById('min_embed');
const maxInput = document.getElementById('max_embed');
const resultDiv = document.getElementById('result_embed');
const errorDiv = document.getElementById('error-message-embed');
const uniqueNumbersCheckbox = document.getElementById('uniqueNumbers_embed');
const generatedNumbersDiv = document.getElementById('generated-numbers-embed');
errorDiv.textContent = '';
const min = parseInt(minInput.value, 10);
const max = parseInt(maxInput.value, 10);
const generateUnique = uniqueNumbersCheckbox.checked;
if (isNaN(min) || isNaN(max)) {
errorDiv.textContent = 'Please enter valid numbers.';
resultDiv.textContent = '';
return;
}
if(min > max){
errorDiv.textContent = 'The minimum value must be less than the maximum.';
resultDiv.textContent = '';
return;
}
if (generateUnique) {
if (generatedNumbersEmbed.length >= (max - min + 1)) {
errorDiv.textContent = 'All unique numbers have been generated. Please reset.';
resultDiv.textContent = '';
return;
}
let randomNumber;
do {
randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
} while (generatedNumbersEmbed.includes(randomNumber));
generatedNumbersEmbed.push(randomNumber);
allGeneratedNumbersEmbed.push(randomNumber);
resultDiv.textContent = `Random Number: ${randomNumber}`;
} else {
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
allGeneratedNumbersEmbed.push(randomNumber);
resultDiv.textContent = `Random Number: ${randomNumber}`;
}
generatedNumbersDiv.innerHTML = `Generated Numbers: ${allGeneratedNumbersEmbed.map(num => `<span class="number-circle-embed">${num}</span>`).join('')}`;
}
function resetUniqueNumbersEmbed() {
generatedNumbersEmbed = [];
allGeneratedNumbersEmbed = [];
document.getElementById('error-message-embed').textContent = '';
document.getElementById('result_embed').textContent = '';
document.getElementById('generated-numbers-embed').innerHTML = '';
}
</script>
<button onclick="resetUniqueNumbersEmbed()">Reset Numbers</button>
</div>How to use it:
Standalone: Copy the code into an index.html file and open it with your browser.
WordPress: Paste the code into a custom HTML block.
A little tip:
This random number generator is a simple way to add some fun and randomness to your life. Try it out, and let me know what creative things you use it for! And remember, all this is made possible thanks to the incredible power of artificial intelligence.
I hope you like it and find it useful. As always, if you have questions or suggestions, feel free to write to me.
See you soon!