Generating Lottery Numbers Using JavaScript and Bootstrap 4

Lottery number generator is built with JavaScript and Bootstrap 4 which generates random lottery numbers for lottery drawing games like Powerball and Mega Millions.

How to make use of it:

1. Building an HTML structure for the lottery number generator.

<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.</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.</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.</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.</small>
      </div>
    </div>
  </div>
  <div class="form-group">
    <input type="submit" value="Generate Numbers" name="generate_numbers" class="btn btn-block">
  </div>
</form>

2. Create an empty DIV container for the results.

<div class="generic-box generator numbers-generator">
  <div id="generatorResults" class="col-md-8 offset-md-2"></div>
</div>

3. Load the necessary jQuery library and Bootstrap stylesheet.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>

4. Additional CSS styles for the lottery number generator.

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

.balls .ball,.balls .bonus, .ball:last-child {
  border-radius:65px;
  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;
  padding:0;
  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;
  text-shadow:none;
  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 {
  padding:30px 0 0;
}

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

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

.generic-box { 
  padding-bottom:15px;
}

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

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

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

.balls .innerB { 
  display:block;
}

Random Lottery Number Generator With jQuery And Bootstrap, numbers-generator-js Plugin/Github, program prints a lotto row javascript

Read More – 

Simple and Easy jQuery Input Mask Plugin | InputMask-Phone-Numbers
💸 A Tiny Currency Formatting Library For JavaScript | pretty-money


See Demo And Download

Official Website(MariusDiaconu): Click Here

This superior jQuery/javascript plugin is developed by MariusDiaconu. For extra Advanced usage, please go to the official website.

Share