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="text" name="ball_1" value="" class="ball form-control form-control-lg" min="1" max="50" data-type="ball" readonly/>
    </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" readonly/>
    </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" readonly/>
    </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" readonly/>
    </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" readonly/>
    </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" readonly/>
    </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" readonly/>
    </div>
  </div>
  <div class="form-group">
    <button type="sumbit" class="btn btn-lg btn-block btn-primary">
      Lucky Dip
    </button>
  </div>
</form>
</div>

<svg version="1.1"...

SCSS

#form {
  padding: 1rem;
}

.ball {
  text-align: center;
  aspect-ratio: 1 / 1;
  height: initial;
  
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
      display: none;
      -webkit-appearance: none;
      margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
  }

  &[type=number] {
      -moz-appearance:textfield; /* Firefox */
  }
}

/* [data-type="star"] {
  clip-path: url('#star');
  clip-path-position: center; 
  clip-path-size: contain;
} */

JavaScript

// document ready
$(function() {

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