<button id="generate">generate</button>
<button id="reset">reset</button>

<div id="result"></div>

body {
  margin: 1em;
}

button {
  border: 1px solid;
  padding: .75em 1.5em;
}

li {
  animation: bg 0.5s;
  // &:nth-child(6n + 1) {
  //   margin-top: 2em;
  // }
}

@keyframes bg {
  0% {
    background-color: #ffee58;
  }
}

@mixin delay($rule, $number, $value) {
  @for $i from ($number) to 1 {
    &:nth-child(#{$i}) {
      #{$rule}-delay: (#{$i * $value});
    }
  }
}

#result li {
  @include delay(animation, 6, 0.1s);
}

var genBtn = $('#generate');
var resetBtn = $('#reset')
var outputEl = $('#result');
var passwordLength = 6;

// clicks
genBtn.on('click', () => {
  const myList = $('<ol />');
  outputEl.append(myList);
  cryptoGenNumber(passwordLength, myList);
});
resetBtn.on('click', () => outputEl.empty());

// magic
function cryptoGenNumber(next, el) {
    let result = ''
    if(next === 0) return;
    var array = new Uint32Array(5);
    window.crypto.getRandomValues(array);
    for (var i = 0; i < array.length; i++) {
        result += (array[i] % 6) + 1;
    }
    el.append(`<li class="ll-${next}">${ result }</li>`);
    cryptoGenNumber(--next,el);
}

// math.random is not secure
// function genNum(bb) {
//   let ss = '';
//   if (bb === 0) return;

//   for (let j = 1; j < 6; j++) {
//     ss += Math.floor(Math.random() * 6 + 1);
//   }
//   output.append(`<li class="ll-${bb}">${ ss }</li>`);
//   genNum(--bb);
// }