How to make a random number generator in javascript using jquery for a Wordpress site, embedded in one code snippet.
Random Number Generator
Drawing 001-086
Ticket numbers were from 001 – 086. This digital drawing will randomly draw one ticket from the lot. Like I used to tell my students when I was a statistics professor, there is never a hat.
Want to Try With Other Endpoints?
You are not likely to have the same range as me (001-086), and what if you do not even want to build your own random number generator using jquery and javascript? What if you just want to use one of mine?
Okay. Here you go. I made one with some added event.Listeners so that you can do that. Go ahead and try it out! Drop in your minimum and maximum ticket numbers.
Want the code snippet I came up with for the first one, in order to make your own? Here you go. The key functions are Math.floor() and Math.random(). See here for more on Math.random if you want.
function embed_random_number_generator_script() {
ob_start(); ?>
<div id="random-number-generator">
<button id="draw">Draw</button>
<button id="reset">Reset</button>
<div id="result">Ready!</div>
</div>
<script>
(function () {
// Create an array to store the available numbers
var availableNumbers = [];
// Populate the available numbers array with the range of values
for (var i = 1; i <= 86; i++) {
availableNumbers.push(i.toString().padStart(3, '0'));
}
// Create an array to store the drawn numbers
var drawnNumbers = [];
// Function to handle the draw button click
function handleDrawClick() {
var resultContainer = document.getElementById('result');
// Check if all numbers have been drawn
if (availableNumbers.length === 0) {
resultContainer.innerHTML = 'No numbers available!';
return;
}
var randomIndex = Math.floor(Math.random() * availableNumbers.length);
var randomNumber = availableNumbers.splice(randomIndex, 1)[0];
resultContainer.innerHTML = randomNumber;
drawnNumbers.push(randomNumber);
}
// Function to handle the reset button click
function handleResetClick() {
availableNumbers = [];
drawnNumbers = [];
for (var i = 1; i <= 86; i++) {
availableNumbers.push(i.toString().padStart(3, '0'));
}
document.getElementById('result').innerHTML = 'Ready!';
}
// Add event listeners to the buttons
document.getElementById('draw').addEventListener('click', handleDrawClick);
document.getElementById('reset').addEventListener('click', handleResetClick);
})();
</script>
<?php return ob_get_clean();
}
add_shortcode('random_number_generator', 'embed_random_number_generator_script');
Details and Notes
The Draw button runs the function on the full range, in my case from 1-86. If you press the draw button a second time, it will draw a second number without replacement. Want to start over? Hit reset. That resets it all, replacing all drawn numbers to start over.
The availableNumbers array contains all the numbers in the range (001-086). Each time the Draw button is clicked, a random number is selected from the availableNumbers array, removed from it, and added to the drawnNumbers array. The process ensures that only the remaining available numbers are drawn.
The confetti button has nothing to do with the random number generator, and is using this javascript library.
If you run a child theme, drop this code into functions.php. Otherwise, use a code snippets plugin. I personally use WP Codebox on all my sites, and I like the conditional logic, because I can load a script just where it is needed, so the rest of the site stays lite.
I just dropped my [random-number-generator] shortcode into a container block, assigned a css class to the container, and applied the styling I wanted for margins, font, and flex layout.
For example, what you see above on this page here? Here is the CSS I applied to make it happen, altho what you see here is also influenced by some global styling and other site-wide variables, right? This is just to give you ideas.
/* Styling the result text */
#random-number-generator #result {
font-size: 2em;
margin: 15px;
}
/* styling the two buttons */
#random-number-generator button {
margin: 5px;
width: 100px;
font-size: 1.5em;
}
/* Setting the layout for desktop and tablet */
@media (min-width: 768px) {
#random-number-generator {
display: flex;
align-items: center;
justify-content: space-between;
}
}
/* And setting the layout for mobile */
@media (max-width: 767px) {
#random-number-generator {
display: flex;
flex-direction: column;
align-items: center;
}
}
