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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>
<div class="container-fluid">

  <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...

SCSS

#form {
  padding: 1rem;
}

.form-group LABEL {
  display: none;
}

.ball {
  text-align: center;
  aspect-ratio: 1 / 1;
  height: initial;
  padding: .5rem 0;
  border-radius: 50%;
  border: none;
  background: #e2e2e2;
  
  &[data-type="star"] {
    background: #ffef35;
    border-radius: 0;
    clip-path: polygon(50% 2.45%, 69.09% 28.74%, 100% 38.77%, 80.93% 65.06%, 80.9% 97.55%, 50% 87.5%, 19.1% 97.55%, 19.1% 65.06%, 0% 38.77%, 30.91% 28.74%);
  }
  
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
      display: none;
      -webkit-appearance: none;
      margin: 0;
  }

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

#results {
  
  LI {
    margin-bottom: .25rem;
  }
  
  NUM {
    display: inline-block;
    aspect-ratio: 1 / 1;
    padding: .5rem 0;
    border-radius: 50%;
    border: none;
    text-align: center;
    width: 40px;
    
    &.result-ball {
      background: #e2e2e2;
    }
    
    &.result-star {
      background: #ffef35;
    }
    
    &.match {
      background: #a1dcff !important;
    }
  }
}

TIME {
  position: fixed;
  bottom: 0;
  
  &.longest {
    left: 0;
    color: red;
  }
  
  &.current {
    right: 0;
  }
  
  &::before {
    content: attr(data-time);
    display: inline;
  }
}

JavaScript

// document ready
$(function() {

  let gate = false;

  let draws = 0;

  let results = {
    balls: [3, 20, 29, 36, 45],
    stars: [7, 9]
  }

  let history = [];

  // our form object constant var
  const form = $('#form');

  /*   const draw = setInterval(function () {
      
      //$('[type="sumbit"]', form).click();
    
    }, 250); */

  // 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);

    if ($.inArray(ball, selected) !== -1) {

      return random_ball(max, selected);

    } else {

      return ball;

    }

  }

  let check_results = function(results, luckydip) {

    draws++;

    let balls_match = 0;
    let stars_match = 0;

    let balls_results = '';
    let stars_results = '';

    $.each(luckydip.balls, function(play_key, play_ball) {

      let ball_match = false;

      $.each(results.balls, function(result_key, result_ball) {

        if (play_ball === result_ball) {

          balls_match++;
          ball_match = true;

          return;

        }

      });

      balls_results += '<num class="result-ball' + (ball_match ? ' match' : '') + '">' + String(play_ball) + '</num> ';

    });

    $.each(luckydip.stars, function(play_key, play_star) {

      let star_match = false;

      $.each(results.stars, function(result_key, result_star) {

        if (play_star === result_star) {

          stars_match++;
          star_match = true;

          return;

        }

      });

      stars_results += '<num class="result-star' + (star_match ? ' match' : '') + '">' + String(play_star) + '</num> ';

    });

    let history_count = history.length;

    $('[name="draws"]').val(history_count, true);

    //$('#log',form).prepend('Balls: ' + String(balls_match) + ', Stars: ' + String(stars_match) + "\n");

    if (history_count % 10 === 0) {

     ...