In this post, I will share a javascript random number generator using jQuery with Bootstrap 4. That will generate random lottery numbers with awesome design.

Â

Â

## Step 1. HTML Structure for Random Number Generator

Build the HTML for the random number generator. See below HTML code:

``````<form id="startNumbersGeneratorForm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="from_balls">From Balls</label>
<input type="number" name="from_balls" class="form-control" value="5" aria-describedby="fromBallsHelp" min="0">
<small id="fromBallsHelp" class="form-text text-muted">Enter the maximum number for balls. Ex: 6.</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range_numbers">From Interval Numbers</label>
<input type="number" name="range_numbers" class="form-control" value="45" aria-describedby="rangeNumbersHelp" min="0">
<small id="rangeNumbersHelp" class="form-text text-muted">Enter the maximum value for interval of numbers. Ex: 49.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="extra_balls">Extra Balls</label>
<input type="number" name="extra_balls" class="form-control" value="1" aria-describedby="extraBallsHelp" min="0">
<small id="extraBallsHelp" class="form-text text-muted">Enter the maximum number for extra balls. Ex: 2.</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range_extra_numbers">Extra Interval Numbers</label>
<input type="number" name="range_extra_numbers" class="form-control" value="20" aria-describedby="rangeExtraNumbersHelp" min="0">
<small id="rangeExtraNumbersHelp" class="form-text text-muted">Enter the maximum value for interval of extra numbers. Ex: 20.</small>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Generate Numbers" name="generate_numbers" class="btn btn-block">
</div>
</form>``````

Â

## Step 2: DIV container results

``````<div class="form-group">
<input type="submit" value="Generate Numbers" name="generate_numbers" class="btn btn-block">
</div>``````

Â

``````<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Â

Add Javascript files before </body> clossing.

``````<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/numbers_generator.min.js"></script>``````

Â

## Step 5: Complete HMLT Structure

Here is the complete HTML structure of our javascript random number generator using jquery.

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Random Numbers Generator</title>
<body>
<div class="container-fluid py-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<h2 class="title text-center">Random Numbers Generator</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 offset-md-2">
<form id="startNumbersGeneratorForm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="from_balls">From Balls</label>
<input type="number" name="from_balls" class="form-control" value="5" aria-describedby="fromBallsHelp" min="0">
<small id="fromBallsHelp" class="form-text text-muted">Enter the maximum number for balls. Ex: 6.</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range_numbers">From Interval Numbers</label>
<input type="number" name="range_numbers" class="form-control" value="45" aria-describedby="rangeNumbersHelp" min="0">
<small id="rangeNumbersHelp" class="form-text text-muted">Enter the maximum value for interval of numbers. Ex: 49.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="extra_balls">Extra Balls</label>
<input type="number" name="extra_balls" class="form-control" value="1" aria-describedby="extraBallsHelp" min="0">
<small id="extraBallsHelp" class="form-text text-muted">Enter the maximum number for extra balls. Ex: 2.</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range_extra_numbers">Extra Interval Numbers</label>
<input type="number" name="range_extra_numbers" class="form-control" value="20" aria-describedby="rangeExtraNumbersHelp" min="0">
<small id="rangeExtraNumbersHelp" class="form-text text-muted">Enter the maximum value for interval of extra numbers. Ex: 20.</small>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Generate Numbers" name="generate_numbers" class="btn btn-block">
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="generic-box generator numbers-generator">
<div id="generatorResults" class="col-md-8 offset-md-2"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/numbers_generator.min.js"></script>
</body>
</html>``````

Â

Here is the complete CSS code of our main.css.

``````@charset "UTF-8";

/* GLOBALS AND RESETS */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, ul, li, form, br {
margin:0;
border:0;
font-size:100%;
vertical-align:top;
}

*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

html {
background:#d9dde2;
}

body {
position:relative;
font-size:1em;
font-family:"Open Sans", sans-serif;
color:#293444;
background:#eef2f8;
font-weight:400;
min-width:1200px;
}

sup {
margin:0;
font-size:90%;
line-height:normal;
}

a {
text-decoration:none;
color:#cd6a01;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}

a:hover {
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
color: #FA0;
}

canvas {
position:absolute;
top:0;
z-index:0;
}

a img {
border:none;
}

li {
list-style:none;
}

.img-left {
float:left;
margin:0 10px 10px 0 !important;
}

.img-right {
float:right;
margin:0 0 10px 10px !important;
}

.inline {
display:inline-block;
}

.transition {
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}

.white {
color:#FFF;
}

.red {
color:#cc0000;
}

.btn {
background:#ffea00;
background:linear-gradient(to bottom, #ffea00 0%, #ffbf00 100%);
}

ul {
position:relative;
list-style-type:none;
}

ul li {
line-height:22px;
margin-bottom:10px;
position:relative;
}

ul li:before {
content:"";
width:26px;
height:26px;
background: url(/loto/img/icon-sprite.png) no-repeat 10.493% 9.346%;
background-size:500px 1500px;
position:absolute;
top:5px;
left:0px;
}

ul li a {
color: #000;
}

/* TYPOGRAPHY */
h1,h2,h3,h4, .title {
font:2.250em/48px Oswald, sans-serif;
color:#ff5301;
text-transform:uppercase;
letter-spacing:1px;
}

h1 {
margin-bottom:20px;
font-weight:700;
}

h2 {
font-size:1.750em;
line-height:34px;
margin-bottom:15px;
font-weight:700;
}

h3, .title {
font-size:1.5em;
line-height:26px;
margin-bottom:15px;
}

h4, .title {
font-size:1.313em;
line-height:24px;
margin-bottom:15px;
}

p.white {
color:#FFF;
}

.generic-box .large {
font-size:1.65em;
}

p span {
font-family:"open_bold", sans-serif;
}

.small {
font-size:0.875em;
}

/* GENERAL CONTENT */
p {
line-height:30px;
margin-bottom:25px;
letter-spacing:-0.5px;
}

.btn {
position:relative;
font:1.3em/24px Oswald, sans-serif;
text-transform:uppercase;
text-align:center;
text-decoration:none;
display:inline-block;
z-index:0;
border:none;
cursor:pointer;
border:1px solid #ffea00;
-webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.5);
letter-spacing:1px;
color:#000;
font-weight:700;
}

.btn:hover, a:hover {
background:#ffe651;
color: #000;
}

.btn.green {
border-color:#82e463;
color:#fff;
}

.btn.green:hover {
background:#88ec69;
background:linear-gradient(to bottom, #88ec69 0%, #75cb5a 100%);
color: #FFF;
}

.btn-alt {
background:#66b34e;
color:#fff;
font:1.125em/18px Oswald, sans-serif;
text-transform:uppercase;
font-weight:700;
letter-spacing:1px;
}

.btn-alt:hover {
background:#76cd5b;
color: #FFF;
}

.button-box {
display:inline-block;
width:100%;
}

.btn.btn-left {
float:left;
position:relative;
}

.btn.btn-right {
float:right;
position:relative;
}

.btn.disabled {
background:#DDD;
color:#AAA;
border:1px solid #CCC;
cursor:default !important;
}

.generic-box {
display:inline-block;
width:100%;
margin-bottom:30px;
position:relative;
background:#f9f9f9;
border:1px solid #e3e7ee;
}

.generic-box .box:last-child {
border-right:none!important;
}

.generic-box h2 {
}

/* BALL STYLES */
.balls {
margin-bottom:40px;
}

.balls .ball,.balls .bonus, .ball:last-child {
box-shadow:0 -5px 10px 0 rgba(0,0,0,0.5) inset;
-webkikt-box-shadow:0 -10px 25px 0 rgba(0,0,0,0.5) inset;
display:inline-block;
font:1.125em/40px Oswald,sans-serif;
height:40px;
letter-spacing:-1px;
position:relative;
text-align:center;
top:0;
width:40px;
background:url(/loto/img/icon-sprite.png) no-repeat 54.466% 0;
background-size:500px 1500px;
margin-bottom:0;
color:#fff;
}

.balls li:before, .ball:last-child:before {
background:none;
}

.balls .ball:after, .balls .bonus:after {
content:"";
display:block;
height:11px;
position:absolute;
bottom:-4px;
width:40px;
background:url(/loto/img/icon-sprite.png) no-repeat 54.526% 6.68%;
background-size:500px 1500px;
}

.balls .bonus.extra {
background-position:54.466% 3.425%;
color:#293444;
}

.balls .bonus:before, .ball:last-child:before {
width:40px;
height:20px;
font:11px/18px Oswald;
color:#293444;
letter-spacing:0;
top:42px;
line-height:12px;
}

.balls.big .bonus:before {
top:56px;
width:50px;
}

.balls.big .ball,.balls.big .bonus {
background-size:650px 1950px;
height:52px;
width:52px;
font-size:1.500em;
line-height:54px;
box-shadow:0 -5px 10px 0 rgba(0,0,0,0.3) inset;
-webkikt-box-shadow:0 -10px 25px 0 rgba(0,0,0,0.3) inset;
}

.balls.big .ball:after, .balls.big .bonus:after {
background-size:650px 1950px;
height:17px;
bottom:-8px;
left:0px;
width:50px;
}

/* NUMBERS GENERATOR */
.numbers-generator .balls .ball {
background-color:#0b4cd7;
}

.numbers-generator .balls .bonus.extra {
background-color:#ffdc00;
color: #293444;
}

.numbers-generator .balls .bonus.extra:before {
content:"Extra";
}

/* GENERATOR */
.generic-box.generator {
}

.generator .title {
font-size:1.125em;
color:inherit;
margin-left:30px;
}

.generator .balls {
margin-left:15px;
}

.generic-box {
}

/* ANIMATION */
.animated {
visibility:hidden;
}

/* GENERATOR */
.balls .innerA {
position:absolute;
width:52px;
height:52px;
line-height:52px;
margin:0;
left:0;
top:0;
display:block;
overflow:hidden;
}

.balls .innerB, .balls .number {
position:relative;
width:100%;
height:100%;
}

.balls .innerB {
display:block;
}``````

Â

And our number_generator.js code:

``````\$('#startNumbersGeneratorForm').on('submit', function(event){
event.preventDefault();
var resultsDiv = \$('#generatorResults');
\$(resultsDiv).empty();
var balls = parseInt(\$(this).find('input[name="from_balls"]').val());
var from = parseInt(\$(this).find('input[name="range_numbers"]').val());
var balls2 = parseInt(\$(this).find('input[name="extra_balls"]').val());
var from_extra = parseInt(\$(this).find('input[name="range_extra_numbers"]').val());
var numbers = new Array;

for(let i = 1; i <= from; i++) numbers.push(i);
if(from_extra > 0) {
var extra_numbers = new Array;
for(let i = 1; i <= from_extra; i++) extra_numbers.push(i);
}

var resultsUl = document.createElement('ul');
resultsUl.setAttribute('class', 'balls big');
\$(resultsDiv).append(resultsUl);

if(balls2 > 0) {
for(let i = 1; i <= balls; i++) {
var ball = document.createElement('li');
ball.setAttribute('class', 'ball');
ball.setAttribute('id', 'B'+i);
var innerA = document.createElement('span');
innerA.setAttribute('class', 'innerA');
var innerB = document.createElement('span');
innerB.setAttribute('class', 'innerB');
\$(innerA).append(innerB);
\$(ball).append(innerA);
\$(resultsUl).append(ball);
}
for(let i = balls + 1; i <= balls + balls2; i++) {
var extra = document.createElement('li');
extra.setAttribute('class', 'bonus extra');
extra.setAttribute('id', 'B'+i);
var innerA = document.createElement('span');
innerA.setAttribute('class', 'innerA');
var innerB = document.createElement('span');
innerB.setAttribute('class', 'innerB');
\$(innerA).append(innerB);
\$(extra).append(innerA);
\$(resultsUl).append(extra);
}
generate(balls, numbers, balls2, extra_numbers);
} else {
for(let i = 1; i <= balls; i++) {
var ball = document.createElement('li');
ball.setAttribute('class', 'ball');
ball.setAttribute('id', 'B'+i);
var innerA = document.createElement('span');
innerA.setAttribute('class', 'innerA');
var innerB = document.createElement('span');
innerB.setAttribute('class', 'innerB');
\$(innerA).append(innerB);
\$(ball).append(innerA);
\$(resultsUl).append(ball);
}
generate(balls, numbers);
}
});

function generate(balls, numbers, balls2=0, extra_numbers=0) {
\$(".innerB").html("?");
for (var i = 1; i < balls + balls2 + 1; i++){
createNums(\$("#B" + i + " .innerB"), i, balls, numbers, balls2, extra_numbers);
}
for (var i = 1; i < balls + balls2 + 1; i++){
moveNums(\$("#B" + i + " .innerB"), i, balls, numbers, balls2, extra_numbers);
}
};

function createNums(obj, idNum, balls, numbers, balls2, extra_numbers) {
if (idNum <= balls) {
for (var i = 0; i < numbers.length * 2; i++){
var chosen = Math.floor(Math.random() * numbers.length);
obj.append('<div class="number" id="ID_' + idNum + '-' + i + '">' + numbers[chosen] + '</div>');
}
} else {
if(extra_numbers.length > 0) {
for (var j = 0; j < extra_numbers.length * 2; j++){
var chosen = Math.floor(Math.random() * extra_numbers.length);
obj.append('<div class="number" id="ID_' + idNum + '-' + j + '">' + extra_numbers[chosen] + '</div>');
}
}
}
};

function moveNums(obj, idNum, balls, numbers, balls2, extra_numbers) {
var time = 500;
time += Math.round(Math.random() * 1000);
obj.stop(true, true);
obj.css('margin-top', '-2080px');
var Duplicates = checkDuplicates(idNum, balls, numbers, balls2, extra_numbers);
while (Duplicates) {
Duplicates = checkDuplicates(idNum, balls, numbers, balls2, extra_numbers)
}
obj.animate( {"margin-top":"-1040px"}, {'duration': time, 'easing': 'swing'} );
};

function checkDuplicates(idNum, balls, numbers, balls2, extra_numbers) {
for (var i = 1; i < balls + 1; i++) {
if ( i != idNum && \$('#ID_' + i + "-19").html() == \$('#ID_' + idNum + "-19").html() ) {
\$("#B" + idNum + " .innerB").html("?");
createNums(\$("#B" + idNum + " .innerB"), idNum, balls, numbers, balls2, extra_numbers);
return true;
}
}
if (balls2 > 1 && idNum > balls) {
for (var i = balls + 1; i < balls + balls2 + 1; i++) {
if ( i != idNum && \$('#ID_' + i + "-19").html() == \$('#ID_' + idNum + "-19").html() ) {
\$("#B" + idNum + " .innerB").html("?");
createNums(\$("#B" + idNum + " .innerB"), idNum, balls, numbers, balls2, extra_numbers);
return true;
}
}
}
return false;
};``````

Â

Â

Developed by: MariusDiaconu

Â

I hope it helps. Thank you for reading :)