JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>Odds: <span id="sn1"></span> - <span id="sn2"></span> - <span id="sn3"></span> - <span id="sn4"></span></p>


<p>Odds: <span id="theodds"></span></p>

JavaScript

// random colour


var arr = ["red", "yellow", "green", "blue"];

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// random odds


var arr2 = [2, 4, 5, 20];

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}


// Used like so

var scol = shuffle(arr);

var snail1Col = scol[0];
var snail2Col = scol[1];
var snail3Col = scol[2];
var snail4Col = scol[3];

var sodd = shuffle(arr2);

var snail1Odds = sodd[0];
var snail2Odds = sodd[1];
var snail3Odds = sodd[2];
var snail4Odds = sodd[3];

var sn1 = document.getElementById("sn1");
var sn2 = document.getElementById("sn2");
var sn3 = document.getElementById("sn3");
var sn4 = document.getElementById("sn4");

sn1.innerHTML = snail1Col + " " + snail1Odds;
sn2.innerHTML = snail2Col + " " + snail2Odds;
sn3.innerHTML = snail3Col + " " + snail3Odds;
sn4.innerHTML = snail4Col + " " + snail4Odds;