JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
<form id="form">
  <div class="form-row">
    <div class="form-group col">
      <label for="ball_1">Ball 1</label>
      <input type="number" name="ball_1" value="" class="ball form-control form-control-lg" min="1" max="50" data-type="ball" disabled/>
    </div>
    <div class="form-group col">
      <label for="ball_2">Ball 2</label>
      <input type="number" name="ball_2" value="" class="ball form-control form-control-lg" min="1" max="50" data-type="ball" disabled/>
    </div>
    <div class="form-group col">
      <label for="ball_3">Ball 3</label>
      <input type="number" name="ball_3" value="" class="ball form-control form-control-lg" min="1" max="50" data-type="ball" disabled/>
    </div>
    <div class="form-group col">
      <label for="ball_4">Ball 4</label>
      <input type="number" name="ball_4" value="" class="ball form-control form-control-lg" min="1" max="50" data-type="ball" disabled/>
    </div>
    <div class="form-group col">
      <label for="ball_5">Ball 5</label>
      <input type="number" name="ball_5" value="" class="ball form-control form-control-lg" min="1" max="50" data-type="ball" disabled/>
    </div>
    <div class="form-group col">
      <label for="star_1">Star 1</label>
      <input type="number" name="star_1" value="" class="ball form-control form-control-lg" min="1" max="12" data-type="star" disabled/>
    </div>
    <div class="form-group col">
      <label for="star_2">Star 2</label>
      <input type="number" name="star_2" value="" class="ball form-control form-control-lg" min="1" max="12" data-type="star" disabled/>
    </div>
  </div>
  <div class="form-group">
    <button type="sumbit" class="btn btn-lg btn-block btn-primary">
      Lucky Dip
    </button>
  </div>
</form>
</div>

CSS

#form {
  padding: 1rem;
}

JavaScript

// document ready
$(function() {

  // our form object constant var
  const form = $('#form');
  
  // form on submit
  $(form).on('submit', function(e) {
  
  	// prevent default
    e.preventDefault();
    
    // our balls selected
    let balls = [];
    let stars = [];
    
    // loop through each ball
    $('.ball', this).each(function(i, obj) {
    	
      let min = parseInt($(this).attr('min'));
      let max = parseInt($(this).attr('max'));
      
    	if($(this).data('type') === 'ball') {
      
      	let ball = random_ball(max, balls);
        
        balls.push(ball);
        
        $(this).val(ball, true);
      
      }  
      
      if($(this).data('type') === 'star') {
      
      	let star = random_ball(max, stars);
        
        stars.push(star);
        
        $(this).val(star, true);
      
      }
      
		});
  
  });
  
  function random_ball(max, selected) {
  
    let random_ball = random_int(max);
      
    if($.inArray(random_ball, selected)) {
      
      random_ball(max, selected);
      
    } else {
      
      return random_ball;
      
    }
  
  }
  
  // random interger between 1 and max
  function random_int(max) {
  
    // random interger between 1 and max
    return Math.floor(Math.random() * max) + 1;
      
  }
  
});