shuffled

by Artem

HTML

<button id="update">Update</button>
<div id="container"></div>

CSS

#update {
  margin-bottom: 10px;
}

#container {
  border: 2px dashed #ccc;
  padding: 10px 15px;
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.item {
  padding: 30px;
  background-color: #b1b1b1;
  border: 2px solid #fff;
  margin-right: 15px;
  margin-bottom: 15px;
}

JavaScript

'use strict';

const a = [1, 2, 3, 4, 5];

//init
render(container, shuffleArray(a));

function shuffleArray(array) {
  const tmpArr = array.slice();
  for (let i = tmpArr.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    let temp = tmpArr[i];
    tmpArr[i] = tmpArr[j];
    tmpArr[j] = temp;
  }
  return tmpArr;
}

function render(container, items) {
  container.innerHTML = '';
  const fragment = document.createDocumentFragment();
  items.forEach(item => {
    const elem = document.createElement('div');
    elem.className = 'item';
    elem.innerText = item;
    fragment.appendChild(elem);
  });
  container.appendChild(fragment);
}

update.onclick = function() {
  const shuffledArray = shuffleArray(a);
  render(container, shuffledArray);
};