JSFiddle - React, Tailwind, and code Playground

by cedric_tarou

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="container">
  <button id="btn">Click to Random</button>
  <div class="kyouyshitu">
    <ul class="seats">
    </ul>
  </div>
</div>
</body>
</html>

CSS

.container {
  margin: 0 auto;
  background: #eee;
}
.seats {
  margin: 0 auto;
  width: 80%;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

#btn {
  margin-bottom: 2rem;
  
  margin-left: 2rem;
}

JavaScript

const seats = document.querySelector('.seats');
const btn = document.querySelector('#btn');

var boys = [
	{id: 1, name: 'aaa'},
	{id: 2, name: 'bbb'},
	{id: 3, name: 'ccc'},
	{id: 4, name: 'ddd'},
];


const changeSeats = () => {
  for(i = boys.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = boys[i];
    boys[i] = boys[j];
    boys[j] = tmp;
  }

  boys.forEach((boy, index) => {
    seats.innerHTML += `
			<li class="seat">
				<div>
					<span>${boy.id}</span>
					<span>${boy.name}<span>
      	</div>
    	</li>
  	`;
	});
}

const clear = () => {
	while (seats.firstChild) {
    seats.removeChild(seats.firstChild);
  }
}

 btn.addEventListener('click', () => {
 	clear();
 	changeSeats();
  
 });