Random Lottery Number Generator With jQuery And Bootstrap

A jQuery & Bootstrap based number generator that generates random lottery numbers for lottery drawing games like Powerball and Mega Millions.

How to use it:

1. Build the 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. 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>

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's 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;
}

---

This awesome jQuery plugin is developed by MariusDiaconu. For more Advanced Usages, please check the demo page or visit the official website.