JSFiddle - React, Tailwind, and code Playground

by simpleorchid

HTML

<div id="Level_1">
    <span id="but1" class="btn btn-primary btn-lg custom">1</span>
    <span id="but2" class="btn btn-primary btn-lg custom">2</span>
    <span id="but3" class="btn btn-primary btn-lg custom">3</span>
    <span id="but4" class="btn btn-primary btn-lg custom">4</span>
</div>
<div id="Level_2">
    <span id="but5" class="btn btn-primary btn-lg custom">5</span>
    <span id="but6" class="btn btn-primary btn-lg custom">6</span>
    <span id="but7" class="btn btn-primary btn-lg custom">7</span>
    <span id="but8" class="btn btn-primary btn-lg custom">8</span>
</div>
<div id="Level_3">
    <span id="but9" class="btn btn-primary btn-lg custom">9</span>
    <span id="but10" class="btn btn-primary btn-lg custom">10</span>
    <span id="but11" class="btn btn-primary btn-lg custom">11</span>
    <span id="but12" class="btn btn-primary btn-lg custom">12</span>
</div>
<div id="Level_4">
    <span id="but13" class="btn btn-primary btn-lg custom">13</span>
    <span id="but14" class="btn btn-primary btn-lg custom">14</span>
    <span id="but15" class="btn btn-primary btn-lg custom">15</span>
    <span id="but16" class="btn btn-primary btn-lg custom"></span>
</div>

CSS

.custom {
    width: 78px !important;
}

JavaScript

var arrayList = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'];

alert("1. " + arrayList);
var result = shuffle(arrayList);
alert(result);
setRandomValues(result);



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

function setRandomValues(resultArray){
    for(var i = 0 ; i < arrayList.length ; i++){
       $("#but"+ (i+1) ).text(resultArray[i]);
    }
}